Buscador en la cabecera del blog

poner el buscador es muy sencillo ♥ 

Dashboard  Plantilla  Editar HTML

Con Crtl + f  busca por el siguiente código:
<b:widget id='Header1' locked='true' title='*NOMBRE DE TU BLOG* (cabecera)' type='Header'/>
</b:section>
Ahora, debajo de </ b:section> pega esto: 
<div style='position:absolute; top:60px;left:50px;'>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' type='text'/> <input id='search-btn' type='submit' value='Buscar'/></form>
</div>
Personalizarlo     ♥  
Debajo de < head> {copia y pega}
<style>
#search-btn {
background-color:#A9D0F5;
color:#FFFFFF;
margin:0;
font:bold 14px Tahoma;
border:0;
}
#search-btn:hover {
cursor:pointer;
background-color:#2E9AFE;
}
#search-box {
color:#2E9AFE;
margin:0;
font:bold 12px Arial;
border: 1px solid #CEE3F6;
width:140px;
</style>
}
Firma Post


Iconos de redes sociales arriba del blog que giran al pasar el cursor


Para poner estos íconos sociales en tu blog entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> los estilos:
/* Iconos de redes sociales
----------------------------------------------- */
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px;
display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}

Luego SIN expandir los artilugios busca esta línea:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Arriba de ella agrega la estructura:
<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwgPkYM3xbVaJeurn-l4zJUj4qhNsvJMdQPls3V6We8yZL2U26rLfIz9CrCSvEwzWYgeokDc97Y3IRMPTegKLzQ4v4nKPROT8KczVtOse_rhk6lSopi0Gks6h_-aluWm-JhAmELKn4ruI/s36/social-facebook.png'/></a></li>

<li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcwkN2q1V7EfzhdTXU9TEVS5JB4DbdaxXkRLD4umKZCxd5glcreBX4RvWxA7GSiCrmkIFZeC6btZLp9yurOL37Jn1hNhTcaWefXpRimtxqlKB85AwoKFg1dl2bL_miWebzduXn1mlmSY/s36/social-twitter.png'/></a></li>

<li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlyJEli-j7q57c4OHK3dt9kg9ODTI2mE_kQPx5H5CZVR8ynL80sSEKcig0T-ZZ6JiaAsYZ0LWKd07miXLlffPDqWhFm6_m6du5iPlYg74nb3LyHm_U_6sMs8CXTNgYEBdNuI9bSwaBvyM/s36/social-googleplus.png'/></a></li>

<li class='social_icon'><a href='http://nombre-de-mi-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdNkE8CVmuBjc8Lf0nKndXhBlRg2XWJW9fWt-HFl2EvwXLKokZy6p_P9rXqWxyVvEf4vWJX6ujme-rMqaNmQk0cQznULiIX9qJh3RkGPLG3HA_4XrDEuR1tE6hkdwPUHVlovSvS7L9aEA/s36/social-rss.png'/></a></li>

</ul></div>
Cambia lo que está en color rojo por tus datos y listo. El primero es tu usuario de Facebook, el segundo el de Twitter, el tercero deberás cambiar las X por el ID de tu perfil de Google+, y en el cuarto deberás poner el nombre de tu blog.

Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes </ul></div> una línea como esta por cada icono extra que quieras:
<li class='social_icon'><a href='URL del enlace'><img border='0' src='URL de la imagen'/></a></li>

Aunque están pensados para mostrarse arriba del blog puedes ponerlos donde tú quieras, incluso puedes ponerlos en un elemento HTML/Javascript, eso quedará a elección de cada quien.

El efecto que gira está hecho con CSS3 así que en navegadores antiguos este efecto no funcionará.
Los iconos son de Iconfinder excepto el de Google+ que lo he diseñado yo, pero pueden sustituirse por los iconos de tu elección.
Firma Post


Colocar icono/pixel en una entrada + Kawaii Icons 100x100


Para que la entradita de tu blog quede de esa manera solo tienes que copiar el siguiente codigo y pegarlo en tu entrada, pero hay que fijarse bien en una cosa.... como veran, al hacer la entrada hay 2 botones que dicen "REDACTAR" Y "HTML" el de HTML le das presionar y pegas ahi el codigo. 

<div style="clear: both;">
</div>
<img align="left" alt="" height="100" nbsp="" src="URL ICONO" style="margin: 0px;" width="100" /><br />
&nbsp;<span style="color: #848484;"><img alt="" border="0" src="URL PIXEL" />Tu frase/mensaje</span><br />
<span style="color: #848484;">&nbsp;<img alt="" border="0" src="URL PIXEL" />Estado sentimental</span><br />
<span style="color: #848484;">&nbsp;<img alt="" border="0" src="URL PIXEL" />comida</span><br />
<span style="color: #848484;">&nbsp;<img alt="" border="0" src="URL PIXEL" />musica/cancion</span><br />
<span style="color: #848484;">&nbsp;<img alt="" border="0" src=&quot;URL PIXEL" />pelicula/libro</span><br />
<br />
Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~ Aqui empiezas a escribir ~ ❤ ~<br />
<br />
<br />

Ahora lo que tienes que hacer es remplazar:

Rosita: es la direccion/url de tu pixel
Verde: es la frase que utilizarar con respecto al pixel que tienes al lado.
Morado: Es el icono o imagen que utilizaras.

Aqui les dejo unos kawaiiosos iconos :)!
















Firma Post


ir arriba