Sobre el diseño del blog

miércoles, 29 de julio de 2009

-Sobre la plantilla:

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='&quot;http://apezz.com/submit.html?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://bitacoras.com/anotaciones/&quot; + 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 + &quot;feeds/posts/default&quot;' 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='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://tec.fresqui.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://enchilame.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://twitter.com/home/?status=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;https://favorites.live.com/quickadd.aspx?marklet=1&amp;mkt=en-us&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;t=&quot; + 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='&quot;http://facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://apezz.com/submit.html?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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.

Verá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

12 de enero de 2010, 0:46
Antonio dijo...

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.

En 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.

12 de enero de 2010, 12:34
Antonio dijo...

Ya esta editado y tienes un pequeño tutorial, si tienes dudas puedes fijarte en la plantilla que hay subida.

Un saludo

12 de enero de 2010, 21:39

ostras tu, muchas gracias

siento 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 ;)

18 de enero de 2010, 22:42
bici santander dijo...

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:07
Anónimo dijo...

Publicar un comentario en la entrada