 |
| 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)
0 comments:
Post a Comment