 |
| 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='"http://twitter.com/home?status=Viendo: " + data:post.title + " " + data:post.url' target='_blank' title='Compartir en twitter...'/>
<a class='piepost-vku4' expr:href='"http://myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Compartir en myspace...'/>
<a class='piepost-vku5' expr:href='"http://facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Compartir en facebook...'/>
<a class='piepost-vku6' expr:href='"http://bitacoras.com/anotaciones/" + data:post.url' target='_blank' title='Votar post en bitácoras...'/>
<a class='piepost-vku7' expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title+ "&srcURL=" + data:blog.homepageUrl' target='_blank' title='Compartir en google buzz...'/>
<a class='piepost-vku8' expr:href='"mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar post por correo...'/>
<a class='piepost-vku9' expr:href='"http://www.printfriendly.com/print?url=" + data:post.url' target='_blank' title='Imprimir post...'/>
<a class='piepost-vku10' expr:href='"http://www.printfriendly.com/print?url=" + 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 == "item"'>
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&&window.sidebar.addPanel) // Firefox
window.sidebar.addPanel(title,url,"");
else if(window.opera && window.print) // Opera
{
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
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)
