Tutoriales Sobre Blogger: Separar comentarios y entradas en tablas (Opción 1)

En la entrada anterior vimos como separar la caja de comentarios y dicha entrada en tablas. Viendo bien, para los que no funcione el tutorial "Separar comentarios y entradas en tabla" aquí tendremos otra opción para implementar en nuestro blog.




Como dije anteriormente se recomienda hacer una copia de seguridad por si las cosas salen mal
Antes de comenzar veremos una demostracion:

Demo

Comencemos:

• Paso 1: Vamos a Blogger>> Plantilla>> Edición HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

<div class='post-outer'>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
   </div>

• Paso 3: Cambios el código anterior por el siguiente. 

<div class='post-outer'>
    <div class='testsaja'>
  <input checked='checked' id='s1' name='s' type='radio'/>
  <input id='s2' name='s' type='radio'/>
  <div class='tabs'>
  <label for='s1'>Post</label>
  <label for='s2'>Komentar</label>
  </div>
 <ul class='sections'>
   <li><b:include data='post' name='post'/></li>
    <li><b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <b:include data='post' name='comment_picker'/>
       </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
          </b:if></li>
</ul></div></div>

• Paso 4: Todabia en la plantilla buscamos la siguiente linea (Ctrol + F) 

]]></b:skin> 

• Paso 5: Por encima de ]]></b:skin> pegamos la siguiente linea CSS. 

input[type="radio"] {
    left: -9999px;
    position: absolute;
    top: -9999px;
}
.comments .comments-content .comment-thread li, .comments .comments-content .comment-thread ol {
display:block !important
}
.tabs {
    font-size: 0;
    height: 27px;
    position: relative;
    white-space: nowrap;
    z-index: 999;
}
.tabs label {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DDDDDD;
    color: #666666;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 20px;
    text-transform: uppercase;
    vertical-align: bottom;
}
.tabs label:first-child {
    margin-left: 0;
}
.tabs label:hover {
    background-color: #DDDDDD;
}
input:nth-child(1):checked ~ .tabs label:nth-child(1), input:nth-child(2):checked ~ .tabs label:nth-child(2), input:nth-child(3):checked ~ .tabs label:nth-child(3), input:nth-child(4):checked ~ .tabs label:nth-child(4) {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: none;
    color: #000000;
    padding: 6px 20px;
}
.sections {
}
.sections li {
    display: none;
    height: auto;
}
input:nth-child(1):checked ~ .sections li:nth-child(1), input:nth-child(2):checked ~ .sections li:nth-child(2), input:nth-child(3):checked ~ .sections li:nth-child(3), input:nth-child(4):checked ~ .sections li:nth-child(4) {
    display: block;
}

• Paso 6: Por ultimo buscamos la siguiente linea (Ctrol + F)

</head>

• Paso 7: Justo por encima de </head> pegamos el siguiente linea.  

<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<b:if cond="data:blog.pageType != &quot;item&quot;">
<style type="text/css">
.tabs  {display:none !important}
.sections li {display:block !important;}
</style>
</b:if>
</b:if>

• Guardamos los cambios realizados y a disfrutar