Hola FB hoy les traigo un tutorial que tal vez algunos ya conozcan, es para crear un contenido social en Blogger o Social Content Locker, espero les sirva y saludos.
Les Dejo un Demo AquiI > DEMO CONTENIDO SOCIAL BLOQUEADO
Caracteristicas del contenido social bloqueado:
- Tu blog generara un gran impacto positivo en las redes sociales (Twitter, Facebook, Google+)
- Tiene 3 opciones para compartir: Twitter, Facebook, Google+
Añadir el contenido social bloqueado
Ahora instalaremos este pequeño script en nuestro blog de blogger, recuerda seguir cada paso para evitar problemas mas adelante.
Paso 1: Instalar el contenido social bloqueado
Primero vamos a Plantilla >> Edicion HTML
Luego buscamos:
<script type="text/javascript">
<!--
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2125042-35']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//-->
</script>
</head> y por encima pegamos el siguiente codigo:
HTML:
<link href='http://mybloggerlab.com/StyleSheet/locker.css' rel='stylesheet' type='text/css'/>
Guardas los cambios, y procedemos al siguiente paso.
Paso 2: Añadir el contenido social bloqueado
Ahora es cuando lo vamos a insertar en nuestro blog, lo recomendable es que lo insertemos en alguna entrada, pero lo puedes insertar en cualquier parte de tu blog.
Para añadir el script hay que ir a Blogger >> Tu blog >> Añadir entrada
Seleccionamos HTML en la pestaña de la entrada y pegamos el siguiente codigo HTML.
HTML:
<article id="default-usage">
<div class="to-lock" style="display: none;">
<!--Inicia el contenido oculta (Tambien puedes usar HTML)-->
<div style="text-align: center; margin-bottom: 20px;">
[B][COLOR="#FF0000"]<img src="Añade_Imagen_Aqui" alt="" style="margin: auto;" />[/COLOR]
</div>[/B]
<div style="text-align: justify">
[B][COLOR="#FF0000"]Añade el texto oculto aqui, recuerda que tambien puedes usar HTML[/COLOR][/B]
</div>
<!--Termina el contenido oculto-->
</article>
</div> <div id="mblunlocker" style="font-size:10px;"> </div>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/lock.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Comparte esto, para desbloquearlo",
message: "Este es el contenido social bloqueado, para verlo da clic en cualquier botón de abajo."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// Opciones de Twitter
twitter: {
url: "[COLOR="#FF0000"][B]TU-USUARIO-DE-TWITTER[/B][/COLOR]",
text: "[COLOR="#FF0000"]Texto que quieres que aparezca a la hora de twittear el contenido oculto[/COLOR]"
},
// Opciones de Facebook
facebook: {
url: "[COLOR="#FF0000"][B]TU-PAGINA-DE-FACEBOOK[/B][/COLOR]",
appId: "[B][COLOR="#FF0000"]575454754[/COLOR][/B]"
},
google: {
url: "[B][COLOR="#FF0000"]TU-PAGINA-DE-GOOGLE-PLUS[/COLOR][/B]"
}
});
});;;;
</script>
Configuracion
Para Twitter: Remplaza TU-USUARIO-DE-TWITTER que se encuentra en la linea 34 por tu usuario de twitter.
Para Facebook: Remplaza TU-PAGINA-DE-FACEBOOK que se encuentra en la linea 40 por tu pagina de facebook.
También debes remplazar “575454754″ por la ID de de tu aplicación de facebook.
Para Google plus: Remplaza TU-PAGINA-DE-GOOGLE-PLUS que se encuentra en la linea 45 por tu pagina de google plus.
Remplaza: Añade_Imagen_Aqui por la imagen que quieres ocultar.
Remplaza: Añade el texto oculto aqui por el texto que quieres coultar, recuerda que tambien puedes agregar elementos HTML, tales como gadgets o scripts.
Con todo esto echo ya solo basta con guardar y ver el resultado final.
Si les falla algo vallan a How To Create a Social Content Locker in Blogger BlogSpot