Menu Vertical con Buscador usando CSS con Transiciones y Zoom

Anterior mente había publicado como crear un menu basado solamente en Css, es esta ocasión he creado un menu Vertical al cual le he agregado un Buscador usando únicamente CSS.

Además usando la declaración hover le he agregado otros efectos de transición, Zoom y movimiento esperando que les guste.

Este menu es uno de muchos ejemplos de como agregando le un poco de estilo css a un objeto,
podemos darle un estilo distinto y agradable.


Para agregar Este Menu Vertical tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style>
#menuWrapper {
width:200px;/*ancho de menu*/
height:230px;/*alto de menu*/
padding-left:15px;
background:#F9F8F6;/*color de fondo de menu*/
box-shadow: 0 1px 5px #808080;
border-radius:3px;/*radio de menu*/
}

.menu {
margin-top: 5px;
width:100%;
float:left;
font-size:13px;/*tamaño de txto*/
font-weight:bold;
}

.menu li a{
display:block;
font-weight:bold;
line-height:35px;
margin:0px;
padding:0px 25px ;
text-align:left;
text-decoration:none;
border-radius: 0px 5px 0px 5px;
color:#000;/*color de texto*/
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}

.menu li a:hover{
font-size:14px;
padding:4px 0px 4px 50px;
background:#E51431;/*color de fondo de texto al pasar en cursor*/
color:#ffffff;
text-decoration:none;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-o-transition: all 0.6s;
}

.menu ul {
height:0px;
list-style:none;
margin:0;
margin-left: -15px;
padding:0;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 1px 5px #808080;
}
#search {
width: 215px;
height:22px;
float: right;
text-align: center;
margin-top: 6px;
}

#search-box {
margin-top:-2px;
text-align:center;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAACXBIWXMAAA7BAAAOwQG4kWvtAAAAIGNIUk0AAG2YAABzjgAA+swAAIXsAABsVwAA49UAADE1AAAX2tF76rUAAAEESURBVHjalNJLM0NBEIbhJzkhRxIEJRaoYuH//x8UG5uIRSIljsjFpk+ZipGiNz2X7ne+7umGb+viDH004qzCC0ZYyVgdeIKrWC/wjh2UcTbFHdabgAId3MR+iIfk1VncdwM42QQ0MUiSn7BM7id4TFR2coCjkDaStxmeo9zDHKAZzfr0u30k8T8Aa7TR2gLYDb/KAV7DH29JPo31OAeoaz9PAmsrcR1xi5yCeg4GuIz1POagiO9rJPEVbtN+FeHfImkvXi1Deg1rR1wLB1H20ga93peRsAzwChcx5umv3KMqMk1bhNR5Mrp1o3uJkj7Ghb/bNEruJeVX/wHUSmA/lA6/BgCJ0z3LSqvQSQAAAABJRU5ErkJggg==);
background-repeat:no-repeat;
background-position:98% 50%;
padding: 6px 6px 6px 8px;
width: 202px;
height:32px;
border: solid 1px #bcbbbb;
outline: none;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

</style>
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href='http://mdtutoriales.blogspot.com'>Inicio</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/mapa-de-sitio.html'>Mapa del Blogs</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/contacto.html'>Contacto</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/mapa-de-sitio.html'>Mapa del Blogs</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/contacto.html'>Contacto</a></li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</ul></div></div>

 Las partes que estan de Color puedes editar Tanto los Url como los nombres. tambien he dejado señalado la parte del codigo a editar para cualquier gusto.

Agregar paginación en blogger

Esta es una herramienta estupenda para poder navegar en todas las paginas de nuestros blogs. Les permite a nuestros seguidores navegar en el blogs como si fuera un libro. Ya que ordenando las paginas de los post mas nuevos asta los mas antiguos y de esta forma los usuarios naveguen pro fundamente en los post del Blog. quien no a Visitado YouTube, esta pagina utiliza una paginación semejante a esta.


Para agregar la paginación a tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>


<script style='text/javascript'>var pageCount=7;
var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Siguiente";</script>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>

Color Rojo: Numero de Entradas a mostrar
Color Azul: Numero de Paginas a Mostrar

Ve las siguiente imagen, donde explico como donde agregar en Gadget.

Guarda los Cambios y listo.