Mil Trucos Blogger

Contenido Social Bloqueado en Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
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.
Contenido Social Bloqueado en Blogger


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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

35 Comentarios

  1. julio 18, 2013    

    NO APARECE NADA SOLAMENTE LA DIRECCION DEL QUE CREO EL GADGET…. es posible que sea problema de navegador ,,, he utilizado dos navegadores distintos y nada

    • julio 26, 2013    

      Pancho ya fue actualizado el código, por lo que ya te debe funcionar.

      Saludos

  2. julio 19, 2013    

    no me funciona… seguro que jquery entra en conflicto, ya he probado de todo y no me funciona… no se que hacer por que la verdad es que me vendría perfecto

    • julio 26, 2013    

      Josu ya fue actualizado el código, por lo que ya te debe funcionar.

      Saludos

  3. julio 19, 2013    

    Ya he actualizado el código, por lo cual ya debe funcionar perfectamente el truco, por favor pruebenlo y avisenme.

    Saludos

    • julio 20, 2013    

      ya lo probé y ya me funciono, creo que era porque tenia mis navegadores desactualizados. (modifique el script para quitarle el “POWERED BY MYBLOGGERLAB.COM” solo para probar como luciria)

    • Anonymous Anonymous
      julio 20, 2013    

      ¿Y cómo yo podría eliminar el ¨POWERED BY MYBLOGGERLAB.COM¨? ¡Help me!

      PD. Es que no se ve bien estéticamente. Lo hubieran podido poner más pequeñito. 🙁

    • julio 26, 2013    

      Yo puedo editar el script y eliminar los créditos, pero no seria nada ético de mi parte, así que el lo quiera modificado lo pasare solo por correo.

    • Anonymous Anonymous
      julio 26, 2013    

      ¡Hola! Te envíe un email para el script modificado. Te estaría muy agradecido si me lo pasas. ¡Gracias!

  4. Anonymous Anonymous
    julio 20, 2013    

    Me ha encantado pero tengo una pregunta se podria hacer solo para la red social Facebook ya que solo tengo facebook

    • julio 26, 2013    

      Pues si se puede, pero vamos amigo todo mundo tiene esas redes sociales

  5. julio 21, 2013    

    me agradaria si lo iceras en un video y lo suvieras a youtube.. 🙂 podrias acerlo porfavor

  6. julio 22, 2013    

    Eres un fenómeno!

  7. julio 26, 2013    

    me redirige a la pagina de mo blogger lab. que hago para que no haga eso

  8. julio 27, 2013    

    que crees que sea? o por que me redirige a su web?. sera la plantilla ? o que puede ser

  9. julio 28, 2013    

    si claro, mi web es http://jpgcristianas.net

  10. agosto 16, 2013    

    una pregunta… el codigo lo tengo q añadir primero? es q uso salto de linea en mis posts y no se si me funcione con ello… a mas de usar la primera imagen como portada???

  11. agosto 21, 2013    

    Hola!!, Todo bien pero no aparece el botón de facebook para darle like x.x aparece pero al momento de pasar el mouse no sale like ni nada, podrías ayudarme con eso? podrías también pasarme el script sin los creditos porfavor?

  12. Anonymous Anonymous
    septiembre 9, 2013    

    ¡Hola! Te envíe un email para el script modificado. Te estaría muy agradecido si me lo pasas. ¡Gracias! —Mi Correo Tabu_1996@hotmail.com

    • septiembre 11, 2013    

      He tenido un par de ocupaciones, y por eso no he terminado de modificar el script.

      Ademas creo que lo dejare así, porque si lo hago estaría violando derechos de autor.

  13. Anonymous Anonymous
    diciembre 4, 2013    

    el app id no sirve ese por default..y nose como hacer una app id en facebook, me enseñarias o me ayudarias?si tienes un link donde se explike como hacerlo seria fabuloso

    • diciembre 7, 2013    

      Amigo en el momento no tengo ese tutorial, pero pronto lo publicare (o)

      Saludos

  14. enero 2, 2014    

    No hay alguna así pero para los comentarios, osea que cuando comente con blogger o facebook se desbloqueé el contenido 😕 espero respuesta 🙂

    • enero 4, 2014    

      Pues hasta ahora no he visto ese truco pero de seguro que si lo hay.

      Saludos

  15. febrero 7, 2014    

    Hola buenas tardes, quisiera que me ayudes en una consulta, resulta que en facebook se publican miles de videos diarios, que si hago clic para ver me llevan a las web o blogs del autor pero estan bloqueados hasta que haga clic en compartir y ahi ese video se vuelve viral, es decir para poder ver el video tengo que obligatoriamente compartir en facebook, me gustaria probar ese recurso, tienes idea de como se hace Gracias y sigue adelante, tu blog ya es una referencia para quienes estamos aprendiendo alissfer1@gmail.com

    • febrero 9, 2014    

      Fernando con este truco puedes bloquear los vídeos, solo reemplaza el código de la imagen que he puesto por el de un vídeo.

      Saludos

    • marzo 11, 2014    

      hola @Hayder Juvinao primero que todo muchas gracias por ese tutorial realmente tienes un blog muy bueno y con mucho futuro y me preguntaba si existe la posibilidad de agregarle un temporizador al script de tal manera que si no se comparte se tenga que esperar un tiempo y solo se desbloquee asi como el ultimo ejemplo de esta demo
      http://demo.byonepress.com/social-locker-for-jquery/

      saludos y gracias brother 🙂

  16. marzo 11, 2014    

    hola amigo gracias por el tuto la verdad esta muy bueno pero que posibilidad hay de agregarle un temporizador de manera que si no comparten tengan que esperar un tiempo y solo se desbloquee como lo podemos ver en la ultima demo de http://demo.byonepress.com/social-locker-for-jquery/ la que dice

    Helper Tools
    The plugin provides a pair of helper tools: the Unlocking Timer and the Close Icon. You can use these optional features together or apart.

  17. mayo 13, 2014    

    Muy bueno seguro sera muy util

  18. mayo 18, 2014    

    Ya no sirve amigo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo