Añadir otros enlaces en el gadget de páginas estáticas

Ya hemos visto que desde hace algún tiempo podemos añadir páginas estáticas fácilmente a nuestro blog.
El problema es que una vez añadidas, los enlaces en forma de menú se muestran en el blog, pero solo los enlaces que hemos creado a las páginas estáticas.

Varias personas me han preguntado como añadir en ese mismo menú enlaces a otras páginas que no sean estáticas, por ejemplo una página de etiquetas, a una entrada concreta o incluso a una página externa.

Vamos a ver como hacerlo, pero antes de empezar hemos de tener añadidas las páginas estáticas.

[1] Una vez en nuestro escritorio de Blogger, vamos a Diseño - Edición HTML.

[2] Marcamos la casilla de "Expandir las plantillas de artilugios".

[3] Como ya tenemos añadidas las páginas estáticas, localizamos en la plantilla el gadget que las muestra y que será algo como esto:
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<liclass='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
[4] Una vez localizado, añadiremos los enlaces que necesitamos justo después de </b:loop> tal como vemos en este ejemplo:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>

JUSTO AQUI AÑADIMOS LOS ENLACES
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
[5] Los nuevos enlaces los colocamos de esta manera, uno debajo de otro:
<li><a href="DIRECCION_DEL_ENLACE">TEXTO_DEL_ENLACE</a></li>
[6] Usamos "Vista previa" y tendremos que ver algo como esto, los nuevos enlaces a continuación de las páginas estáticas en el orden en que los hayamos ido colocando:

Ejemplo de enlaces en páginas estáticas

[7] Si todo está correcto, guardamos los cambios.

--> Leer Más...

3 geniales iconos de suscripción

Ulises Arvizu de Maquiladora de sueños nos sorprende con nuevo paquete de iconos exclusivos para Blogger.

Esta vez, son 3 geniales iconos para suscripción por Feed RSS, Twitter y Facebook en forma de cubos de rubik. Disponibles en tres tamaños distintos 32×39, 64×77 y 100×120 pixeles en calidad PNG-24.

Adicionalmente se incluye el archivo vectorial (fuente) para que puedas crear tu propios cubos rubik con otros servicios sociales o lo que se te ocurra.

Licencia
Se liberan bajo licencia Creative Commons Atribución 2.5.
Puedes usarlos tanto en proyectos personales como comerciales.


--> Leer Más...

Insertar Reloj en tu Pagina Web con JavaScript

Todos los códigos de los ejemplos pueden ser personalizados.

Para agregar el reloj en nuestro blogger ingresamos a Diseño, Añadir Gadget, seleccionamos HTML/Javascript y copiamos el código que se muestra a continuación, tiene dos formas simple y personalizado

Código Reloj Simple:
<span id="VkuReloj"></span>
<script type="text/javascript">
//<![CDATA[
function showclock(){
var digital = new Date();
var hours=digital.getHours();
var minutes=digital.getMinutes();
var seconds=digital.getSeconds();
var dn='Am';
if (hours>12) {
dn='Pm';
hours=hours-12;
}
if (hours==0) hours=12;
if (minutes<=9) minutes='0'+minutes;
if (seconds<=9) seconds='0'+seconds;

miReloj='<b><span style="">'
+ hours + '</span> : <span style="">'
+ minutes + '</span> : <span style="">'
+ seconds + '</span></b><span style="margin-left:3px;">'
+ dn + '</span>';
document.getElementById('VkuReloj').innerHTML=miReloj;
// lo actualizaremos cada segundo
setTimeout('showclock()',1000);
}
window.onload=showclock
//]]>
</script>
Código Reloj Personalizado:
<span id="VkuReloj"></span>
<script type="text/javascript">
//<![CDATA[
function showclock(){
var digital = new Date();
var hours=digital.getHours();
var minutes=digital.getMinutes();
var seconds=digital.getSeconds();
var dn='Am';
if (hours>12) {
dn='Pm';
hours=hours-12;
}
if (hours==0) hours=12;
if (minutes<=9) minutes='0'+minutes;
if (seconds<=9) seconds='0'+seconds;

miReloj='<b><span style="color:red;font-size:22px;">'
+ hours + '</span> : <span style="color:red;font-size:22px;">'
+ minutes + '</span> : <span style="color:blue;font-size:18px;">'
+ seconds + '</span></b><span style="color:#000000;margin-left:5px;">'
+ dn + '</span>';
document.getElementById('VkuReloj').innerHTML=miReloj;
// lo actualizaremos cada segundo
setTimeout('showclock()',1000);
}
window.onload=showclock
//]]>
</script>
--> Leer Más...

Texto que cambia de color letra a letra

Antes que nada Cambiar lo de color rojo e ingresar los datos que ustedes desean mostrar.

Para que funcione en blogger hay que subirlo a un servidor como archivo JS.

var message="¿Cómo se Hace...?"// el texto principal
var neonbasecolor="#CBF3A2"// Color original del texto
var neontextcolor="#399"// El color del efecto
var flashspeed=200 //Velocidad del texto en milisegundos
1000 milisegundos = 1 segundo
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

Y luego pegar este código en un gadget HTML:

<center><b><script charset="iso-8859-1" src="http://URL del servidor/titulo.js" type="text/javascript">
</script></b></center>

Fuente: LoSeasi
--> Leer Más...

Diferencias entre border, margin y padding

Los atributos de CSS margin, border y padding, aunque en algunas ocasiones puedan comportarse de manera parecida en la práctica, son muy distintos.

Margin es el margen que hay desde un elemento hasta los que tenga al lado.

Border dibuja un borde alrededor justo de ese contenido.

Padding es el espacio que hay en un contenedor entre el contenido y los bordes del contenedor.

Es decir, al especificar un margin estamos definiendo un espacio entre el una capa y las capas texto, imágenes u otros contenidos que haya a los lados.

Al especificar un padding en una capa, por ejemplo, estamos definiendo el espacio que hay entre el borde de la capa y lo que tenga dentro.

Y el border estaria justo entre margin y padding.

En la imagen de abajo puedes ver mejor a qué zona corresponde cada una de estas propiedades.
--> Leer Más...

Como mostrar códigos dentro de los posts

Cuando queremos mostrar un código en un posts o entrada, blogger lo interpreta como tal.

Si no queremos que se ejecute dicho código lo tenemos que convertir o codificar.

Lo podemos hacer manualmente o con ayuda de una página que se encarga de eso.

Los ejemplos mas comunes son:
  • < = &lt;
  • > = &gt;
  • & = &amp;
  • " = &quot;
Por ejemplo si queremos mostrar el código de una imagen seria así:
<img scr="URL"/>
Tendríamos que poner en nuestro posts de la siguiente manera:
&lt;img scr=&quot;URL&quot;/&gt;
Mostrar un link:
<a href="http://URL=">Link</a>
Y lo pondríamos así:
&lt;a href=&quot;http://URL=&quot;&gt;Link&lt;/a&gt;
Aqui les dejo en enlace de una página que se encarga de codificar y también de decodificar.

La pueden encontrar en loseasi con otras utilidades, la pueden utilizarla tantas veces sea necesario.

Acá les pongo el link de la página, es la primera utilidad.


Fuente: LoSeasi
--> Leer Más...

Mostrar ultimas entradas del blog con desplazamiento horizontal

Ir a Diseño, Edición de HTML y justo arriba de ]]></b:skin>

Poner el siguiente código:
.feedmarquee a{
font-size: 11px; /* tamaño del texto */
text-decoration: none;
color:#000; /* Cambiar color del texto */
}
.feedmarquee {
font-size: 12px;
color:#FEE405;
position:absolute;
background: transparent; /* Cambiar color del fondo */
padding:10px;
width: 600px; /* Cambiar ancho */
}
Ir a Diseño, Elementos de la página y añadir un gadget HTML/Javascript.

Poner el siguiente código:
<script src="http://img42.xooimage.com/files/7/b/5/recentpostsscrollervku-1b6927d.js" type="text/javascript"> </script>
<div class="feedmarquee">
<script type="text/javascript"> var nMaxPosts = 15; var sBulletChar="-" ; var nWidth; var nScrollDelay = 155; var sDirection="left"; var sOpenLinkLocation="p"; </script> <script src="http://www.creatublog.grupoblogperu.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollervku" type="text/javascript"> </script></div>
Modificar:
15 por el total de entradas a mostrar.
y http://www.creatublog.grupoblogperu.com por la URL de su blog.

Mover el gadget a la posición que se quiera mostrar.


Fuente: LoSeasi
--> Leer Más...

Cambia aleatoriamente el color de fondo y texto de su Pagina Web

Aqui les presento 2 formas para que puedan cambiar el color de fondo de su pagina web.

