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 separar de una entrada, la caja de comentario en tabla.
Una ves que entremos en una entrada la caja de comentarios estará separa en tabla ya lo eh visto  y me pareció estupendo poder agregarlo en nuestro blog




*Puede que no funcione en algunas plantillas editas, por lo que recomiendo hacer una copia de seguridad

Antes de comenzar veremos una demostración: 
Demo

Comencemos:

  • Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
<div class='post hentry' ........
O también este otro.
<article class='post hentry' ........
  • Paso 3: Agrega a continuación de 'post hentry' ........ la siguiente linea id='postingan' , el resultado seria el siguiente: 
<div class='post hentry' id='postingan' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  • Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol + F) 
]]></b:skin>
  • Paso 5: Justo por encima de ]]></b:skin> pegamos el código CSS.
.tab-komen{float:left;text-align:center;width: 100%;margin-bottom:20px;padding:0;font-size:16px;text-transform:uppercase;clear:both;}
.posting {width:50%;padding:9px 0;line-height:20px;float:left;border: none;background: #878787; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);transition: background-color .4s ease-out 0s;}
.komen{width:50%;padding:9px 0;line-height:20px;float:right;border: none;background: #9f9f9f; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);transition: background-color .4s ease-out 0s;}
.posting:hover { background: #666; text-shadow: 0 0 1px #222;}
.komen:hover { background: #666; text-shadow: 0 0 1px #222;}
#comments {display:none}
  •  Paso 6: Agregaremos el código HTML: Busca la siguiente linea (Ctrol + F)
<b:includable id='main' var='top'>

  • Paso 5: Justo debajo de <b:if cond='data:blog.pageType == &quot;item&quot;'> pegamos el código HTML
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tab-komen'>
<a class='posting' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;postingan&apos;).style.display=&apos;block&apos;'>Entrada</a>
<a class='komen' href='javascript:void(0)' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;postingan&apos;).style.display=&apos;none&apos;'>Comentar</a>
</div>
</b:if>

Solo queda guardar los cambios realizados y a disfrutar. 


- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
: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