Llevo tiempo probando diferentes tutoriales de Internet que me permitiesen mostrar contenidos de mi blog de Blogger a cambio de acciones sociales, pero no terminaba de encontrar uno que funcionase realmente.
Finalmente he encontrado este tutorial en la página http://stackoverflow.com, que funciona perfectamente, y que os traduzco para que os sea más fácil de aplicar en vuestra página de Blogger. Yo lo he podido instalar sin problemas, ¡y a la primera! -con lo que me cuesta a mí el Html… Vamos al grano.
Traducción
1er paso: Entra en Plantilla > Editar Html y haciendo Ctrl+f busca <Head>, justo después de esa etiqueta pega el siguiente código:
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
2º paso: Ahora busca la etiqueta </head>, y justo antes pega el siguiente código:
Ojo, he marcado en morado los campos que tenéis que modificar y adaptar con los links de vuestras páginas en las redes sociales. Si no tenéis alguna o queréis añadir otra, sólo tenéis que eliminarlas o sustituirlas del texto marcado en verde, y hacer lo mismo con el texto marcado en morado. También tendréis que modificar el texto marcado en rojo.
Os recomiendo copiar el código y modificarlo en un documento word, y realizar allí las modificaciones antes de pegarla en el html del blog. Y no olvidéis hacer un Backup de la plantilla original por si se tuercen las cosas.
<link href='https://sites.google.com/site/menightfury/home/social-locker/public/sociallocker_v1.6.0.css' rel='stylesheet'/>
<script src='https://sites.google.com/site/menightfury/home/social-locker/public/sociallockermin_v1.6.0.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function ($) { $('#default-usage .to-lock').sociallocker({ buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
twitter: {url:"https://www.facebook.com/www.mostsharedposts"}, facebook: {url:"https://www.facebook.com/www.mostsharedposts"}, google: {url:"https://plus.google.com/u/0/b/110589424466302901501/110589424466302901501"},
text: { header: "Like us To Unlock This Content",
message: "This content is locked. Like us on Twitter, Facebook or Google plus to unlock it." }, locker: {close: false, timer: 0,}, theme: "secrets" }); }); //]]> </script>
Una vez insertado el código, guardad la plantilla.
3er paso: Ahora ha llegado el momento de aplicarlo en alguna entrada de vuestro blog. Abrir una, y añadir este código en la versión Html de la entrada:
<article id="default-usage">
<div class="to-lock" style="display:none;">
Hello i am the hidden content
</div>
</article>
El texto marcado en verde es el que quedará oculto, y es ese el que tenéis que sustituir por el contenido que queráis.
Si te ha gustado este post, por favor, ¡¡Comparte!!
Espero que me enseñéis cómo os queda el Gadget en vuestro blog.
Y si tenéis cualquier duda, ¡¡Preguntad!!