Opción 1:
Este truco lo vi en Ayuda para el Blog y si el autor me lo permite deseo compartirlo con ustedes. Este truco consiste en que cada vez que tus lectores entren a tu blog el color del fondo cambie. Sólo tienes que ir a Diseño > Edición de HTML y eliminar este código después de body {
background:$bgcolor;
Si no dice $bgcolor; puede decir algo como #FFFFFF dependerá de cada plantilla.
Ahora pega este código después de la etiqueta body>
<script type='text/javascript'>
var bgcolorlist=new Array("#eccfba", "#d1f6ee", "#baece1", "#d2d4f3", "#efd1f6", "#41485e", "#f6d1d4", "#fffff")
document.bgColor=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]</script>
Los colores los puedes modificar a tu gusto, sólo cámbialos por los que más te gusten. Presiona F5 para recargar la página y ver cómo cambia el color de fondo.

Opción 2:
Cómo hacer que una página cambie de color cada vez que se visita, colocando un color aleatorio y con el texto que contraste para que se pueda leer bien.

Ir a Diseño, Edición de HTML y justo arriba de </head> poner el siguiente código:
<script src='http://img47.xooimage.com/files/1/2/1/clor-1b26973.js' type='text/javascript'/>
Guardar y ver.

Si no funciona buscar:

body {
background:#xxxxxx;
color:#xxxxxx;
etc...
}

y borrar las lineas de background:#xxxxxx; y color:#xxxxxx; (donde xxxxxx varia segun plantilla).

--> Leer Más...

Insertar Fecha en nuestra Web : 3 opciones

Todos los códigos de los ejemplos pueden ser personalizados.

Cambiando el color o tamaño del texto, etc... por la etiqueta font o dentro de un div.

