- Desde
- 25 Ago 2013
- Mensajes
- 4.932
Hola a todos hoy quiero enseñar como convertir su blogger en algo viral para la principal red social "Facebook", encontré este en internet la verdad pero lo que muchos usuarios no han podido es implementarlo y puesto que yo también lo he intentado, no se pudo, pero encontré la manera de poder hacer funcionar de la forma correcta y sin complicarnos mucho la vida.
Aclaraciones:
- Funciona en cualquier plantilla siempre y cuando sea de blogger.
- No necesitaras hacer casi nada solo colocar los códigos.
#1 Paso:
#2 Paso:
Buscar la etiqueta </head> y pegamos antes de </head>
Truco encontrar rápido: cuando estés en la caja de código apreté Ctrl+F y escribe </head> enter y estarás en la linea instantáneamente.
Una vez que estes en la etiqueta en la parte de arriba pega este codigo.
#3 Paso:
Buscar la etiqueta <body> y pegar debajo de ella este codigo, si tienes problemas usa el truco del paso 2 pero con la diferencia de </head> escribe <body> para que la encuentres mas rapido y ahorres tiempo.
#4 paso:
Haz clic en la opcion guardar de blogger template.
#5 Paso:
Crea una entrada nueva dentro de ella elije la opción HTML, y pega este código, cambia "Código de vídeo de youtube" No toques las comillas solo lo que están dentro de ellas por el código del vídeo deseado.
Código con youtube quedaría así solo pongan el código ejemplo: https://www.youtube.com/watch?v=udckUJA75nU
#6 Muestras y demo:
BONUS EXTRA:
Ve a tu blog seguidamente busca:
Busca la opción: Plantilla de las entradas y guíate con las imágenes
Este truco sirve para ahorrar trabajo y estar pegando una y otra vez el mismo código
cuando hayas hecho estos pasos cada que crees una entrada aparecerá el código de forma automática
lista para que puedas modificar el código de youtube.
Si te gusto mi tutorial no dudes en:
Aclaraciones:
- Funciona en cualquier plantilla siempre y cuando sea de blogger.
- No necesitaras hacer casi nada solo colocar los códigos.
#1 Paso:
- Ve a tu blog (Blogspot)
- Plantilla
- Editar HTML
#2 Paso:
Buscar la etiqueta </head> y pegamos antes de </head>
Truco encontrar rápido: cuando estés en la caja de código apreté Ctrl+F y escribe </head> enter y estarás en la linea instantáneamente.
Una vez que estes en la etiqueta en la parte de arriba pega este codigo.
Insertar CODE, HTML o PHP:
<!-- compartir para ver contenido carambel -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<style>
#youcarambelblocker {
position:relative;
margin:0px auto;
cursor:;
overflow: hidden;
border:0px solid #000;
width:640px;
height:360px;
}
#youcarambelblocker iframe {
display:;
}
#youcarambelblocker #image {
width:100%;
height:100%;
background-size:100% 100%;
}
#youcarambelblocker #play {
position:absolute;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(http://3.bp.blogspot.com/-yvC1Py1lQ98/U9avGvgURmI/AAAAAAAAKkI/GOdz5yCVbac/s1600/playyoutube.png);
border:0px solid #000;
z-index:1;
}
#youcarambelblocker #play-button {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
}
#youcarambelblocker #play-button:hover {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(http://1.bp.blogspot.com/-2oDQw9hgu4I/U9avXdvVibI/AAAAAAAAKkQ/sbyAH5d54HQ/s1600/playyoutube.png);
}
#youcarambelblocker #sharebox {
display:none;
cursor:pointer;
position:absolute;
top:0;
left:0;
width:640px;
height:360px;
background: url(http://2.bp.blogspot.com/-FfOKWPdyr2g/U9aw-urG34I/AAAAAAAAKkc/F0vBuhhvTOs/s1600/playyoutube.png);
border:0px solid #000;
z-index:2;
}
</style>
<!-- compartir para ver contenido carambel -->#3 Paso:
Buscar la etiqueta <body> y pegar debajo de ella este codigo, si tienes problemas usa el truco del paso 2 pero con la diferencia de </head> escribe <body> para que la encuentres mas rapido y ahorres tiempo.
Insertar CODE, HTML o PHP:
<!-- compartir para ver contenido carambel -->
<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=1439152689637274";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId: '1439152689637274',
status: true,
xfbml: true
});
// Additional initialization code such as adding Event Listeners goes here
};
function youcarambelblocker() {
FB.ui( {
method: '../sharer/sharer.php?u=' +document.URL+ '',
link : document.URL,
},
function(response) {
if (response) {
$("#image, #play, #play-button, #sharebox").fadeOut('slow');
} else {
//alert('');
}
}
);
};
function sharebox(){
$("#sharebox").show();
}
function youcarambel (IDyoutube) {
var output1 = '<div id="youcarambelblocker"><div id="image" style="background-image: url(http://img.youtube.com/vi/' + IDyoutube + '/0.jpg)"><div id="play"><div id="play-button" onclick="sharebox();"></div></div><div id="sharebox" onclick="youcarambelblocker();"></div></div><iframe width="640" height="360" src="http://www.youtube.com/embed/'+IDyoutube+'?autoplay=0" frameborder="0" allowfullscreen></iframe></div>';
document.write (output1);
}
//]]>
</script>
</b:if>
<!-- compartir para ver contenido carambel -->#4 paso:
Haz clic en la opcion guardar de blogger template.
#5 Paso:
Crea una entrada nueva dentro de ella elije la opción HTML, y pega este código, cambia "Código de vídeo de youtube" No toques las comillas solo lo que están dentro de ellas por el código del vídeo deseado.
Insertar CODE, HTML o PHP:
<script>youcarambel("Código de vídeo de youtube");</script>Código con youtube quedaría así solo pongan el código ejemplo: https://www.youtube.com/watch?v=udckUJA75nU
Insertar CODE, HTML o PHP:
<script>youcarambel("udckUJA75nU");</script>#6 Muestras y demo:
Una imagen vale mas que mil palabras:
Un demo funcionando vale mas que 1 millón de imágenes juntas
DEMO
BONUS EXTRA:
Ve a tu blog seguidamente busca:
- Configuración
- Entradas y comentarios
Busca la opción: Plantilla de las entradas y guíate con las imágenes
Este truco sirve para ahorrar trabajo y estar pegando una y otra vez el mismo código
cuando hayas hecho estos pasos cada que crees una entrada aparecerá el código de forma automática
lista para que puedas modificar el código de youtube.
- Darle un comentario
- Darle un Me Agrada
- Compartirlo en las redes sociales
El vídeo del paso "#5" ¡A caballo regalado no se lo mira los dientes!
Última edición:
