Como todo en este blog, el template o plantilla para blogger también esta disponible bajo licencia CC y está disponible para su descarga y uso.
Para realizar la plantilla partí de un diseño original de Lawnydesignz y poco a poco la fui modificando hasta obtener el resultado deseado.
Mis conocimientos de HTML son limitados, sin embargo, si tienes alguna duda sobre la plantilla no dudes en preguntar
Descargar plantilla
Si el enlace no funciona dame un toque en los comentarios y volveré a subir el archivo.
-Sobre los iconos de las redes sociales o iconos "compártelo":
Como nos preguntan por ellos, voy a hacer un pequeño tutorial de como se ponen:
Nos situamos en el escritorio de blogger, y vamos a Diseño/Edición de HTML y hacemos click en expandir plantillas de artilugios
Ahora en el código, buscamos (Ctrl+F) donde pone </head> y justo encima pegamos:
<!-- Iconos redes sociales 1-->
<style type='text/css'>
.pushbutton a:hover{
position: relative;
top: 1px; left: 1px;
outline:none;
}
.bookmark table{
background-color:#000911;
border:1px hidden gray;
padding:10px;
}
.bookmark td{
font-size: 1em;
text-align: center;
vertical-align: middle;
color: #CCCCCC;
}
.bookmark img{
vertical-align: middle;
}
</style>
<!-- Fin Iconos redes sociales 1 -->
ahora, una vez más, con la herramienta de buscar (Ctrl + F) buscamos:
<div class='post-footer-line post-footer-line-3'/>
o si no,
<p class='post-footer-line post-footer-line-3'/>
en el caso de nuestra plantilla es la primera opción.
Y justo debajo de esta línea pegamos lo siguiente:
<!-- Iconos redes sociales 2 -->
<p align='left' class='post-footer'>
<td style='vertical-align:middle' valign='middle' width='15%'><div>Compártelo:</div></td><span class='pushbutton'><a expr:href='"http://apezz.com/submit.html?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img704.imageshack.us/img704/6598/apezz1.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://bitacoras.com/anotaciones/" + data:post.url' rel='nofollow' target='_blank'><img src='http://img10.imageshack.us/img10/9247/bitacoras.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' target='_blank'><img src='http://img188.imageshack.us/img188/9284/rssf.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img34.imageshack.us/img34/2607/googlez.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img36.imageshack.us/img36/4478/fresquiam.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://enchilame.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img41.imageshack.us/img41/517/enchilame.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://twitter.com/home/?status=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img60.imageshack.us/img60/2700/twitterq.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img26.imageshack.us/img26/2134/liverww.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img8.imageshack.us/img8/8239/myspacexhm.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img170.imageshack.us/img170/3513/facebooko.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img207.imageshack.us/img207/3607/meneame.png' style='border:0px; padding:2px' valign='bottom'/></a></span></p>
<!-- Fin Iconos redes sociales 2 -->
Y ya les tienes funcionando.
Para que se entienda que es toda esa ultima parrafada, cada uno de los marcadores empieza donde pone <span class='pushbutton'> y acaba donde pone </span>
Ejemplo:
<span class='pushbutton'><a expr:href='"http://apezz.com/submit.html?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img704.imageshack.us/img704/6598/apezz1.png' style='border:0px; padding:2px' valign='bottom'/></a></span>
Así que si quieres borrar alguno, siempre que borres la linea entera con esos comandos incluidos y no tendrás problemas, también puedes reordenarlos, cambiar los iconos subiendo otras imagenes y cambiando los enlaces a la imágen o añadir más siguiendo el mismo esquema.
-Blogs que para orgullo del que suscribe han comentado que usan esta plantilla:
www.enbiciporsantander.com
6 comentarios
hola, que tal.
12 de enero de 2010, 0:46Verás, tengo un pequeño blog que acaba de empezar, y como soy lector habitual de tu blog y su diseño me gusta, cogí tu plantilla para usarla como base,la verdad es que me gusta bastante el diseño que tienes.
Te comento esto por dos cosas, la primera, para que lo sepas, pues aunque la pongas una licencia de CC, creo que no esta de más avisarte.
y la segunda, si puede ser para abusar un poco más de ti.
He visto que has añadido hace poco unos iconos para compartir las entradas, y si puede ser y no es mucha molestia, me gustaría saber como se ponen.
Si te parece que me paso, no hace falta que contestes, borra mi comentario y como si nada.
PD: mi blog: http://enbiciporsantander.blogspot.com/
PD2: muchas gracias
Hola, me alegra mucho que te guste el diseño y que le saques utilidad, acabo de visitar tu blog y me ha gustado mucho lo que has hecho con el, tanto por la composición de colores, como por la redistribución de zonas... y me gusta además que sirva para fomentar el uso de la bicicleta, enhorabuena por tu blog, espero que te dure mucho.
12 de enero de 2010, 12:34En cuanto a lo de los iconos de las redes sociales, aparecen en la plantilla que he subido hace unos días. Deduzco, que la versión que tienes de mi plantilla tiene ya algún tiempo.
No obstante, si esperas a que tenga 5 minutos libres, para que no tengas que rebuscar en el código, editaré la entrada que nos precede y haré un pequeño tutorial, que no me cuesta nada.
Un saludo, y una vez más, enhorabuena por tu blog.
Ya esta editado y tienes un pequeño tutorial, si tienes dudas puedes fijarte en la plantilla que hay subida.
12 de enero de 2010, 21:39Un saludo
ostras tu, muchas gracias
18 de enero de 2010, 22:42siento no haber contestado antes, pero es que hasta que no has actualizado el blog y te he visto a través de los feeds no me había vuelto a acordar.
De nuevo muchas gracias por este tutorial, me has dejado alucinado, más fácil imposible XD a ver si me pongo esta semana a ello. para cualquier cosa en la que te pueda ayudar, ya sabes donde estoy ;)
gracias! ya tengo el blog al día XD muchas gracias por todo, de veras; para cualquier cosa ya sabes donde me tienes
3 de marzo de 2010, 21:07muy útil
22 de marzo de 2010, 21:29Publicar un comentario