Código 1:
<script languaje="JavaScript">
//<![CDATA[
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
document.write("<b>
<font color='blue' face='Arial' size='3'>"+dayarray[day]+" "+daym+" de "+montharray[month]+" del "+year+"</font></b>")
//]]>
</script>
Código 2:
<script languaje="JavaScript">
//<![CDATA[
var mydate=new Date();
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay();
var month=mydate.getMonth()+1;
if (month<10)
month="0"+month;
var daym=mydate.getDate();
if (daym<10)
daym="0"+daym;
document.write("<b>
<font color='000000' face='Arial' size='3'>"+daym+"/"+month+"/"+year+"</font></b>")
//]]>
</script>
Código 3:
<script languaje="JavaScript">
//<![CDATA[
var mydate=new Date();
var year=mydate.getYear()-100;
if (year<10)
year="0"+year;
var day=mydate.getDay();
var month=mydate.getMonth()+1;
if (month<10)
month="0"+month;
var daym=mydate.getDate();
if (daym<10)
daym="0"+daym;
document.write("<b>
<font color='000000' face='Arial' size='3'>"+daym+"/"+month+"/"+year+"</font></b>")
//]]>
</script>
--> Leer Más...

Cambiar el diseño de la nube de etiquetas

Hace tiempo ya que es sabido que podemos usar una opción del gadget "Etiquetas" de Blogger, para mostrar nuestras etiquetas en forma de nube.

Se da la casualidad que ayer recibí dos emails sobre el mismo tema: como cambiar el diseño de la nube una vez añadida en el blog, así que veremos en esta entrada como hacerlo.

Una vez añadido el gadget en la sidebar, tendremos una nube de etiquetas con un diseño por defecto que se adapta, más o menos, al del resto de la sidebar.
El gadget mostrará los títulos de las etiquetas con cinco tamaños diferentes, dependiendo del número de veces que la etiqueta es utilizada, es decir, a más entradas con una etiqueta concreta, mayor será el tamaño de esta respecto a las demás.

Para modificar el tamaño, color del texto, separación, etc. de las etiquetas, tendríamos que añadir algunas líneas de CSS en la plantilla, como siempre lo haremos antes de ]]></b:skin>
.cloud-label-widget-content {
text-align:center;
font-weight: bold;
}
.cloud-label-widget-content span {
padding: 0 0 0 5px;
}
.label-size-1 a {color: #8b8989; font-size: 10px;}
.label-size-2 a {color: #000000; font-size: 12px;}
.label-size-3 a {color: #4682b4; font-size: 14px;}
.label-size-4 a {color: #dccdc; font-size: 15px;}
.label-size-5 a {color: #6495ed; font-size: 18px;}
Modificaciones

.cloud-label-widget-content {

Controla el diseño del contenedor de la nube, en mi ejemplo las etiquetas se verían centradas y en negrita.

.cloud-label-widget-content span {

Controla la distancia entre las etiquetas, en mi ejemplo 5 pixeles de separación.

.label-size

Ahí controlamos el color de texto y tamaño de cada una de las etiquetas, según las cinco opciones que el gadget proporciona.

Nota:
Aunque en mi caso he utilizó estos cambios incluidos en el CSS tal como indico en la entrada, podría darse el caso de que hubiese que sobrescribir las propiedades para que los cambios se muestren.

En ese caso lo que hacemos, es incluir el CSS a añadir entre <style type='text/css'> y </style> y lo colocamos justo después de la etiqueta <body> de la plantilla.

--> Leer Más...

Leer más automático menos en el primer post

Después de haber visto cómo poner el leer más automático con imágenes en miniatura en el blog muchos son los que me han pedido que el resumen no afecte al primer post de modo que la primera entrada se muestre completa y el resto de ellas se muestren resumidas tal como está en este blog de pruebas.

Lo primero que haremos será aplicar el leer más automático en todas las entradas, así que primero vamos a Diseño | Edición de HTML marcamos la casilla Expandir plantillas de artilugios y buscamos esta etiqueta:
<data:post.body/>
Y la sustituimos por esto:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Ahora antes de </head> pegamos este script:
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>
Con esto ya tenemos el leer más en todas las entradas, ahora haremos que no aplique en la primera entrada, para lograrlo buscamos esta línea:
<b:include data='post' name='post'/>
Y la cambiamos por esto:
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='post hentry'>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-body entry-content'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span>&#160;</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
</b:if>
</span>

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>
</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Y listo, con eso ya tenemos el leer automático con miniaturas menos en la primera entrada de la página principal.

Para ver más detalles sobre cómo adornar el enlace de Leer más así como cambiar el tamaño de la imagen miniatura visita esta entrada.

Fuente: ciudadblogger
--> Leer Más...

Cambiar de lugar datos del post-footer

Las plantillas por lo general tienen los datos del post-footer justo ahí, en el post-footer, es decir, debajo de las entradas. Estos datos son las etiquetas, el autor, la hora, el número de comentarios, etc.

Muchos me preguntan cómo poner esos datos debajo del título de la entrada, así que vamos a ver cómo mover de lugar estos datos. Lo único que haremos es cortar y pegar; nada del otro mundo, un proceso que no nos deberá quitar mucho tiempo, sólo debemos tener cuidado de cortar el código correcto sin omitir o "comernos" algún caracter, de lo contrario aparecerán errores que no dejarán guardar la plantilla.

Primero entra en Diseño | Edición de HTML marca la casilla Expandir plantillas de artilugios y busca esta línea:
<div class='post-header-line-1'>
Ahora sí, vamos a cortar estos códigos y pegarlos debajo de la línea que acabamos de mencionar.

Para mover el Autor
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Para mover la Hora
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
Para mover las Etiquetas
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
Para mover el Link de comentarios
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
</b:if>
</span>
Para mover el icono de Envío de entradas
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='//www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
En algunos casos es posible que estos datos queden muy pegados al cuerpo de la entrada, si es así entonces agrega debajo del último código que pegues esto:
<br />
O esto
<hr />
El primero es un salto de línea, el segundo es una línea que dividirá estos datos de la entrada.
También puedes poner un caracter especial que divida los datos entre cada uno tal como se ve en mi blog, para hacerlo sólo agrega después de cada código cualquier caracter que te guste, por ejemplo este |

O bien, puedes poner un icono delante de cada código, sólo agrega esto al inicio de cada código que agregues:
<img src='URL del icono' border='0' />
Si en lugar de mover los datos quisieras recuperar alguno que no tengas o que hayas eliminado anteriormente sólo agrega el código que le corresponde y listo.

También puedes darle un poco de estilo a estos datos como un color de fondo, un borde, etc.
Sólo pega antes de ]]></b:skin> esto:
.post-header-line-1 {
background:#F5F6CE;
border:1px solid #eee;
font-style:italic;
}
O si no ves ningún cambio entonces agrega esto:
.post-header {
background:#F5F6CE;
border:1px solid #eee;
font-style:italic;
}
Ahí puedes agregar todos los estilos que desees, la forma como lo personalices quedará a tu creatividad.

Fuente: ciudadblogger
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika