Widebar con pestañas

Estos días he aprendido como poner en el área de la sidebar, otra extra pero con pestañas, que resulta muy cómoda cuando tenemos demasiados elementos como links o etiquetas, que son de los widgets que ocupan más espacio!.

En general esta modificación es muy fácil de añadir, además, como puedes ver en mi sidebar, queda super bien y es muy personalizable, pero lo dejamos eso para luego.

(1) Agregamos esta línea de código con un script antes de la etiqueta </head>:

<script type="text/javascript" src="http://geocities.com/castrobirdelo/tabber.js"></script>

- El archivo tabber.js está alojado en Geocities, si deseas puedes optar subiendolo a tu propio alojamiento...

(2) Guardamos los cambios y ahora vamos a darle estilo a la widebar, agregamos CSS, como siempre antes de ]]></b:skin>:

/*--------Widetabt------------------*/
#tabsidebar-wrapper{width: 200px;float: right;border: 1px none #CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding: 0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

En el código debemos hacer una modificación en el width: 200px; para adaptarla al área de nuestra sidebar

(3) Nuevamente guardamos los cambios, para expandir nuestra plantilla de artilugios. Buscando <div id='sidebar-wrapper'>, le agregamos justo antes este trozo de código:

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div><!-- Fim da tabsidebar-wrapper-->

Guardamos los cambios y si todo ha salido bien debe verse esto en tu plantilla de diseño:


En la sidebar lo veremos de esta forma:


Para agregar un elemento, deberemos antes clickear en el número correspondiente y arrastrar el elemento que vas a colocar en el mísmo.

Esta operación la repetimos hasta completar los tres espacios disponibles:


Será la hora de ver el resultado. Se recomienda que los títulos no sean muy extensos, ya que se repartirán dependiendo el espacio que le hayas dado al with, por lo que verás algunos imperfectos, que luego puedes corregir.


Esto lo he aprendido en Gem@ BLOG, otros datos en Usuario Compulsivo. Suerte!.

Sitemap para el blog

Laga me había preguntado en un comentario, ''¿Como haces el efecto deslizante para poner los links?. En realidad esto es el simple Sitemap, muy usado en varios blog, algo sumamente elegante y fácil de instalar, basta con unos sencillos pasos:

(1) Debemos poner la librería JQuery en nuestro blog, para ello utilizamos este fichero que nos brinda Pizcos (Fichero), copiamos su URL y los introducimos a nuestro blog, siempre antes de la etiqueta </head>:

<script src="URL ALOJAMIENTO/jquery.min.js" type="text/javascript"/>

(1.2) Seguido de este código pegamos este otro trozo:

<script type='text/javascript'>
$(document).ready(function()
{
$(&quot;.smbody&quot;).hide();
$(&quot;.smhead&quot;).click(function()
{
$(this).next(&quot;.smbody&quot;).slideToggle(600);
});
});
</script>

(2) Añadimos unas lineas de CSS para la apariencia, básicamente para ponerle los íconos:

.smhead {
background: url(URL ICONO CATEGORIAS) no-repeat left;
cursor: pointer;
color:#000;
padding:2px 0 2px 20px;
font-family: 'Comic Sans MS';
}
.smbody p{
background: url(URL ICONO SUBCATEGORIAS) no-repeat left ;
margin: 0 0 0 45px;
color:#000;
padding:2px 0 2px 20px;
font-family: 'Comic Sans MS';
}

(3) Iríamos a la plantilla y agregamos un nuevo elemento HTML:

<div class="smhead">Categoría</div><div class="smbody"><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p></div>

En mi caso he puesto esa cantidad. Para repetir una categoría simplemente se repite el código completo, se puede poner un número indeterminado de enlaces o sub-categorías... Cualquier duda ya saben, no soy experto pero nos defendemos!.

Aquí puedes encontrar una colección de íconos 16x16 que puedes utilizar y son de libre distribución (Iconos Gratis).

Buscador para el blog

Hace un tiempo, cuando comencé con mi blog, siempre me pregunté el porqué de que algunos blogs tenían esa barra que les permitía buscar y yo no la tenía. Pues en RecurS.O.S para tu blog e encontrado un excelente código HTML que podemos agregar normalmente al blog, aunque yo voy más allá y algo que aprendi en Pizcos Blog para darle un toque más personal y adaptada a nuestro blog.

(1) Para ponerlo el código es muy simple, en un elemento HTML:

<div id='busqueda'><form action='/search' id='busquedaform' method='get'>
<input class='txtField' id='s' name='q' type='text' value=''/>
<input class='btnSearch' id='busquedasubmit' type='submit' value=''/>
</form></div>

(2) Buscamos los ID's que facilita el código anterior para añadir un poco de CSS:

<div id='busqueda'><form action='/search' id='busquedaform' method='get'>
<input class='txtField' id='s' name='q' type='text' value=''/>
<input class='btnSearch' id='busquedasubmit' type='submit' value=''/>
</form></div>

(3) Para facilitarnos el trabajo, Pizcos, nos ayuda e inserta los ID's y confecciona el CSS que agregaremos antes la etiqueta ]]></b:skin>:

#busqueda {
width:233px;
height:60px;
background:url(URL ALOJAMIENTO IMAGEN DE FONDO) no-repeat;
}
#busqueda form {
padding:0;
margin:0;
}
#busqueda .txtField {
margin:20px 0 0 45px;
padding: 0 0 0 8px;
width:120px;
color:#000;
background:transparent;
font-size:11px;
border-style:none;
cursor:text;
}
#busqueda .btnSearch {
width:40px;
height:60px;
border-style:none;
float:right;
background:transparent;
cursor:pointer;
margin: 0;
}

Todo el código está ya listo para ser usado, solo hace falta cambiar la URL de fondo para comenzar a ver el efecto, si quieres ver uno online, visita Pizcos Blog.

Cambios de imágenes en fondo del blog

Un excelente script con el que podemos poner el efecto Random en nuestro blog y jugar un poco con el fondo del mísmo. Lo único que tenemos que hacer para utilizarlo es poner este trozo de código HTML antes la etiqueta </head>:

<script type='text/javascript'>
var banner= new Array()
banner[0]="URL-de-la-imagen"
banner[1]="URL-de-la-imagen"
banner[2]="URL-de-la-imagen"
banner[3]="URL-de-la-imagen"
banner[4]="URL-de-la-imagen"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background: #000 url("' + banner[random] + '") no-repeat center top; background-attachment:fixed;');
document.write(" }");
document.write("</style>");
</script>

Digo que es normalísimo que los fondos también aparescan en el panel de diseño en Blogger. Donde dice URL-de-la-imagen, la cambias por la correspondiente. Puedes añadir más imágenes modificandolo con el var random y contando al [0] como primero.

Acceso a panel (Nueva forma)

Luego de quitar la fastidiosa Navbar de Blogger, a veces parece que la extrañamos porque nos hace mucha pereza tener que escribir por el navegador para volver al panel de Blogger.

Aquí quiero encajonar un truquillo sumamente fácil que nos comparte Rosa, sobre como acceder con un simple elemento que localizamos donde querramos en el blog, pero que solo puede ser visto mientras estamos loguedos, puesto que tampoco los demás podrán verlo!.

(1) Debemos verificar cual es nuestro número de ID del blog:

(2) Luego que ya lo tenemos lo único que debemos hacer es colocar este código en un nuevo elemento HTML y como dije ponerlo donde querramos que aparesca, en mi caso lo he puesto al final del blog:

<span class='item-control blog-admin'>
<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SNmUcZtuboI/AAAAAAAAESU/9KpauxXah_o/s320-R/adminin.jpg" /><a href="http://blogger.com/home">Acceder</a>
|
<a href="http://www.blogger.com/post-create.g?blogID=Idnumber">Nueva Entrada</a>
|
<a href="http://draft.blogger.com/blog-options-basic.g?blogID=Idnumber">Configuración</a>
|
<a href="http://www.blogger.com/rearrange?blogID=Idnumber">Diseño</a>
|
<a href="http://www.blogger.com/html?blogID=Idnumber">Edición HTML</a>
|
<a href="http://www.blogger.com/logout.g">Salir</a>
</span>

Solo debes cambiar el Idnumber por el de tu blog y lísto.... Suerte!.

Fuente e imágenes: El escaparate de Rosa

Scroll en los elementos de página

Este es un excelente método y tan fácil de instalar, si yo he podido no digo?. Se trata de esconder un poco esos elementos que ocupan mucho espacio en la sidebar, el problema mayor está cuando en algún momento hemos tenido un montón de enlaces que ponen el blog medio pesado y eso!. Acá la solución ;).

Lo primero es irnos a Edición/HTML y buscamos el código correspondiente a los elementos de la sidebar, se depositan en este línea: <div id='sidebar-wrapper'>.

El efecto puede usarse en cualquier elemento, lo único que nos interesa es buscar el ID que brinda Blogger, el ejemplo acontinuación es con los enlaces o links. Debemos buscar el siguiente trozo:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/>.

En este caso el ID es BlogList1, pero insisto, puede usarse en cualquier otro elemento...

Ahora que ya tenemos el ID de nuestro gadget, lo único que queda es aplicar un poquillo de CSS, tan simple como ponerlo antes de ]]></b:skin>:

#BlogList1 ul{
height:200px;
overflow:auto;
}

Este sería el resultado, muy chulo ;)... Suerte!.

Botón añadir a favoritos!

Este es otro script de los miles que hay, muy sencillo, solo se trata de poner un botoncillo en cualquier parte del blog que permita a tus lectores agregar tu espacio a favoritos, y así tener acceso más rápido a tu blog. Esto es excelente para blogs que tienen direcciones muy largas o difíciles de recordar.

- Plantilla, Edición/HTML y antes de la etiqueta </head> pegamos el siguiente código:

<script type='text/javascript'>

function bookmarksite(title,url){
if (window.sidebar)
window.sidebar.addPanel(title, url, &quot;&quot;);
else if(window.opera &amp;&amp; window.print){
var elem = document.createElement(&#39;a&#39;);
elem.setAttribute(&#39;href&#39;,url);
elem.setAttribute(&#39;title&#39;,title);
elem.setAttribute(&#39;rel&#39;,&#39;sidebar&#39;);
elem.click();
}
else if(document.all)// ie
window.external.AddFavorite(url, title);
}
</script>

-Ahora solo nos queda añadir el elemento HTML donde queramos que aparesca nuestro botón:

<a href="javascript:bookmarksite('TITULO DE TU BLOG', 'URL DE TU BLOG')"><img src="URL IMAGEN BOTON"/></a>

-Sustituye los valores resaltados por los tuyos. En la parte de la URL IMAGEN BOTON, puedes poner solo texto. Suerte!.

Poner otra página dentro de tu blog

Esto resulta muy útil si tenemos más de un blog y queremos mostrarlos ambos en una mísma página, este es el código para ponerlo:

<iframe src="URL_PAGINA" width="100%" height="300"></iframe>

-Cambia la URL_PAGINA por la tuya correspondiente.

-Modifica el ancho en Width y alto en Height, en cuanto a Width, recomiendo que lo dejes en 100%, así se ajustará automáticamente al ancho del lugar donde lo coloques.

Comentarios a pie de página (Incrustado)

Este es uno de mis trucos favoritos para la presentación de comentarios. Lo he visto hace mucho en La bloguería. Se trata de presentar los comentarios incrustado al pie de la entrada, mediante el uso normal de la ventana Pop Pup o Página individual, pero agregando algunos scripts y cambiando varios códigos en la plantilla que aunque paresca difícil, es uno de los más fáciles que he visto!.

Primeramente, como el trabajo es un poco largo y podemos cometer varios errores (Yo los tuve), es recomendable que nos descarguemos una copia previa de nuestra plantilla, si algo sale mal, de inmediato lo recuperamos todo y sin perder absolutamente nada!.

(1) Diseño/Edición HTML y expandimos los artilugios, para facilitar el proceso de búsqueda de códigos siempre me gusta utilizar el buscador (Ctrl+F). Buscamos este trozo de códigos:

<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><div id='backlinks-container'><div expr:id='data:widget.instanceId + "_backlinks-container"'><b:if cond='data:post.showBacklinks'><b:include data='post' name='backlinks'/>
</b:if></div></div></div>
</b:includable>

Como es un poco largo, fíjate bien donde comienza y termina, sustituye completamente por este otro:

<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>
-->
<div class='onepx'>
<dl id='comments-block' style='height: 1px;overflow:hidden;'>
<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>
</div>
<!--
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
-->
<div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'>
<h3 id='hoverme' style='display:block;'>
<img alt='Deja aqui tu comentario' src='URL IMAGEN QUE OCULTA EL FORMULARIO' title='Deja aqui tu comentario'/>
</h3>

<!-- este iframe de abajo es el formulario de comentarios. Puedes modificar el alto y el ancho y añadir imagen de fondo, entre otras modificaciones -->

<div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS); border: 2px solid red;'>
<iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/>
<br/>
</div>
<!-- fin del iframe -->
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Añade una imagen para ocultar el formulario, al pasar el mouse sobre la que elijas, saldrá automáticamente el editor. La parte del código background-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS);, la puedes cambiar por background: #f5f5f5;, por cualquier otro color que quieras. También puedes modificar el alto y ancho en height:750px; width: 440px;.

Ahora buscamos la etiqueta </body>, añadimos este código justo antes:

<script languange='javascript'>function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}</script>

Ahora nueva vez vamos a localizar un código y sustituirlo por 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>

Lo cambiamos por 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.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>

Hasta aquí es todo. Con estos sencillos pasos hemos dado un buena limpieza a ese feo formulario que Blogger nos proporciona.

Vista: La Bloguería

Ultimos comentarios personalizado y simple

Este es otro script muy fácil que voy a tener en mis pruebas para ver los últimos comentarios que se dejan en el blog. Algo a destacar es que últimamente Blogger tiene un fallo con esto y es que cuando el blog pasa de los 5,000 comentarios, pues, el script deja de funcionar. Será hasta que los que mandan quieran!.

La instalación está fácil como irnos a Diseño/Panel y añadir un nuevo elemento HTML y pegamos en el este trozo de código:

<script style="text/javascript" src="http://lejaniaimposible.googlepages.com/comentarios.recientes.js"></script>
<script style="text/javascript">

var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 50;
var standardstyling = true;
</script>
<script src="URL_DEL_BLOG/feeds/comments/default?alt=json-in-script&
callback=showrecentcomments"></script>

Solo debes cambiar la URL_DEL_BLOG por tu dirección correspondiente y ya lo tienes, vaya que fácil no?.

Algunas explicaciones:

var numcomments = 10; Número de comentarios a mostrar.

var showcommentdate = true; Si vamos a mostrar la fecha. En True se muestra y en False no se muestra, eso queda a opción de cada cual.

var showposttitle = true; Aquí elegimos si queremos mostrar el nombre de la entrada, al igual que en la fecha True mostrar o False no mostrar.

var numchars = 50; El número de carácteres que mostraremos para cada comentario, es decir, el resumen.

var standardstyling = true; Acá es para elegir el estilo del texto. También pruebas entre True o False, aunque con True se ve mucho mejor!.

Hasta acá todo, mucha suerte!.

Actualización 25/01/2009: Ya funciona el script al pasar los 5,000 comentarios!.

Quitar la fastidiosa Navbar de Blogger

Esta es una de las cosas más útiles si queremos darle un poco de lucimiento a nuestro blog con una plantilla propia o una que previamente hemos cargado. Ocultar esa barra, que aunque muchas veces es útil, como que le quita un poco de peso e imagen al blog!.

Nos vamos a la edición HTML de nuestra plantilla y buscamos la etiqueta <body>, antes de esta es donde debemos agregar el código para ocultar dicho elemento:

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

Mucha suerte!.

Recoger y expandir (Forma sencilla)

Este es otro de los truquillos que he aprendido en Vagabundia y quiero tambien guardarlos en este almacen para si alguien anda buscando y por descuído Google los trae hasta acá también pueda usarlo. Es sumamente fácil de poner y funciona de inmediato, además lo que más me gusta es que a diferencia de otros incómodos script, no es necesario esperar que cargue completamente la página para ver el efecto!.

Primeramente lo que debemos hacer, como es un script, ponerlo en la plantilla del blog, siempre antes de la etiqueta </head> pegamos este código:

<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>

Para que funcione utilizamos un enlace de cualquier agrado, ya sea desde una imagen hasta un link simple:

<a onclick="return verocultar(this);"
href="javascript:void(0);">ENLACE</a><div style="display: none;">
....... el contenido a ocultar .......
</div>

Esto funciona en cualquier parte del blog, tanto en las entradas como en la sidebar, pero ojo, recuerda que si haces un cambio en tu plantilla debes siempre verificar que el script que pusimos antes de </head> esté allí, de lo contrario nunca funcionará!.

He aquí unos ejemplos, uno lo he puesto con un enlace de texto y el otro con una imagen, queda a elección de ustedes!:

Ver/Ocultar [+/-]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.

Click Ver/Ocultar

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.

Cabe decir que dentro del script se puede poner cualquier cosa, ya sea una imagen, código o texto simple como el ejemplo que doy. Suerte!.

Surtido de plantillas para Blogger

Acontinuación una lista de páginas webs donde puedes encontrar excelentes plantillas para Blogger, de muy buena calidad y totalmente gratis:

- B Templates

- Final Sense

- Blogger Templates

- Templates Blogger

- Randomnes F1

- Blog and Web

- Yanku-Template

- Templates Cove

- Falconhive

- Gisele Jaquenod

- Our BLOGGER Templates

- Layout for all

- eBlog Templates

- Blogger Buster

Comentarios en Ventana modal

Otra forma muy estética y fácil de instalar en el blog es en forma de una ventana modal, muy parecida a la de LightWindow, pero más sencilla y parecida a la original de Blogger, pero que puedes hacerles unos toquecitos de color y bordes...

Este modelo lo encontré en mis visitas al blog de Pizcos y me pareció muy buena... En especial para los que no tienen mucho conocimiento, pues, como dije antes, es sumamente fácil de instalar y modificar, solo requiere sustituir unos códigos y agregar un HTML.

(1) Edición/HTML, expandimos los artilugios y buscamos este trozo de código:

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

Lo sustituímos completamente 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:onclick='"javascript:showcom(\"" + data:post.addCommentUrl + "&amp;isPopup=true\");"' href='javascript:void(0);'><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>

Ahora hacemos click a la vista previa. Si todo ha salido bien el blog debería verse sin menores contratiempos (Recuerda siempre hacer tu copia de seguridad antes de cualquier cambio).

(2) Vamos a Diseño/Agregar elemento HTML y agregamos este script, está alojado en un servidor, recomiendo que lo subas al tuyo para evitar cualquier cambio que lo afecte:

<script src="http://technojuice10.googlepages.com/compop.js" type="text/javascript"></script>

- Hasta aquí es todo. Ya tenemos los comentarios en una ventanita muy cuca, ahora podemos modificar tamaño, borde, color... Suerte!.

Comentarios con LightWindow

Este es un truco que me encontre hace mucho tiempo en La Blogueria, inventado por Lacrax. Se trata de mostrar los comentarios de una forma más llamativa y elegante con una ventanita emergente muy cuca y fácil de instalar.

LightWindow es una ventana modal con la que podemos presentar cualquier archivo multimedia: imágenes, videos, flash, etc. Para conocer potenciales usos y saber cómo hacer diferentes configuraciones, visita la entrada de Vagabundia sobre LightWindow; además de explicarlo clara y detalladamente, ha tenido la amabilidad de presentarnos los archivos con las imágenes que incluyen ya alojadas en Imageshack y listos para su uso.

Antes de poner manos a la obra, les adelanto que para que funcione la instalación (al menos a mi me salió así), primero debes cambiar el formulario de comentarios a la pantalla completa, ya que uno de los códigos que hay que cambiar no aparecen con la entrada incrustada o la ventana emergente. Luego lo puedes cambiar al que desees.

Pasos a seguir para instalar LightWindow en los comentarios del blog:

1- Gracias a los datos que nos brinda JMiur y La Blogueria, sobre ponerlo en imágenes y videos, sacamos estos ficheros . Solo debes descargarlos y subirlos a tu alojamiento, e incluirlos en estas lineas, como siempre, antes de </head>:

<script type="text/javascript" src="URL_prototype.js"></script>
<script type="text/javascript" src="URL_scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="URL_lightwindow.js"></script>
<link rel="stylesheet" href="URL_lightwindow.css" type="text/css" media="screen" />

La carpeta que nos descargamos incluye las imágenes. Debemos obviarlas y solo subir los ficheros pedidos en las lineas anteriores...

2- Expandimos nuestra plantilla de artilugios y localizamos estos códigos (Recomiendo buscarlos con Ctrl + f):

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

Sustituye las lineas resaltadas por estas:

<a class='lightwindow' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' params='lightwindow_width=500, lightwindow_height=500,lightwindow_loading_animation=false'>

Con estos sencillos pasos, hemos conseguido darle un toque rotundamente diferente a nuestro formulario de comentarios...

Opcional:

• Si deseas cambiar el ancho y alto de la ventana, solo debes modificar los valores del último código que implementamos:

<a class='lightwindow' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' params='lightwindow_width=500, lightwindow_height=500,lightwindow_loading_animation=false'>

• Andaba buscando pornerle un imagen de fondo, al que puse en el blog. Así que solo modifique el:

#lightwindow_contents {
overflow: hidden;
z-index: 0;
position: relative;
border: 10px solid #ffffff;
background: #ddd; ► Color de fondo. Puede ser imagen.
}

Para agregar la imagen de fondo, sustituye background: #ddd; por background: url() right 100% no-repeat;.

Nota: Al tener el otro formulario implementado en los comentarios, si estás en la página individual verás el otro; para ver el efecto LightWindow, debes ir a Inicio, y busca el link de comentarios en cualquiera de las entradas.

Agredesco a:

La Blogueria; por brindarme toda su ayuda y dedicar su tiempo en explicarnos detalladamente en su entrada...

Formulario de comentarios (Forma sencilla)

Luego de tanto andar probando y buscando por todos los lados, sobre como configurar el formulario incrustado que no funciona en las plantillas que se han previamente modificado, acá aparece un script, gracias a Rosa, que lo he visto y al fin me ha funcionado.

Sencillamente solo hay que hacer dos movimientos:

(1) Localizamos esta trozo de código, con los artilugios expandidos:

<b:include data='post' name='comments' />

(2) Justo después agregamos esta otra línea de código:

<b:include data='post' name='comment-form'/>

(3) Guardamos nuestros cambios y observamos los resultados!. Suerte.

Presentación

Básicamente este blog no pretendo darlo mucho a conocer, pero sí lo recomiendo a los amigos que deseen buscar alguna información sobre ayuda blogger. Cabe decir que estos trucos, enlaces, plantillas, modificaciones y general son encontrados en otros espacios de ayuda, pero los edito y les agrego, si se puede, algunas cosillas que crea también son importantes.

Si alguien cree que algo de lo publicado es muy suyo y piensa que he violado alguna licencia de su espacio, puede decirlo con tranquilidad y enseguida será retirado sin menores contratiempos. Si necesitas ayudita aún soy medio novato, pero puedo ayudarte a la medida de lo posible, siempre con todo el entusiasmo del mundo ya que todos iniciamos desde cero igual!.

Un saludo y suerte con tu blog, que tengas mucho éxito y puedas compartir por mucho tiempo en este maravilloso mundo blogosférico!.