Freebie: Plantilla/Template para blogger {Simply Colors}

 
¡Hola, querida blogósfera! Les cuento que como extrañaba mucho editar una plantilla (a partir de una plantilla simple de blogger) y jugar con el html, me puse a modificar una que años atrás había planeado usar en otro blog que nunca vio la luz, por lo que ahora me apetece ponerla a disposición de quien guste usarla 😊. Es bastante sencilla pero me gustó el resultado y está hecha con mucho amor💕.


[DESCARGA AQUÍ]
!IMPORTANTE: Para que se muestren varios elementos tienen que crear gadgets HTML en la sección de Diseño. A continuación les dejo los códigos:
Botones de redes sociales
<div align="right"><div style="margin-right: 17em; margin-top:3em"> <a href="http://livingofthewords.blogspot.com/feeds/posts/goodreads link"><img src="http://1.bp.blogspot.com/-LF0ZkfQ5_C0/WI_laraVrwI/AAAAAAAAErQ/hHoZe7rtyYYXO2TwH-_PeW3jRMbCMUm_QCK4B/s1600/book2.png" width="40" /></a> <span class="pushbutton"><a href="http://livingofthewords.blogspot.com/feeds/posts/instagram link"><img src="http://2.bp.blogspot.com/-JEcKHHw6SIo/WI_lbBuAWqI/AAAAAAAAErw/jq6NZw9Hp7we_AECcsZbvqfK7mV3tszNwCK4B/s1600/instaicon.png" width="40" /></a></span> <span class="pushbutton"><a href="http://livingofthewords.blogspot.com/feeds/posts/facebook link"><img src="http://3.bp.blogspot.com/-bOqGLGBfffc/WI_lawm-byI/AAAAAAAAEro/MnXrZiMV2OsQyGNP_AjmP6GqTQTAp3HFwCK4B/s1600/faceicon.png" width="40" /></a></span> <span class="pushbutton"><a href="http://livingofthewords.blogspot.com/feeds/posts/twitter link"><img src="http://1.bp.blogspot.com/-mI-r04H0B7w/WI_lbZveFlI/AAAAAAAAEr4/iqt5cWrf__M6jHeU5TECviprk4S4PQbdgCK4B/s1600/twitter.png" width="40" /></a></span> <span class="pushbutton"><a href="http://livingofthewords.blogspot.com/feeds/posts/youtube link"><img src="http://3.bp.blogspot.com/-dHNWa_yK7Oc/WI_lbS2Yn2I/AAAAAAAAEsA/Z36cpOYSNdAqfai0t9HrRmYOo_pMRSbRACK4B/s1600/yt.png" width="40" /></a></span> <span class="pushbutton"><span class="pushbutton"><span class="pushbutton"><span class="pushbutton"></span></span></span></span></div></div>
 Menú vertical
<style>.categories a{ /* Menú by Not A Single Song* display: block; font-family: Trebuchet MS; text-align: center; /* Alineación del texto */ padding-left: 5px; color: #ffffff; /* Color del texto */ background: #c7c0b5; /* Fondo */ border-radius: 4px; /* Radio del borde */  margin: 2px; -moz-transition: all 0.4s ease-out; -webkit-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; transition: all 0.8s ease-out; }<br />.categories a:hover { background: #89b1af; color: #fff; text-align: right; padding-right: 4px; margin-right:15px; border-radius:3px;} </style><div class="categories"><a href="http://livingofthewords.blogspot.com/feeds/posts/Link%20aqu%C3%AD">Categoría 1</a><a href="http://livingofthewords.blogspot.com/feeds/posts/Link%20aqu%C3%AD">Categoría 2</a><a href="http://livingofthewords.blogspot.com/feeds/posts/Link%20aqu%C3%AD">Categoría 3</a><a href="http://livingofthewords.blogspot.com/feeds/posts/Link%20aqu%C3%AD">Categoría 4</a></div>
Menú horizontal
<style>.menu a{ display: inline; /* Formato del menú */ font-family: Handlee; /* Fuente*/ font-size: 20px; color: #7e7e7e; padding: 5px; background: #ffffff; -moz-transition: all 0.4s ease-out; -webkit-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .menu a:hover { /* Para cuando pasas el cursor por encima */ color: #89b1af; /*Color de la letra*/ font-size: 25px; text-decoration: none; } </style> <div align="right"><div class="menu"><a href="http://www.blogger.com/"> ▸ Link1 </a> <a href="http://www.blogger.com/"> ▸ Link2 </a> <a href="http://www.blogger.com/"> ▸ Link3 </a> <a href="http://www.blogger.com/"> ▸ Link4 </a> <a href="http://www.blogger.com/"> ▸ Link5 </a> <a href="http://www.blogger.com/"> ▸ Link6 </a></div></div>
Pueden alinearlo al centro cambiando <div align="right"> por <div align="center">, o si lo quieren a la izquierda, por <div align="left">
Buscador
<style>#ba-cuadrobusq .ba-textobusq { border: 1px solid #DDD; box-sizing: border-box; color: black; font-family: 'Lora', serif; font-size: 12px; padding:5px; width: 150px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; } #ba-cuadrobusq .ba-textobusq:hover { box-shadow:inset 1px 1px 8px gainsboro; } #ba-cuadrobusq .ba-textobusq:focus { background-image: -webkit-linear-gradient(white,white); background-image: -moz-linear-gradient(white,white); background-image: -ms-linear-gradient(white,white); background-image: -o-linear-gradient(white,white); background-color:white; outline:1px solid #c7c0b5; color:black; font-style:normal; box-shadow:inset 1px 1px 8px gainsboro; border:1px solid #c7c0b5; } #ba-cuadrobusq .ba-enviar { background:#89b1af; border: 1px solid #ffffff; font-family: 'Droid Sans', sans-serif !important; color: #fff; cursor: pointer; line-height: 11px; padding: 8px 10px; text-decoration: none; } #ba-cuadrobusq .ba-enviar:hover { background:#c7c0b5; } </style><form action="http://livingofthewords.blogspot.com/feeds/posts/search/" id="ba-cuadrobusq"> <input class="ba-textobusq" name="q" /> <input class="ba-enviar" type="submit" value="Buscar" /></form>
Si la usan los créditos no son necesarios pero se agradecen. Y
si tienen alguna duda pueden enviarme un mensaje directo por twitter, por la página de facebook o si lo prefieren por correo (viviendodelaspalabras@hotmail.com)😉