Tutoriales Sobre Blogger: Separar comentarios y entradas en tabla

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.