Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada
Descargar imagen.

Primeramente descargar imagen y alojarla a su servidor.

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

Poner el siguiente código:

.piepost-vku a { background:url(piepost-vku.png) no-repeat; width:21px; height:21px; display:block;float:left;filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*--IE 8 Transparency--*/ }
.piepost-vku a:hover {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE 8 Transparency--*/ }

.piepost-vku1 { background-position: bottom left!important }
.piepost-vku2 { background-position: -26px bottom!important }
.piepost-vku3 { background-position: -52px bottom!important }
.piepost-vku4 { background-position: -78px bottom!important }
.piepost-vku5 { background-position: -104px bottom!important }
.piepost-vku6 { background-position: -130px bottom!important }
.piepost-vku7 { background-position: -156px bottom!important }
.piepost-vku8 { background-position: -182px bottom!important }
.piepost-vku9 { background-position: -208px bottom!important }
.piepost-vku10 { background-position: -234px bottom!important }
.piepost-vku11 { background-position: -260px bottom!important }
.piepost-vku12 { background-position: -286px bottom!important }
.piepost-vku13 { background-position: -312px bottom!important }

a.piepost-vku1:hover { background-position: top left!important }
a.piepost-vku2:hover { background-position: -26px 0!important }
a.piepost-vku3:hover { background-position: -52px 0!important }
a.piepost-vku4:hover { background-position: -78px 0!important }
a.piepost-vku5:hover { background-position: -104px 0!important }
a.piepost-vku6:hover { background-position: -130px 0!important }
a.piepost-vku7:hover { background-position: -156px 0!important }
a.piepost-vku8:hover { background-position: -182px 0!important }
a.piepost-vku9:hover { background-position: -208px 0!important }
a.piepost-vku10:hover { background-position: -234px 0!important }
a.piepost-vku11:hover { background-position: -260px 0!important }
a.piepost-vku12:hover { background-position: -286px 0!important }
a.piepost-vku13:hover { background-position: -312px 0!important }

Cambiar piepost-vku.png por el link donde alojaron la imagen.

Ahora agregaremos el menú al pie de las entradas.

El menú se vera con una imagen mediante CSS Sprite, lo que nos va a ayudar a que cargue mas rápido el blog.

Podemos colocar todos los link o solo algunos.

  • piepost-vku1: Leer post completo.
  • piepost-vku2: Ir directo a opinar.
  • piepost-vku3: Compartir en twitter.
  • piepost-vku4: Compartir en myspace.
  • piepost-vku5: Compartir en facebook.
  • piepost-vku6: Votar post en bitácoras.
  • piepost-vku7: Compartir en google buzz.
  • piepost-vku8: Enviar post por correo.
  • piepost-vku9: Imprimir post.
  • piepost-vku10: Guardar como pdf.
  • piepost-vku11: Agregar a favoritos.
  • piepost-vku12: Agrandar texto.
  • piepost-vku13: Achicar texto.

Buscamos <div class='post-footer-line post-footer-line-1'/> y justo abajo colocaremos los link:

Código de los link.

<span class='piepost-vku'>
<a class='piepost-vku1' expr:href='data:post.url' title='Leer post completo...'/>

<a class='piepost-vku2' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Ir directo a opinar...'/>

<a class='piepost-vku3' expr:href='&quot;http://twitter.com/home?status=Viendo: &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Compartir en twitter...'/>

<a class='piepost-vku4' expr:href='&quot;http://myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Compartir en myspace...'/>

<a class='piepost-vku5' expr:href='&quot;http://facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Compartir en facebook...'/>

<a class='piepost-vku6' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url' target='_blank' title='Votar post en bitácoras...'/>

<a class='piepost-vku7' expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl' target='_blank' title='Compartir en google buzz...'/>

<a class='piepost-vku8' expr:href='&quot;mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Enviar post por correo...'/>

<a class='piepost-vku9' expr:href='&quot;http://www.printfriendly.com/print?url=&quot; + data:post.url' target='_blank' title='Imprimir post...'/>

<a class='piepost-vku10' expr:href='&quot;http://www.printfriendly.com/print?url=&quot; + data:post.url' target='_blank' title='Guardar como pdf...'/>

<a class='piepost-vku11' href='javascript:AddToFavorites();' title='Agregar a favoritos...'/>

<a class='piepost-vku12' href='javascript:void(0);' onmousedown='agrandartexto();' title='Agrandar texto...'/>

