Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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: 

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 + &quot;_backlinks-container&quot;'>
       <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 + &quot;_backlinks-container&quot;'>
       <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>
  • Paso 10: Guardamos los cambios realizado en la plantilla

Espero que lo hallan entendido y no tengan problemas

- - 2 Comentarios
Tag

Comentarios (2)

  1. Amigo me confundo en el paso 5 tu dices que pegue dentro de ]]> pero no sera arriba porque dentro donde porque hay si que o entendi jeje

    ResponderEliminar
  2. @Carlos Pavon Gracias por tu apunte sera corregido de inmediato

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar