La fecha tipo calendario es una forma más de cambiar nuestra plantilla de una manera más personal.
La que he implementado en mi blog es sencilla sin fondo, aunque ponerle uno es también muy fácil.
1. En Configuración > Formato > Formato de hora cambiamos el formato de la siguiente forma:
3. Expandimos la plantilla y buscamos el siguiente código:
<div class="post hentry uncustomized-post-template">
y justo debajo añadimos:
<div class='date'>
<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
if (date_dd.substring(0,1) == "0") {
var date_dd=date_dd.substr(1,1);}
}
</script>
<div class='date_d'><script type='text/javascript'>document.write(date_dd);</script></div>
<div class='date_m'><script type='text/javascript'>document.write(date_mmm);</script></div>
<div class='date_y'><script type='text/javascript'>document.write(date_yyyy);</script></div>
</div>
4. Antes de ]]></b:skin> añadimos el css:
En url('la imagen de fondo') ponemos la dirección url de la imagen de fondo previamente alojada en nuestro alojamiento habitual.
.date { width: 60px;
height: 48px;
float: left;
background: url('la imagen de fondo') no-repeat;
}
.date_d {color: #919E7A;
font-family: Times New Roman;
letter-spacing: -2px;
display:block;
margin-top:0px;
text-align: center; font-size: 26px;
}
.date_m { display:block;
margin-top: -9px;
color: #CFCB96;
text-align:center;
font-size: 15px;
}
.date_y { display:block;
margin-top: -2px;
color: #FCAC4B;
text-align:center; font-size: 12px;
}
|
Fecha tipo calendario en blogger |
|
|
Resumen de entrada con imagen y "leer más" |
A diferencia del "leer más" habitual, en este caso se incorporará automáticamente a todas las entradas del blog con una imagen que será la primera que hayamos incorporado.
Así mismo al pulsar en "leer más" nos abrirá la entrada completa con los comentarios de la misma forma que ocurre al pulsar en el título de la entrada.
1. Expandimos la plantilla y localizamos <data:post.body/> , lo cambiamos por este código:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
2. Ahora colocamos el script. Antes de </head> pegamos:
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://vietwebguide2.googlepages.com/summary-post-v20-test.js' type='text/javascript'/>
summary_img es el número de caracteres a mostrar en el resumen de la entrada, si hay imagen.
img_thumb_height es el alto de la imagen.
img_thumb_width es el ancho de la imagen.
El script está alojado originalmente en Google Pages. Como se sabe Google Pages dejará de funcionar, así que lo más recomendable sería descargar el script y subirlo a nuestro alojamiento habitual.
3. Si queremos adaptarlo al aspecto de nuestro blog añadimos las etiquetas que lo controlan (antes de ]]></b:skin>).
.rmlink{ /* propiedades generales */
...
}
.rmlink a{ /* Propiedades del enlace a simple vista */
...
}
.rmlink a:hover{ /*Propiedades del enlace al pasar el ratón sobre él */
...
}
Visto en Google Adsense for Vietnames
|
|
Highlight.js en Blogger. Colores en el código |
De esta manera comprendemos más fácilmente los listados de código que instalaremos después en las plantillas ayudándonos en su modificación si fuera necesario.
Demo.
Los pasos son sencillos:
1. Bajamos el fichero zip que contiene los ficheros necesarios (default.css y highlight.pack.js). En la carpeta styles hay otros ficheros css que modifican el estilo, sería bueno hacer pruebas con cada uno de ellos para ver cuál es el que mejor se adapta a nuestro blog. Nos permite bajar también el lenguaje, en Blogger sería suficiente con css, xml y javascript en la mayoria de los casos.
2. Alojamos los ficheros default.css y highlight.pack.js en nuestro alojamiento habitual (últimamente hay problemas con skydrive).
3. Despues de </head> pegamos este código:
<link href='TU_URL/default.css' rel='stylesheet' type='text/css'/>
<script src='TU_URL/highlight.pack.js' type='text/javascript'/>
<script type='text/javascript'>hljs.initHighlightingOnLoad();</script>
Guardamos la plantilla.
4. En la entrada donde vamos a poner el listado del código pondremos:
<pre><code class="LENGUAJE">
AQUI EL CÓDIGO
</code></pre>
|
|
Poner pestañas/tabs en Blogger |
Las pestañas o Tabs son elementos muy útiles en nuestro blog.
Las pestañas nos pueden ayudar a mostrar mucha información en poco espacio, por ejemplo en la sidebar, mostrando y ocultando los datos sólo pulsando en ellas. La instalación en Blogger no es díficil.
Estos son los pasos a seguir:
1. Bajamos el fichero zip. En él se encuentran varios ficheros de ejemplos y el javascript (tabber.js) que deberemos alojar en nuestro sitio de alojamiento de ficheros habitual.
2. Antes de </head> añadimos el código del script.
<script type="text/javascript" src="tu_url/tabber.js">
</script>
3. Justo antes de ]]></b:skin> añadimos el css.
/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide { display:none;}
/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {}
.tabberlive { margin-top:1em;}
/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif;}
ul.tabbernav li { list-style: none; margin: 0; display: inline;}
ul.tabbernav li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none;}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover { color: #000; background: #AAE; border-color: #227;}
ul.tabbernav li.tabberactive a { background-color: #fff; border-bottom: 1px solid #fff;}
ul.tabbernav li.tabberactive a:hover { color: #000; background: white; border-bottom: 1px solid white;}
/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab { padding:5px; border:1px solid #aaa; border-top:0;
/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */
/* height:200px; */
/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */
/* overflow:auto; */
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 { display:none;}
.tabberlive .tabbertab h3 { display:none;}
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {}
.tabberlive#tab2 {}
.tabberlive#tab2 .tabbertab { height:200px; overflow:auto;}
.tabberlive .tabbertab li{list-style-type:none;background:transparent url(i/b.gif) no-repeat 0 2px;border:0;margin:0 0 1px;padding:0 0 0 15px;}
4. En "Elementos de la página" agregamos un nuevo elemento HTML. En él añadimos el siguiente código:
<div class="tabber">
<div class="tabbertab" title="Pestaña1">
Contenido de la pestaña 1.
</div>
<div class="tabbertab" title="Pestaña2">
Contenido de la pestaña 2.
</div>
</div>
El resultado será una primera pestaña con el texto "Contenido de la pestaña 1" y otra segunda con el texto "Contenido de la pestaña 2". En lugar de texto podemos incluir cualquier elemento (Perfil, últimos comentarios, últimas entradas, etc)
Podemos agregar tantas pestañas como necesitemos siempre que nos entren en el espacio que tengamos disponible, añadiendo este bloque las veces que sean necesarias:
<div class="tabbertab" title="PestañaX">
Contenido de la pestaña X.
</div>
Visto en BarelyFitz Designs
|
|
s3Slider, otro carrusel de fotos en Blogger |
S3Slider es otro carrusel (slide) para ver una serie de fotos con un texto.El texto se adapta a los lados, con una descripción de cada foto o elemento. Aquí ya vimos otro carrusel.
Demo.
Estos son los pasos a seguir:
1. Bajamos los ficheros jquery.js y y s3slider.js y los alojamos en nuestro alojamiento habitual.
2. Antes de </head> ponemos:
<script src="TU_URL/jquery.js" type="text/javascript"></script>
<script src="TU_URL/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#s3slider").s3Slider({
timeOut: 4000
});
});
</script>
4. Ponemos lo siguiente donde queramos poner el Carrusel:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="TU_URL_IMAGEN1" />
<span>TEXTO DE LA IMAGEN1</span>
</li>
<li class="s3sliderImage">
<img src="TU_URL_IMAGEN2" />
<span>TEXTO DE LA IMAGEN2</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
En TEXTO DE LA IMAGENX ponemos el texto que describe cada foto.
Añadimos los bloques :
<li class=”s3sliderImage”>
<img src=”TU_URL_IMAGEN” />
<span>TEXTO DE LA IMAGEN</span>
</li>
que necesitemos.
5. Añadimos el css antes de ]]> :
#s3slider {
width: 400px; /* mismo ancho que las imágenes */
height: 300px; /* misma altura que las imágenes */
position: relative; /* importante */
overflow: hidden; /* importante */
}#s3sliderContent {
width: 400px; /* mismo ancho que las imágenes */
position: absolute; /* importante */
top: 0; /* importante */
margin-left: 0; /* importante */
}
.s3sliderImage {
float: left; /* importante */
position: relative; /* importante */
display: none; /* importante */
}
.s3sliderImage span {
position: absolute; /* importante */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* opacidad caja del texto */
-moz-opacity: 0.7; /* opacidad caja del texto */
-khtml-opacity: 0.7; /* opacidad caja del texto */
opacity: 0.7; /* opacidad caja del texto */
color: #fff;
display: none; /* importante */
top: 0;
/*
si ponemos top: 0;
la caja de texto estará en la parte superior
si ponemos bottom: 0;
la caja de texto estará en la parte inferior
*/
}
.clear2 {
clear: both;
}
Fácil.
|
|
Poner foto comentaristas en blogger |
Con esto ponemos la foto de los comentaristas de nuestras entradas.
En otras plataformas es bastante común encontrar plantillas con la foto de los comentaristas de nuestro blog, esa foto es la que se encuentra en el perfil de los lectores. Blogger no contempla esa posiblidad.
Vamos a hacer algunos cambios que nos permitirá tenerlo en Blogger.
1. Descargamos el archivo comment_photos.js y lo alojamos en nuestro servidor habitual.
2. Antes de </head> añadimos este script:
En url_comment_photos.js ponemos la url donde hemos alojado el fichero . js anterior.
<script src='url_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage =
'url_imagen_sinfoto'
BloggerProfiles.imageWidth = 60;
BloggerProfiles.imageHeight = 75;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author',
1);});
//]]></script>
En url_imagen_sinfoto ponemos la url de la foto que hemos elegido para identificar los comentaristas que no tienen foto en su perfil de Blogger.
En BloggerProfiles.imageWidth = 60; ponemos la anchura de la foto.
En BloggerProfiles.imageHeight = 75; ponemos la altura de la foto.
3. Expandimos la plantilla y buscamos la parte siguiente e incorporamos las dos lineas resaltadas en amarillo:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='commentphoto' style='float:left;'/>
<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>
<div style='clear:both;'/>
</b:loop>
</dl>
Y añadimos este css antes de ]]></b:skin>.
.commentphoto img {
margin: 2px;
}
Visto en Purple Moggy.
|
|
Igualar columnas sidebar en blogger |
Se trata de igualar la altura de la sidebar cuando tenemos dos o más columnas.
Desde siempre había querido tener las dos sidebars de mi plantilla de la misma altura ya que como tienen distinto color de fondo parecía que una se quedaba coja respecto de la otra. Al final lo he conseguido usando jQuery.
1. Bajamos el fichero jquery-1.2.6.js y lo alojamos en nuestro servicio de alojamiento habitual.
2. Antes de </head> copiamos el script:
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".columnas"));
});
</script>
3. Antes de ]]></b:skin> copiamos el css que adapta el estilo de las columnas a nuestro blog, en mi caso es el siguiente:
/* Columnas
---------------------------- */
.columnas {
width:100%;
float:right;
margin: 0px;
padding: 0px;
}
.columnas .widget{
text-align: left;
margin: 3px;
padding: 3px;
}
.columnas h2 span {
color: $sidebarheader;
}
.columnas ul {
list-style:none;
margin-left: 0;
}
.columnas li {
margin:0;
padding-left: 5px;
text-indent:-40px;
line-height:1.5em;
}
.columnas p {
color:#666;
line-height:1.5em;
}
4. Sin expandir artilugios buscamos esto o algo parecido (depende de los widgets que tengamos en nuestras sidebar1 y sidebar2):
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'/>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Últimas entradas' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Últimos comentarios' type='HTML'/>
</b:section>
</div>
y cambiamos sidebar por columnas, quedando así:
<div class='sidebar-wrapper'>
<b:section class='columnas' id='sidebar1' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'/>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='columnas' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Últimas entradas' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Últimos comentarios' type='HTML'/>
</b:section>
</div>
Eso es todo. Este truco es muy útil cuando tenemos las sidebars entre dos widebars, como es mi caso en esta plantilla.
Visto en cssnewbie.
|
|
Expand/Collapse, Mostrar/Ocultar (2) |
Esta es otra forma de Ocultar/Mostrar, ya vimos otra forma en esta entrada.
Sólo se requiere poner en la entrada, widget, etc. el siguiente código:
<div class="pre-spoiler">
<span style="float: left; padding-top: 2px;"></span>
<input id="xs" value="Ver más" style="margin-left: 50px; padding: 0px;
width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button"> </div>
<div>
<div class="spoiler" style="display: none;">
COLOCAMOS AQUI LA PARTE A OCULTAR
</div>
</div>
</span>
Cambios en el código del botón:
margin-left: 50px; Distancia del botón al borde de la entrada desde la izquierda.
width: 80px; Ancho del botón. Si el texto es más largo hay que aumentar su tamaño aquí.
font-size: 14px; Tamaño de la letra del texto.
font-family: trebuchet ms; Tipo de letra del texto.
Añadir CSS
Para adaptar el botón al diseño de nuestro blog, añadiremos unas líneas en el código CSS de la plantilla antes de ]]>
#boton{
background: #fea502;
color: #000;
padding: 1px;
margin: 0px 0px 0px 3px;
border: 2px solid #6a8e20;
}
background: #fea502; Aquí cambiamos el color de fondo del botón.
color: #000; Aquí cambiamos el color del texto del botón.
border: 2px solid #6a8e20; Aquí cambiamos el grosor, tipo y color del borde del botón.
Fuentes: Trucos Key y El escaparate de Rosa.
|
|
Carrusel (Slide) de fotos en Blogger |
En los últimos tiempos se están poniendo de moda las plantillas tipo "magazine" para Blogger; en esas plantillas suele haber un carrusel o "slide" de fotos que gráficamente queda muy bien.
Demo
Me han preguntado como ponerlo en un blog. Vamos a ver como hacerlo.
Primero antes de ]]></b:skin> pegar:
#myslides{background:#2c3133;}
.stepcarousel{position: relative; /*no tocar*/
overflow: scroll; /*no tocar*/
width: 950px; /*Anchura total del carrusel*/
height: 165px; /*Altura total del carrusel */
margin: 0px 14px 5px 14px;
background:#2c3133;
}
.stepcarousel .belt{
position: absolute; /*no tocar*/
left: 0;top: 0;
}
.stepcarousel .panel{
float: left; /*no tocar*/
overflow: hidden; /*no tocar*/
margin: 10px 17px ; /*margen de cada foto*/
width:220px; /*Anchura de cada foto*/
background:#202325;
height:140px;
border:1px solid #393f42;
}
.stepcarousel .panel p{
text-align: left; /*no tocar*/
overflow: hidden; /*no tocar*/
margin: 5px 5px ; /*margen de cada foto*/
}
.stepcarousel .panel h2{
text-align: left; /*no tocar*/
height:20px;overflow: hidden; /*no tocar*/
margin: 2px 5px ; /*margen de cada foto*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*no tocar*/
background:#040404; /*fondo de la imagen*/
margin: 10px 10px 10px 10px; /*margen de cada foto*/
padding:0px 0px;
}
Segundo, antes de </head> pegar:
<script src='URL TU ALOJAMIENTO DE jquery.js' type='text/javascript'/>
<script src='URL TU ALOJAMIENTO DE slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--sfHover = function() {var sfEls = document.getElementById("menu").getElementsByTagName("LI");var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=" sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" sfhover\\b"), "");}}}if (window.attachEvent) window.attachEvent("onload", sfHover);//--><!]]></script>Los ficheros .js se pueden descargar aquí.
Tercero, poner lo siguiente donde queramos poner el Carrusel (normalmente estará bien antes de <div id='content-wrapper'>) :
<!-- Casing -->
<div id='casing'>
<!-- Myslides -->
<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({galleryid: 'mygallery', //id of carousel DIVbeltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVspanelclass: 'panel', //class of panel DIVs each holding contentpanelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 2, leftnav: ['http://web2feel.com/images/rem1.jpg', -14, 60], rightnav: ['http://web2feel.com/images/rem2.jpg', 0, 60]},statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panelscontenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']})</script><div class='stepcarousel' id='mygallery'><div class='belt'><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div></div></div></div></div>Cambiar YOUR-POST-LINK por la dirección url (enlace) que queramos que se dirija cuando se pinche en la foto.
Cambiar YOUR-POST-TITLE por el título que queramos que salga cuando se pase el ratón por encima.
Cambiar URL_IMAGEN por la dirección de vuestra foto.
Parece más dificil de lo que realmente es. :)
|
|
Seguidores en Blogger |
Blogger nos obsequia con un nuevo elemento, "Seguidores". Aparte de la utilidad que para unos será mucha y para otros poca, lo que parece que no gusta es la apariencia, en la mayoria de los casos no se adaptará al estilo de nuestro blog. Vamos a intentar ponerlo a nuestro gusto.
Con la plantilla expandida, buscamos este código:
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
Vamos a cambiar algunas cosas...
1. Eliminar el número de seguidores que aparece con el título.
Buscamos:
<h2 class='title'><data:title/>(<data:totalFollowerCount/>)</h2>
y eliminamos (<data:totalFollowerCount/>).
2. Añadir un icono junto al texto de X Seguidores.
Buscamos:
<div class='followers-canvas profile-link'>
<data:followersFooterMessage/>
justo antes de esa línea podemos añadir la imagen del icono.
<img src='url-imagen-icono'/><data:followersFooterMessage/>
3. Cambiar texto de SEGUIDORES.
Cambiamos <data:followersFooterMessage/> por el texto que nos guste más.
4. Cambiar texto de PARAR SIGUIENTE.
Si ya somos seguidores de un blog en lugar de mostrar el texto "Seguir este blog" nos muestra "Parar siguiente" que equivale a eliminarle de nuestra lista.
Buscamos:
<div class='follow-this profile-link item-control following-stop-following-this'>
En las siguientes líneas cambiamos <data:stopFollowingMessage/> por el texto que nos guste más.
5. Borde,color, fondo de avatar, etc.
Esta parte es donde más adaptamos el elemento a nuestro blog. Guardamos la plantilla y sin expandir la plantilla antes de ]]></b:skin> añadimos:
.follower-img {/*Borde y color de fondo en las imágenes*/
border:1px solid #000;background-color:#fff;padding:2px;margin:0;}
.follow-this {/*Seguir este blog y Parar siguiente*/
text-align:right;}
.follow-this a {color:#7E92A6;font-weight:normal;font-size:8px;}
.follow-this a:hover {font-weight:bold;color:#000;}
.followers-canvas{/*X seguidores*/
text-align:right;}
.followers-grid {/*Ajusta imágenes a la medida de nuestra sidebar:*/
width:170px;margin:0 auto;padding:0;}
Visto en Gem@ y Vagabundia
|
|
Emoticones en los comentarios |
Se trata de poner emoticones en los comentarios.
Lo primero que necesitamos es alojar el script en un servidor externo; este y las imágenes utilizadas se encuentran comprimidas en un archivo ZIP que puede descargarse desde aquí.
Segundo y antes de </head> incluimos lo siguiente:
<style type='text/css'>
.comment-body p img {vertical-align: top; padding-right: .3em;}
</style>
Por último al final de la plantilla, justo antes de </body> incluimos:
<b:if cond='data:blog.pageType == "item"'>
<script src='direccion_URL/VEmoticones.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>
Visto en Vagabundia
|
|
Fecha en todas las entradas en Blogger |
Desde hace mucho tiempo buscaba la posibilidad de poner la fecha en todas las entradas de un mismo día y no lo encontraba. Jmiur nos enseña como hacerlo.
Buscamos esto en la plantilla (expandida):
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Y lo sustituimos por:
<b:if cond='data:post.dateHeader'>
<script>
var ultimaFecha='<data:post.dateHeader/>';
</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>
|
|
Formulario de comentarios Blogger |
Blogger ha implementado por fin el formulario de comentarios al pie de las entradas, por el momento, a través de Blogger in Draft.
Para hacerlo funcionar primero vamos a "Configuración" de nuestro menú y después a "Comentarios".
En "Ubicación del formulario de comentarios", marcamos "Entrada incrustada a continuación":
Con todo esto el formulario se verá a continuación de todos los comentarios de la entrada en esta forma:
En algunas ocasiones habremos modificado alguna parte de la plantilla sobre todo la parte de comentarios y puede que el formulario no aparezca.
En esos casos hay que buscar esta linea en la plantilla:
<b:include data='post' name='comments' />
e inmediatamente después escribimos la siguiente:
<b:include data='post' name='comment-form'/>
Y grabamos la plantilla.
Visto en: Blogger Buster
|
|
Nube de etiquetas en movimiento |
Se trata de cambiar la clásica nube de etiquetas estática por una en movimiento que se mueve según vamos apuntando con el cursor. Ver demo.
1. Buscamos esta línea de código:
<b:section class='sidebar' id='sidebar' preferred='yes'>
2. A continuación de esa línea pegamos el siguiente código (la nube de etiquetas se mostrará al principio de la sidebar, después la moveremos donde queramos):
<b:widget id='Label50' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Para adaptarlos al estilo de nuestro blog, editamos alguna de las partes del código:
* Cambiar el ancho (240px) ,el alto (300px) y el color de fondo de la nube (#ffffff):
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
* Cambiar el color del texto (333333):
so.addVariable("tcolor", "0x333333");
* Cambiar el tamaño del texto (12):
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
Visto en: Blogger Buster
Idea original de: Roy Tanck
|
|
Añadir otra sidebar |
Si tenemos una plantilla con una sola sidebar quizás en algún momento deseemos tener otra sidebar más si vamos añadiendo muchos elementos de página nuevos. Parece más complicado de lo que realmente es pero hazlo primero en un blog de pruebas o haz una copia de la actual (esto es deseable siempre que metemos mano a la plantilla...)
Vamos a hacerlo en una plantilla "Mínima" así que, en principio, servirá para todas las "Mínimas", aunque con pequeños cambios en los márgenes y los paddings creo que no habrá problemas.
1. Buscamos #outer-wrapper {
Establecemos el ancho (width) que será la suma total de entradas + sidebar1 + sidebar2.
#outer-wrapper {
width: 900px;
2. Buscamos #sidebar-wrapper {
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Lo copiamos y, justo debajo pegamos el código que acabamos de copiar. Acabamos de duplicar la sidebar, ahora hemos de cambiarle el nombre y le ponemos, por ejemplo, sidebar2, además necesitamos que "flote" al otro lado, para que las entradas queden en el medio de las dos sidebar, para lograrlo le cambiamos el float, quedaría así:
#sidebar2-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
3. Buscamos <div id='content-wrapper'>
Justo debajo de esa línea añadimos el código necesario para que nuestra sidebar se muestre en el blog:
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Guardamos cambios.
De momento nuestra nueva sidebar está vacía, así que para verla en el blog, hemos de ir a el panel de diseño, y allí veremos que ya es posible añadir nuevos elementos a la sidebar, añadimos uno, guardamos cambios y vemos la nueva sidebar pero se apreciará también, que la distancia de las sidebar a las entradas no es la correcta...
Solucionaremos esto volviendo a la plantilla - html, y añadiendo en #main-wrapper {
un nuevo valor para el margen:
margin-left: 20px;
|
|
Calendario archivos Blogger |
Este calendario funcionará como un sistema de archivos mostrándolos como un calendario que, de forma interactiva, permitirá a nuestras visitas navegar entre las entradas de nuestro blog, que serán mostradas por la fecha de publicación.
1. Descargamos el archivo ZIP que contiene los .css y .js necesarios.
2. Alojamos los ficheros contenidos en un alojador de ficheros (por ej. Googlepages).
3. Después de <head> colocamos este código:
<style type='text/css'>@import url("TU_URL/calendar.css");</style>
<script src='TU_URL/calendar.js' type='text/javascript'/>
<script src='TU_URL/calendar-es.js' type='text/javascript'/>
<script src='TU_URL/calendar-setup.js' type='text/javascript'/>
4. Activamos el elemento de página "Archivos".
5. Abrimos otro elemento de página HTML donde insertamos el siguiente código:
<div id="calendar-container"></div>
<script type="text/javascript">
function dateChanged(calendar){
if (calendar.dateClicked){
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth()+1;
var d = calendar.date.getDate();
if (m<=9&&d<=9){window.location = "/" + y + "_0" + m + "_0" + d + "_TUBLOG_archive.html";}
else if(m>9&&d<=9){window.location = "/" + y + "_" + m + "_0" + d + "_TUBLOG_archive.html";}
else if(m<=9&&d>9){window.location = "/" + y + "_0" + m + "_" + d + "_TUBLOG_archive.html";}
else window.location = "/" + y + "_" + m + "_" + d + "_TUBLOG_archive.html";
}
};
Calendar.setup(
{
flat : "calendar-container",
flatCallback : dateChanged
}
);
</script>
|
|
Scrollbars |
Una forma sencilla de poner un scrollbar en cualquier parte del blog es insertar esta pieza de código en el CSS de la plantilla, en la que especificaremos el alto (height) y el ancho (width) de la caja de scroll:
.scrollbox {
height:100px;
width:300px;
overflow:auto;
}
Y donde queremos poner el scroll (entrada, lista, vinculos, widgets, etc.) colocamos esto:
<div class="scrollbox">
TEXTO, IMAGEN, LISTA, VINCULOS, WIDGET ...
QUE VAMOS A INCLUIR EN LA CAJA DE SCROLL
</div>
|
|
Tutoriales/Hacks/Trucos Blogger |
Completísima lista de tutoriales realizada por Amanda en Blogger Buster, aunque en inglés... Está organizada por categorías.
↓↑ Noticias Blogger
↓↑ Dominios
- Easily Redirect Readers to your Blogger Custom Domain
- A Better Way to Set Up your Custom Domain?
- How to Set Up your Free GoDaddy Hosting Account
- Create a Redirect Page for your Blog
- How to Set Up your Blogger Custom Domain with GoDaddy
- How to Set Up your Blogger Custom Domain (All Domain Providers)
- Should You Have a Custom Domain for your Blog?
↓↑ Modificaciones generales
- Add a "Top of Page" Icon Link
- Background Styles for the Minima Blogger Template
- How to Add Rounded Corners using CSS
- Styling Sections of your Blog with Borders and Backgrounds
- Add Style to Search Forms
- Styling the Header and Footer Sections
- Adjusting Margins and Padding in your Blogger Template
- Create a Three Column Blogger Template
- Creating a Three Column (or Wide Two Column) Canvas
- Essential Tools for Blogger Template Design
- A Cheats' Guide to Customizing Blogger Templates (Online Version)
- Why Your Blog Design Needs to be Unique
- Remove "no-follow" tags from your template
- How to Install a Blogger Layout Template using Provided HTML Code
- How to use Background Images
- Create "Wordpress-Style" Blog Pages
- How to Set Up a Test Blog (and why you may want to use one)
- Fix your Layout Editor Wireframe (Firefox Layout Problems)
- Adjust Padding in Blogger Templates
- Adjust Margins in Blogger Templates
- How to Hide the Blogger Nav-Bar
- Add Background Music to your Blog
- Create Classic Blogger Templates with Ease
- Rounded Corners for Header and Sidebars
- How to Upload Blogger XML (Layouts) Templates
- Add a New Widget Section Above your Posts
↓↑ Cabecera/Navegación
- Add Icons Beside Navigation Links
- The Easy Way to Make a Great Blog Header
- What Makes a Great Blog Header?
- Create Navigation Buttons for your Blogger Blog
- Get a Free Animated Header for your Blog
- How to Create a Custom Header
↓↑ Entradas
- 15 Stylish Ways to Make your Posts Stand Out
- How to Create Post Summaries in Blogger
- How to Add MyBlogLog Comment Avatars
- Customize Block-Quotes in your Posts
- Create a "Post-Options" Box Beneath Your Posts
- Create a Calendar Widget to Date your Posts
- Inline Comments Hack (For Classic Blogger Templates)
- Inline Comments Hack for Blogger Layouts (New Blogger)
- How to Generate Links to Related Posts
- Manually Install Haloscan Comments and Trackbacks
- Add "Blog This" Links to Each of Your Posts
- Add Digg, Del.icio.us and Stumbleupon Social Bookmark Links to your
Posts - How to Change the Comment Link Text in your Blogger Template
- Add Social Bookmark Buttons to your Posts
- How to Install Haloscan Trackbacks in Blogger Templates
- How to use Selective Post Summaries
↓↑ Sidebars
↓↑ Footer
↓↑ Feeds y Sindicación
- The Stylish Way to Show Off your Feed Count
- An Easy Way to Display your Feedburner Subscriber Count
- What is Atom/RSS?
- Mobilize your Blog with Widsets
- All About your Blog Feeds
- Enable Per-Post Comments Feeds
- Five Ways Feedburner can Help Improve your Readership
- Create an Email Subscription Box with Feedburner
- Use your Blog Feed to Generate More Traffic
- How to Create an Animated Blog Headlines Box
- What is a Blog "Feed" and Why Do I Need It?
↓↑ Tutoriales en general
- Top 12 Keyboard Shortcuts for Bloggers
- Learn About Web 2.0 in Five Minutes
- Protect your Email Address from Spam Bots
- How Much is Your Blog Worth?
- What is a Blog Meme?
- How Addicted to Blogging Are You?
↓↑ Imágenes, Iconos y Badges
- Fixing PNG Transparency in IE6
- Add a "Top of Page" Icon Link
- Favicons Made Easy!
- Add Stylized Captions to Images in your Blog Posts
- A "New Year" Banner for your Blog
- A Christmas Banner for your Blog
- Problems Uploading Your Images to Blogger? Here's a Solution
- Create Screenshots with This Free Tool
- How to use Background Images
- Free Blog Icon Set Download
- Find Free Icons for your Blog with Iconlet
- Photoblogging with Flickr
- Free Animated Email Icons
- Use CSS Styling to Alter Images in your Blog
- Create a Favicon for your Blog
- Create an Animated Advertising Banner
- Looking for Copyright Free Images for your Blog?
↓↑ Etiquetas y categorías
- A Drop-Down Menu for your Labels
- Show Labels without the Post Count
- Control the Number of Posts Displayed on Label Pages
- How to Include Technorati Tags at the Bottom of Each Post
↓↑ Ganar dinero con el blog
- Feature AdSense in Blogger Post Pages Only
- AdSense Beneath Blogger Post Titles (or at end of posts)
- AdSense in Blogger Posts (the basics!)
↓↑ Recursos para Bloggers
- Blogger Tips at BloggingTips
- Backup, Restore or Import Posts using Blogger
- 101 Excellent Blogger XML Templates (for free download)
- Why Traffic, Your Subscriber Count and Money Doesn't Matter
- Check your Backlinks with This Free Tool
- Creating a Contact Form with WebFormDesigner
- Free Web 2.0 Design Tools
- 5 Best Free File Hosting for your Images and Scripts
- A New (Improved) Blog Headlines Ticker
- Blog Directories: A Quick Guide to Listing your Blog
- Top 25 Blog Directories
- Using Stumbleupon for Blog Traffic
- Useful Links when Using Blogger
↓↑ SEO y Tráfico
- Blogger Generates a Sitemap for your Blog
- Optimize your Blogger Template for Search Engines
- Optimizing a Blog for Search Engines (Case Study)
- Free SEO Stats Display Box
- Free PageRank Display Button
- Create a Custom Google Search Engine
- What are Trackbacks? How do I Use Them?
↓↑ Widgets y Añadidos
- Popular Posts (Most Commented) Widget for Blogger
- Add a Technorati Link Count Widget to your Blogger Posts
- Top Commenters Widget for Blogger
- Create a Customized MyBlogLog Recent Readers Widget
- A Tabbed Navigation Widget for your Blog (Customizable)
- Using a "Tab-View" Widget to Streamline Content
- Two New Search Widgets for your Blogger Blogs
- A New Style of AddThis Widget for Social Bookmarking your Posts
- Making your Links More Attractive with SnapShots
- How to Copy Widgets from One Template to Another
- Create Your Own Recent Comments Widget
- Translate your Blog Using the Google Translator Widget
- A "Time of Day" Image Greeting Widget
- A Digital Clock Widget for your Blogger Blog
- Add a Realtime Clock and Date Widget
- Installing the AffiliateBrand Popular Posts Widget
- Add a Simple Search Widget
- Create a Table of Contents for your Blogger Blog (Widget-Based)
- What are Widgets and How do I Use Them?
Periódicamente Amanda actualizará esta lista.
|
|
Templates/Plantillas Blogger |
Yomisma de Meta microcosmos nos ha dejado esta lista de enlaces donde podemos encontrar plantillas gratuitas para nuestro blog; el listado es bastante extenso e incluye todo tipo de páginas: desde las que ofrecen unas pocas pero muy originales hasta directorios donde vereis miles de ellas, pasando por entradas de otros blogs con más listados.
- B-themes
- Doxs
- Better in Pink!
- Plantillas Webblog
- Blog and Web
- Create blog
- Blogger Buster
- Ehsany
- Blogger Templates
- Blogger Themes
- Blogger Templates Deceblog
- Six Shooter Media
- Gecko and Fly
- Pyzam
- Blogger Templates by Caz
- Free Templates
- Custom Templates
- Plantillas y templates blogger caseras
- Find Templates
- Mashable
- Charm Skins
- BlogU
- CreateBlog
- BloggerTemplates
- dzelque
- El blog de Lui
- Eris
- Zona Cerebral
- Final Sense
- Suck my lolly
- Beautiful beta
- Free Skins
- Blogcrowds
- Fresh Blogger
- Template Panic
- Hackjob
- El buscador
- JackBook
- Kaushal Sheth
- Blogger template directory
- Layout Gala
- Lemonade Designs
- Blospot Templates
- Noipo
- Blog skins
- Open Source Web Design
- Web JCP
- Pannasmontata
- Café Junio
- Ricardouk
- Blog made in Spain
- Search Engine Friendly Layouts
- Burajiru
- Thurst
- Hoctro´s
- Zoot's Designs
|
|
Imágenes de los comentaristas |
Se trata de identificar con imágenes nuestros propios comentarios de los realizados por los visitantes. Necesitaremos tres imágenes, uno para nuestros comentarios, otro para los comentarios anónimos y otro para el resto.
Localizamos esta parte del código:
<b:if cond='data:comment.authorUrl'>
...
</b:if>
y la cambiamos por:
<b:if cond='data:comment.authorUrl'>
<!-- autor reconocido -->
<b:if cond='data:comment.author == "mi_alias"'>
<!-- mis propios comentarios -->
<img class='comenta-avatar' src='URL_imagenYO'/>
<b:else/>
<!-- comentarios de los visitantes -->
<img class='comenta-avatar' src='URL_imagenOTROS'/>
</b:if>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<!-- comentarios anónimos -->
<img class='comenta-avatar' src='URL_imagenANONIMO'/>
<data:comment.author/>
</b:if>
Donde mi_alias será nuestro nombre (las mayúsculas y minúsculas son importantes) y URL_imagen serán las direcciones donde hayamos alojado cada una de las imágenes.
Hay ciertos ajustes que pueden hacerse y dependerán mucho de las propiedades CSS de cada blog. Para eso, las imágenes tienen una clase especial llamada img.comenta-avatar y bastaría agregarla a nuestra hoja de estilo para establecer márgenes o cualquier otro detalle:
img.comenta-avatar { }
Otras clases que controlan las propiedades gráficas de esa sección de la plantilla son:
.comment-author {}
.comment-author a {}
.comment-timestamp {}
.comment-footer {}
Visto en Vagabundia
Visitas
WidgetsGadgets