- Desde
- 24 Jul 2014
- Mensajes
- 369
YouTube LOCK nos permitirá hacer que los lectores que visiten nuestro blog tenga que compartir el vídeo para poder verlo, esto es un truco viral para aumentar nuestro alcance en las redes sociales y actualmente es muy usado por paginas de contenido variado (memes, imágenes, vídeo, gifs, etc) Util Para Ganar Dinero y muchísimas visitas Posteando cosas interesantes!
INSTALACION:
Primero vamos a nuestro editor de plantillas en modo HTML (ver imagen guia)
y buscamos la etiqueta </head> y antes de esta pegamos todo este codigo:
Si tu plantilla ya tiene JQuery entonces ya no pongas la linea en Rojo del código anterior.
Ahora buscamos la etiqueta <body> y pegamos este código:
Ahora para publicar nuestros videos bloqueado, vamos a crear nuestra nueva entrada y entramos en edicion HTML y pegamos lo siguiente:
Y Solo Reemplazamos AQUI-ID-DEL-VIDEO en el codigo!
¿Como saber el id del Video?
Bueno amigos este fue todo el Tutorial espero y disfruten del codigo que es muy bueno para atraer muchas visitas y ganar dinero Con Adsense Etc, los videos los puedes compartir en Paginas de Facebook, Grupos, tu perfil de Facebook Etc Luego de haberlo Posteado en tu Blog!
Si te gusto el Tuto espero un Me Agrada de tu parte :encouragement:
INSTALACION:
Primero vamos a nuestro editor de plantillas en modo HTML (ver imagen guia)
y buscamos la etiqueta </head> y antes de esta pegamos todo este codigo:
HTML:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<style>
#youtubeblocker {
position:relative;
margin:0px auto;
cursor:;
overflow: hidden;
border:0px solid #000;
width:640px;
height:360px;
}
#youtubeblocker iframe {
display:;
}
#youtubeblocker #image {
width:100%;
height:100%;
background-size:100% 100%;
}
#youtubeblocker #play {
position:absolute;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://dl.dropboxusercontent.com/u/84010639/LockYouTube%20Blogger/play.png);
border:0px solid #000;
z-index:1;
}
#youtubeblocker #play-button {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
}
#youtubeblocker #play-button:hover {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://dl.dropboxusercontent.com/u/84010639/LockYouTube%20Blogger/play-2.png);
}
#youtubeblocker #sharebox {
display:none;
cursor:pointer;
position:absolute;
top:0;
left:0;
width:640px;
height:360px;
background: url(https://dl.dropboxusercontent.com/u/84010639/LockYouTube%20Blogger/sharebut.png);
border:0px solid #000;
z-index:2;
}
</style>Si tu plantilla ya tiene JQuery entonces ya no pongas la linea en Rojo del código anterior.
Ahora buscamos la etiqueta <body> y pegamos este código:
HTML:
<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 == "item"'>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId: '1439152689637274',
status: true,
xfbml: true
});
// Additional initialization code such as adding Event Listeners goes here
};
function youtubeblocker() {
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 youtube (IDyoutube) {
var output1 = '<div id="youtubeblocker"><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="youtubeblocker();"></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>Ahora para publicar nuestros videos bloqueado, vamos a crear nuestra nueva entrada y entramos en edicion HTML y pegamos lo siguiente:
HTML:
<script>youtube("AQUI-ID-DEL-VIDEO");</script>Y Solo Reemplazamos AQUI-ID-DEL-VIDEO en el codigo!
¿Como saber el id del Video?
Bueno amigos este fue todo el Tutorial espero y disfruten del codigo que es muy bueno para atraer muchas visitas y ganar dinero Con Adsense Etc, los videos los puedes compartir en Paginas de Facebook, Grupos, tu perfil de Facebook Etc Luego de haberlo Posteado en tu Blog!
Si te gusto el Tuto espero un Me Agrada de tu parte :encouragement:
