Manéjate con Blogger

No soy un experto en blogs, ni en html, ni en php, ni en nada por el estilo, pero me voy a permitir el lujo de explicar por medio de este post algunas funciones para blogger bastante útiles. Por ejemplo, muchos os preguntaréis como he hecho para que pinchando en la flecha azul de la parte inferior del blog, volvamos totalmente arriba. Es muy sencillo, para ello solo tenemos que poner cualquier imagen (podéis coger esta misma que tengo yo) y asociarle un enlace a la siguiente dirección:

http://laurldetublog.com/#

También puede que os preguntéis como he puesto el icono de 99coma9 a la izquierda de la web en la barra de navegación y en favoritos. Para ponerlo (recordad que tiene que ser de 16x16 píxeles), os vais a la personalización del blog, pincháis en diseño, y a continuación en edición html. Expandis artilugios y buscáis en la plantilla, pulsando control+f, el código <b:skin><![CDATA[/* y justo antes ponéis lo siguiente:

<link href='Laurldelicono' rel='shortcut icon'/>

Bien, ahora explicaré una de las cosas que más importantes me parecen en blogger, poner los comentarios debajo de cada entrada. El proceso es algo mas largo y complicado, pero no es nada imposible, y recordad siempre guardar la plantilla antes de modificarla. Bien, nos vamos a personalización del blog, diseño, edición html. Expandimos artilugios, y buscamos ]]></b:skin>. Justo antes colocamos el siguiente código:

#comenta-outter { margin: 50px 0; } #comenta-inner { display: block; height: 650px; width: 500px; margin:0; border:none; background-color: #ddd; }

A continuación bajamos en la plantilla y buscamos este código:

<b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h4> <dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'> <data:comment.author/> </a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'> <data:comment.body/> </span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> <p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/> </a> </p> </b:if>

Lo eliminamos y lo sustituimos por este:

<b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <center> <div id='comenta-outter'> <div id='comenta-inner'> <iframe align='middle' expr:src='data:post.addCommentUrl' frameborder='0' marginheight='0' marginwidth='0' scrolling='auto' style='width:100%;height:100%;'/> </div> </div> </center> </b:if>

A continuación buscamos este otro:

<span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 1'> 1 <data:top.commentLabel/> <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a> </b:if> </b:if> </span>

Y lo sustituimos por este:

<span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.url + "#comments"' > <b:if cond='data:post.numComments == 1'> 1 <data:top.commentLabel/> <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a> </b:if> </b:if> </span>

Guardas la plantilla y listo. Ahora si queremos personalizar el formulario, nos vamos al primer código que metimos en la plantilla y lo editamos a nuestro gusto:

Height: Es el alto que tendrá el formulario.

Width: Es el ancho del formulario Recomiendo ponerle el mismo ancho que tengan nuestras entradas, para evitar que se vea cortado.

Border:none; Borde del formulario.

Background-color: #ddd; El color de fondo del formulario. Podemos incluso añadir una imagen de fondo al formulario, cambiando background-color: #ddd; por: background: url(Dirección_url_de_la_imagen);

Por último explicaré como quitar la barra blogger, cosa que yo no he hecho, porque me parece mucho mas cómodo tenerla para crear entradas o personalizar el blog de una manera rápida. Para eliminarla, buscad en edición html: </head> y justo antes colocad el siguiente código:

<style type="text/css"> #navbar-iframe { height:0px; visibility:hidden; display:none; } </style>

Espero que os haya servido y ya sabéis, si tenéis alguna duda, no dudéis en enviadme un correo a pabliko360@gmail.com.