Tutoriales sobre Blogger

En este tutorial veremos como mostrar o ocultar la caja de comentarios. Esto mas o menos consiste de la siguiente manera. Una ves que el usuario halla visto la entrada y si quiere comentar tendrá que dar click a un
botón para mostrar la caja de comentarios, el navegador almacenara los cookie, de forma que cuando el usuario vuelva a visitar la entrada la caja de comentarios se encontrara abierta. Esto se debe a los cookie JQuery graba y almacena el comportamiento de los visitantes. Este método es como un Blogger Capcha para reducir el spam en los comentarios

Antes de comenzar veremos una demostración:

Demostración

Comencemos:

Paso 1: Vamos a Blogger>> Plantilla>> Editar HTML.
Paso 2: Buscamos la siguiente linea (Ctrol + F).

►<b:skin></b:skin>

Paso 3: Desplegamos el código que ahí dentro ►<b:skin></b:skin>
Paso 4: Dentro de ►<b:skin></b:skin> Buscamos la siguiente linea

]]></b:skin>

Paso 5: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS

*/----------Ocultar caja de comentarios Tutoriales-Blogger.info-----------------/*
.tombol {width:100%;display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0;outline: none;cursor: pointer;text-align: center;text-decoration: none;padding: .3em 2em .35em;text-shadow: 0 1px 1px rgba(0,0,0,.3);font-weight:bold;font: 13px/20px 'Open Sans',Arial,Helvetica,Verdana,sans-serif;}
.tombol:hover {text-decoration: none;}
.tombol:active {position: relative;top: 1px;}
.black {color: #d7d7d7;border: solid 1px #282828;box-shadow:0 0 2px #000 inset;-webkit-box-shadow: 0 0 2px #000 inset;-moz-box-shadow: 0 0 2px #000 inset;background: #282828;background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#000));background: -moz-linear-gradient(top, #282828, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#000000');}
.black:hover {background: #000;background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));background: -moz-linear-gradient(top, #444, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}
.black:active {color: #666;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));background: -moz-linear-gradient(top, #000, #444);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}
*/----------Ocultar caja de comentarios Tutoriales-Blogger.info-----------------/*

Paso 6: Todabia dentro de la plantilla buscamos la siguiente linea (Ctrol + F)

</head>

Paso 7: Arriba de </head> pegamos el siguiente código JQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
jQuery('#bukakeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({
display: 'none'
});
jQuery('#tutupkeun').show();
jQuery.cookie('komen', 1);
return false
});
jQuery('#tutupkeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({
display: 'none'
});
jQuery('#bukakeun').show();
jQuery.cookie('komen', null);
return false
});
if (jQuery.cookie('komen') == 1) {
jQuery('#comments').show();
jQuery('#bukakeun').hide()
} else {
jQuery('#comments').hide();
jQuery('#tutupkeun').hide()
}
});
//]]></script>

Paso 8: Ahora buscamos la siguiente linea (Ctrol + F)

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>

Paso 9: Justo por abajo pegamos el siguiente código

<button class='tombol black' id='bukakeun'>Click para mostrar Caja de Comentarios</button>
<button class='tombol black' id='tutupkeun'>Clck para ocultar Caja de Comentarios</button>

Quedaría de la siguiente manera

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<button class='tombol black' id='bukakeun'>Click para mostrar Caja de Comentarios</button><button class='tombol black' id='tutupkeun'>Clck para ocultar Caja de Comentarios</button></b:includable>