¿ Como se consigue esto? Pues muy fácil tan solo debemos bloquear nuestro contenido "exclusivo" y el usuario que quiera ver ese contenido deberá marcar 'Me gusta', hacer un 'Tweet' o darnos un '+1'
Pasos para añadir nuestro Content Locker a nuestro blog:
- Vamos a nuestra plantilla>> Editar HTML y antes que esta palabra </head> colocamos el siguiente código :
<link href='http://go0.es/content/locker.css' rel='stylesheet' type='text/css'/>
- Ahora vamos a nuestra entrada y en donde queramos poner nuestro Content Locker pegamos el siguiente código HTML (este paso se repite según en las entradas que queremos ponerlo y editamos las zonas repasadas amarillas):
<article id="default-usage">
<div class="to-lock" style="display: none;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
<div style="text-align: justify;">
<br />
A qui pondrás tu texto o código html
</div>
<br />
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</div>
</article>
<br />
<div id="mblunlocker">
</div>
<script src="http://newbloggertricks.googlecode.com/svn/lock.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Contenido bloqueado por UnversoBlogger",
message: "Para desbloquearlo realiza una acción social ;)"
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
//twitter options
twitter: {
url: "http://www.universoblogger.com",
text: "El mejor sitio te Tutoriales y mas..."
},
// facebook options
facebook: {
url: "https://www.facebook.com/uiversoblogger/",
appId: "1033982836633994"
},
google: {
url: "http://www.universooblogger.com"
}
});
});;;;
</script>
Ejemplo: