Adblock Detectado

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

He desactivado Adblock

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 

- - 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