Crear un contenido bloqueado el cual solo sera disponible cuando el usuario de un me gusta, o un Tweet, es genial ya que con esto ganamos fans para nuestras redes sociales y hacemos que nuestro blog tenga una sección "premium" por decirlo de cierta forma.
Para agregar este truco a tu blog, primero ve a Plantilla y antes de
</head> pega lo siguiente:
<link href='http://mybloggerlab.com/StyleSheet/locker.css' rel='stylesheet' type='text/css'/>
Ahora en la edición HTML de una entrada pega lo siguiente:
<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="http://www.totalcar.rs/wp-content/uploads/2010/10/ferrarilogo.jpg" alt="" style="margin: auto;" />
</div>
<div style="text-align: justify">
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://www.wilvalencia.com/img/visto_bueno_logo.jpg" /></a></div>
<b>Gracias por compartir, ahora puedes disfrutar del contenido que estaba oculto
</b></div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/lock.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Comparte y Descubre lo que esta oculto",
message: "Aquí se encuentra el contenido oculto, solo comparte y lo descubriras."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "URL DE TU TWITTER",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "URL DE TU FACEBOOK",
appId: "418044881593120"
},
google: {
url: "URL DE TU GOOGLE+"
}
});
});;;;
</script>
Reemplaza lo que esta resaltado en color azul por lo que se indica en cada caso.
Lo que esta resaltado en color verde son los parámetros que puedes personalizar, entre ellos se encuentra el contenido que se va a ocultar.
Luego de que el usuario comparta se vera lo siguiente:
Puedes ver el truco funcionando en el
siguiente blog de pruebas.
El código pertenece a
My Blogger Lab, yo por mi parte he traducido el script al español y he agregado un par de cosas mas, dando como resultado un código mas optimizado.
Espero que les haya sido de mucha utilidad este truco, y si ya usaste este truco, coméntanos que tal te ha parecido.