Social Locker para Blogger

 

Hola a todos, hoy les traigo tal vez el mejor truco que hasta aquí he compartido. Se trata de un Social Locker para Blogger. ¿Qué es esto? Simplemente un script que te permitirá bloquear parte del contenido de un artículo (una imagen, un link de descarga o parte del artículo)y pedir al lector que para acceder a él deberá realizar una acción social (básicamente compartir el contenido en alguna red social). 

Esto es común verlo en Blogs creados en WordPress, pero en BLogger casi no lo he visto. Al menos en blogs de habla hispana no lo he visto nunca. 

¿Para qué queremos hacer esto? Simple, para conseguir que compartan nuestros artículos y lograr una mayor viralización de los mismos.

¿Cómo añado un Social Locker (Bloqueador Social) a mi Blog en Blogger? Comparte para ver la explicación.

Para lograr este efecto lo primero que debemos hacer es dirigirnos al editor html de nuestra plantilla.

• Menú principal->Plantilla->Editar HTML

Utilizando CTRL+F busca la etiqueta </head> y justo antes de ella añade el siguiente código

<link href='https://dl.dropboxusercontent.com/u/137869302/lockercss.css' rel='stylesheet' type='text/css'/> 

¿Cómo ocultar parte del contenido?

Comienza a escribir tu artículo de forma regular y cuando llegues a la parte que deseas ocultar cambia el modo de edición a html. Pega al final de todo el siguiente código:

<article id="default-usage">
<div class="to-lock" style="display: none;">
     
<!--Hidden Content Starts (You can Use HTML BELOW)-->

<div style="text-align: center; margin-bottom: 20px;">
<img src="Añade la URL de la imagen que quieres ocultar aquí" alt="" style="margin: auto;" />
</div>
<div style="text-align: justify">
Añade aquí el texto que deseas ocultar en formato HTML

</div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script>

<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "http://twitter.com/TuUsuario",
text: "Añadi Un Social Locker para Blogger!"
},
// facebook options
facebook: {
url: "http://www.facebook.com/TuPagina",
appId: "408184445628791"
},
google: {
url: "http://plus.google.com/+TuUsuario"
}
});
});;;;
     
</script>

Por último reemplaza las URLs de Twitter, Facebook (también la id de tu aplicación) y Google+ por las tuyas.

Con esto conseguirás que el lector comparta en sus redes sociales el contenido para poder acceder a él.

Esto es todo por ahora, espero que esto te haya servido de algo. Saludos y hasta pronto.

Fuente: tricksdroid.com