<a class='piepost-vku13' href='javascript:void(0);' onmousedown='reducirtexto();' title='Achicar texto...'/>
</span>

Si no vamos a utilizar algunos de los link solo borrarlo desde <a ... hasta ... />

Si lo queremos mostrar solo al abrir el post lo colocaremos dentro de un código condicional.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Código de los link.

</b:if>

Si elegimos agregar a favoritos (piepost-vku11), hay que colocar el código JavaScript visto en la anterior entrada:

Arriba de </head>

Poner el siguiente código:

<script type='text/javascript'>
//<![CDATA[
function AddToFavorites()
{
var title = document.title; var url = location.href;
if (window.sidebar&amp;&amp;window.sidebar.addPanel) // Firefox
window.sidebar.addPanel(title,url,&quot;&quot;);
else if(window.opera &amp;&amp; window.print) // Opera
{
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
window.external.AddFavorite(url, title) // IE
}
//]]>
</script>

Si elegimos agrandar/achicar el texto (piepost-vku12 y piepost-vku13), hay que colocar el código JavaScript.

Arriba de </head>

Poner el siguiente código:

<script type='text/javascript'>
//<![CDATA[
var newsfont = 12;
function changeFont(id) {

if (document.getElementById) {
document.getElementById(id).style.fontSize = newsfont+"px";
} else {
if (document.layers) {
document.layers[id].fontSize = newsfont+"px";
} else {
if (document.all) {
eval("document.all." + id + ".style.fontSize = \"" + newsfont + "px \"");
}
}
}
}

function agrandartexto() {
if (newsfont < 30) {
newsfont= newsfont +2;
changeFont('main-wrapper');
}
}

function reducirtexto() {
if (newsfont > 12) {
newsfont= newsfont -2;
changeFont('main-wrapper');
}
}
//]]>
</script>

Ver mas detalles sobre agrandar/achicar texto, o elegir otro código JavaScript, en está entrada:

Ver con vista previa antes de colocar el código condicional para ver como va quedando.

Guardar Plantilla.

A los que me pidieron este código disculpen la demora. (mas vale tarde que nunca)

Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
Alberto dijo...

hola!! muy buena esta entraada lo aplique a mi blog y como siempre sin fallas gracias :) se me ocurrio una idea mientras lo instalaba en el blog, ¿Se puede poner este menu a un costado de la fecha? ok esa es mi idea-duda espero y si se pueda... Saludos!! :): )

Vku dijo...

El código de la fecha es el siguiente:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Prueba poner el código de los link a continuación.
Puedes darle estilo con CSS.
Algo así:
<span class='piepost-vku' style="float:right;">

Cocofansclub dijo...

Hola VKU!!eres muy amable gracias por tu ayuda,voy a intertalo y te comento como ne fue!
beso y abrazo!
claudia

Cocofansclub dijo...

PERFECTO VKU!PUDE CENTRARLOS CON TUS INDICACIONES!
MUCHAS GRACIAS!!
cuando tengas un tiempito pasate por mi blog porque tengo el mismo problema con un rotador de imagenes que puse y no puedo centrarlo ,lo saque de una entrada de rosa.y otra pregunta sera posible poner este rotador en una entrada o habra que hacerle cambios??
saluditoss!y gracias

Cocofansclub dijo...

si acabo de verlo!perdon,pero lo de centrar el rotador no le he preguntado....te lo preguntaba a vos...

Vku dijo...

Si, Alberto, pero presta atención de que si haces una entrada tiene que ser en distintos días.
Si haces 2 en un día una de las fechas no se va a mostrar.

Vku dijo...

Me haces reir con tus comentarios :26)

Ves Angel acá también utilizo sprites.

Vku dijo...

Angel, se aprende de a poco y de a una cosa con paciencia. Hay que hacer muchas pruebas pero lo mejor para aprender es entender lo que uno esta haciendo, saber para que es una cosa y la otra, que hace o deja de hacer.

Angel no es dentro del div, es abajo que va el código.

¿que error te dio?

Cuando lo tengas me avisas por correo anfelweb@gmail.com y lo veo por si algo has puesto mal.
Un abrazo Andrés

Vku dijo...

Angel, en tu blog tal ves te convenga ponerlo en lugar de Imprimir artículo ya que post-footer-line-1 lo tienes oculto con condicionales.

Vku dijo...

Si quieres mandame tu plantilla por correo y me fijo porque no te sale.

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.



Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.


Nota: solo los miembros de este blog pueden publicar comentarios.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?