Barra de Navegacion Con Iconos Con Efecto Hover Para Blogger

Diseñar una pagina web es un proceso de aprendizaje y en este articulo te mostrare como usar codigo Css3  especialmente una barra de navegacion con iconos con efecto hover  sin la necesidad de usar JavaScript . El codigo de Css3 facilita el trabajo en la animacion de este.

Por otro lado la barra de Navigacion es importante para los bloggers. Podemos navegar cada pagina, categorias sin problemas.Hay beneficios al usar el codigo de Css3 en una barra de navegacion de Iconos con efecto hover,ayuda al visitante al navegar paginas importantes como  contacto , Sobre Mi, Anuncios etc.

Chequea Articulo Añadir Menu Iluminado en Blogger

Para finalizar, es una barra de navegacion bastante elegante, lo que hara de tu pagina o blog uno mas elegante. Puedes darle un vistazo de demostracion en:http://fixcd.blogspot.com/

Para insertar este barra de navegacion de css3 solo sigue estos pasos:

1. Entra en tu cuenta de Blogger > Plantilla
2. Haga una copia de seguridad
3. Da Click en Editar HTML
4. Encuentre luego la etiqueta  ]]></b:skin>   y añade el codigo de abajo antes de ]]></b:skin>

/* El Codigo CSS del menu empieza aqui ciudadblogger */ #super-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#super-nav li {float: left;}
#super-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#super-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#super-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#super-nav li a:hover {cursor: pointer;}
#super-nav li a:hover img {top: -85px;}
#super-nav li a:hover .aname {top: 85px;}
#super-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#super-nav li:nth-child(2) a {background: #9bc704;}
#super-nav li:nth-child(3) a {background: #0dc3ff;}
#super-nav li:nth-child(4) a {background: #51a2ec;}
#super-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

5. Entra en blogger y da click en Diseño
6. Da Click Añadir un Gadget y selecciona 'HTML/Javascript'
7. Pegue el codigo de abajo.

<div id="super-nav">
<li> <a href="#"><span class="aname">Home</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsB1apIak3JrhSxw0i6gfnBdMgr5D_Vom58-5A-NMFX4tD9CjOH5eQHJqLNyQTJzLnbBPkcYEzQu1-BaPfS66TY2cwigI4kEGKiF7a9acjt1p8AhPWCVNWux_K8MXG_2LBogfL02JxCDc/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLrW2pIaJx76z2no8fnuDXZNesJm59X5AgUmOeZD8dAGfK5ZJyDis2_CNxthhicdKgWTjyjgDsXIhzhgMkiXk6BX64V5U3009oW2Zm-kH_jAQxLD3TqIjzbrD7kECBXEv-TVIXIm6eZt4/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKew9uXtbYH2v7_J8DK-ofPFskYOpYm7nG4xIpRCT5qark4PUmKk2epICgNCeb4vbCaC4Ih3Eaepwm5k3bKuaQ1gzFK8nmqOKry_PYF_CwKzWXTfXi6d__sNB25SP4RPJZKp7FBd51fTE/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_GflT_Om5L1O-9PPlsAdoMNhbFz8wuRx8qY0uIzwb8oTnLe8k8Miwk_2xaoFgZ6-xTdSXvWTmYa8500PWiiQPo7H5StZGKF_F9N36gFSDBH14XWa-NgDanRqE7xcOgt_k_pfQgoziD0/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxd8BWMlP_MnE3On-et8Mj58qMiz0H_d9DPtiAV3MsFBJrOAJwv8mAezCwV67-lYWKnX2hOZsKpZqaBA8vFwOUqYADEeOjrY3r4gvCprZAutiIgJ5ZmC4POdVhSl3Aex0AiynCyBR7Ql8/s1600/btrix-contact.png" /> </a> </li> </div>

Reemplace # con tus enlaces.

8. Ahora guarda tu HTML/Javascript'.

Todo listo.

Read More

Widget de Perfil Personal Social Expandible Para Blog de Blogger

En este articulo te traigo un atractivo y animado widget para tu blog de blogger.Este es un perfil social que se expande y se encoje al poner el cursor del mouse sobre el mismo ,sus colores semejan al menu metro UI.

Clores atractivos y llamativos que van a corde con la tecnologia y diseño moderno como window 8 de seguro te encantara despues que lo veas en tu blog especialmente su apriencia de plantillas Metro UI .

Este esta hecho desimple codigo CSS3 para activar sus efectos de expandir y contraerse y facil de instalar en tu blog de blogger.
Ejemplo:de click siguiente boton
Demo
Como Añadir este Widget a tu Blog..

• Entra en "Blogger"
• Da Click en seccion de Diseño
• Luego da click en "Añadir un Gadget" ..
• Apareceran una lista de opciones ..escoje y da click en "HTML/Java Script"..
• Luego paga el codigo de abajo en dentro de este.

<style>

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}


/*****************fb*****************/
.ca-menuf{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menuf li{
    width: 70%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #017CD4;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menuf li:last-child{
    margin-bottom: 2px;
    color: #fff;
}
.ca-menuf li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentf{
    color: #fff;
    position: absolute;
    left: 12px;
    width: 100%;
    height: 100%;
    top: 10px;
}
.ca-mainf{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subf{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menuf li:hover{
    background:  #1f69b3;
    color: #fff;
}
.ca-menuf li:hover .ca-iconf{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menuf li:hover .ca-mainf{
    font-size: 14px;
    color: #fff;
}
.ca-menuf li:hover .ca-subf{
    color: #fff;
    font-size: 30px;
}

/*****************tw*****************/
.ca-menut{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menut li{
    width: 70%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #00BFFF ;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menut li:last-child{
    margin-bottom: 2px;
    color: #fff;
}
.ca-menut li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentt{
    color: #fff;
    position: absolute;
    left: 12px;
    width: 100%;
    height: 100%;
    top: 10px;
}
.ca-maint{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subt{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menut li:hover{
    background:#0CA8F0;
    color: #fff;
}
.ca-menut li:hover .ca-icont{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menut li:hover .ca-maint{
    font-size: 14px;
    color: #fff;
}
.ca-menut li:hover .ca-subt{
    color: #fff;
    font-size: 30px;
}
/*****************g+*****************/
.ca-menug{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menug li{
    width: 70%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #da4a38;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menug li:last-child{
    margin-bottom:2px;
    color: #fff;
}
.ca-menug li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentg{
    position: absolute;
    left:12px;
    width: 300px;
    height: 60px;
    top: 10px;
    color: #fff;
}
.ca-maing{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subg{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menug li:hover{
    background: #DC321E;
    color: #fff;
}
.ca-menug li:hover .ca-icong{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menug li:hover .ca-maing{
    font-size: 14px;
    color: #fff;
}
.ca-menug li:hover .ca-subg{
    color: #fff;
    font-size: 30px;
}
/*****************rss*****************/
.ca-menur{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menur li{
    width: 70%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #FFA500 ;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menur li:last-child{
    margin-bottom: 2px;
    color: #fff;
}
.ca-menur li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentr{
    position: absolute;
    left: 12px;
    width: 300px;
    height: 60px;
    top: 10px;
    color: #fff;
}
.ca-mainr{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subr{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menur li:hover{
    background: #FF8C00 ;
    color: #fff;
}
.ca-menur li:hover .ca-iconr{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menur li:hover .ca-mainr{
    font-size: 14px;
    color: #fff;
}
.ca-menur li:hover .ca-subr{
    color: #fff;
    font-size: 30px;
}
</style><br> <ul class="ca-menuf">
<li>
<a href="https://www.facebook.com/nombredepagina">
<div class="ca-contentf">
<h2 class="ca-mainf">
Facebook</h2>
<h3 class="ca-subf">
Danos Like en Facebook</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menut">
<li>
<a href="https://twitter.com/nombrepagina"><div class="ca-contentt">
<h2 class="ca-maint">
Twitter</h2>
<h3 class="ca-subt">
Siguenos en Twitter</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menug">
<li>
<a href="https://plus.google.com/u/0/123456789"><div class="ca-contentg">
<h2 class="ca-maing">
Google+</h2>
<h3 class="ca-subg">
Añadenos en Google+</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menur">
<li>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=Tu enlace"><div class="ca-contentr">
<h2 class="ca-mainr">
RSS</h2>
<h3 class="ca-subr">
Suscribete a nuestro RSS</h3>
</div>
</a>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

• Da luego click en Guardar Html/Javascripts

Customizacion :

• Luego para finalizar Reemplace los enlaces de texto ensombrecidos en color amarillo de Facebook,Twitter,Google+,RSS con tus enlaces.. 

Read More

Añadir Menu de Navegacion Jungle Con Css A Blogger

En este articulo compartire un excelente y divertido ademas de atractivo menu de navegacion para blog de blogger.Este contiene el efecto cuando pasas el cursor sobre el mismo cambia de color rojo.Es muy simple ademas de anadir a tu blog.

Estos son los pasos para integrarlo en tu plantilla de blog de blogger.

1.Entra en tu cuenta de blogger.

2.Escoje el blog donde lo vas a insertar ,luego selecciona plantilla>>Editar Html

3.Una ves en Editar Html da click en editor de html y usa las Ctrl y F para buscar la siguiente etiqueta 
]]></b:skin>
4.Copia y pega el codigo de abajo arriba de la etiqueta ]]></b:skin>

#menu2{
 width:90%;
 margin:25px auto;
}
#menu2 ul{
 list-style:none;
}
#menu2 li{
 display:block;
 float:left;
}
#menu2 li a{
 background:#979797 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mluoShBJ0PBDFUrc9Y5WKAyigi22UqhBCNSbggT2LKQ0vRxD_9DTYz5yluOOTvFEbU6NM1r2p4Z5Vb9RFzC5h8evOYLTQD89mChWJf5O0RQQjM5uawfvelnH9byNzeKla_dmS2pMhMbp/s1600/menu_bg.gif) repeat-x;
 border:2px solid #939393;
 margin:0 1px;
 padding:15px 15px 15px 15px;
 display:block;
 float:left;
 color:#fff;
 text-transform:uppercase;
 text-decoration:none;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-size:13px;
 font-weight:bold;
 height: 50px;
}
#menu2 li a span{
 color:#636363;
 font-size:10px;
 text-transform:lowercase;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-weight:normal;
}
#menu2 li a:hover{
 background:#e46825 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuLbUIDc7zv1LwGli2yUbFhcxMoAdn3T7WB5P0H9kOPweO_TJjkc-okaIHAttBKY-gj9rMsrYvMFvVQL-YloX7ChCSXNgRM4nVmosJoZSih5kvWp-zj8GdxIT-Mh2u_sff4IPgtlt9TG7/s1600/menu_hover.gif) repeat-x;
 border:2px solid #939393;
 text-decoration:none;
}
#menu2 li a:hover span{
 color:#636363;
}
.current{
 background:#bcbcbc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuLbUIDc7zv1LwGli2yUbFhcxMoAdn3T7WB5P0H9kOPweO_TJjkc-okaIHAttBKY-gj9rMsrYvMFvVQL-YloX7ChCSXNgRM4nVmosJoZSih5kvWp-zj8GdxIT-Mh2u_sff4IPgtlt9TG7/s1600/menu_hover.gif) repeat-x;
 border:2px solid #aeaeae;
 margin:0 1px;
 padding:15px 15px 15px 15px;
 display:block;
 float:left;
 color:#fff;
 text-transform:uppercase;
 text-decoration:none;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-size:13px;
 cursor:pointer;
 font-weight:bold;
 height: 50px;
}
.current span{
 color:#636363;
 font-size:10px;
 text-transform:lowercase;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-weight:normal;
}

5. Ve a blogger y da click en Diseño

6. Da Click Añadir un Gadget y selecciona 'HTML/Javascript

7. Pega en espacio el codigo de abajo

<<!--Empieza Menu-->
<div id="menu2">
 <ul>
  <li class="current">Pagina Principal<br /><span>te lleva a<br /> Pagina Principal</span></li>
  <li><a href="#">Sobre Autor<br /><span>te lleva a<br />pagina de autor</span></a></li> 
  <li><a href="#">Productos<br /><span>te lleva a<br />pagina de productos</span></a></li>
  <li><a href="#">Asociados<br /><span>te lleva a<br />pagina asociados</span></a></li> 
  <li><a href="#">Contactanos<br /><span>te lleva a<br />pagina de contacto</span></a></li></ul>
</div><!--    Termina Menu-->

Reemplaza # con tus enlaces en la distintas paginas de este menu.

7. Ahora Guarda la HTML/Javascript'.

    Todo listo tus visitantes disfrutaran de menu atractivo y con efecto animado en tu blog...

Read More

Barra de Navegacion Con Curvas y Brillo Para Blogger

En este dia te traigo un lindo menu con curvas y brillo para tu blog de blogger. Te explicare como añadirlo este funciona excelentemente bien en la mayoria de los navegadores,puedes enlazar tus paginas principales usando un marco de coneccion de navegacion.En este se utiliza Css3 y HTML.
Puedes ver el ejemplo en vivo en el siguiente enlace http://jquerysimples.blogspot.com/

Los pasos para añadirlo son los siguientes
1.Entra a la cuenta de Blogger

2.Seleciona la Plantilla

3. Da Click en boton de EDITAR HTML

4. Encuentra esta etiqueta ]]></b:skin> usando Ctrl+F   

5. Pegue el codigo de abajo antes de la etiqueta ]]></b:skin> 

/* El Codigo de CSS para el menu empieza aqui ciudadblogger.info */
.cbg_glossymenu1{
 position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-eTZZbN5GERJRz4cNsvHvVOJAbO5xNo8ErBoJY5DdGoXzKmEsyIW13kIOG-XnKd0I3Q-jYTwtgJcZ4AUQF1h307m27qgdNeLc8EgVfmhwp1L9g46iYv14gVXGzrqoUOEOHtLykk1Kx0/s1600/btrix_menupu_bg.gif) repeat-x;
 height: 46px;
 list-style: none;
}
.cbg_glossymenu1 li{
 float:left;
}
.cbg_glossymenu1 li a{
 float: left;display: block;color:#000;
 text-decoration: none;
 font-family: sans-serif;
 font-size: 13px;
 font-weight: bold;
 padding:0 0 0 16px;
 height: 46px;
 line-height: 46px;
 text-align: center;
 cursor: pointer;
}
.cbg_glossymenu1 li a b{
 float: left;display: block;padding: 0 24px 0 8px;
}
.cbg_glossymenu1 li.current a, .cbg_glossymenu1 li a:hover{
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0npS8Vo2E70NTqV7-c0BGmZJcZQe7vcpNg16NXcO476w_bOThwvr9rwMs0NjwEhRRJPRwTr0KWDqgEFc-cX4pSf-sLBUy49ZywcyEIgnjCZBSEEm2EKuW_D7H7or42NUWbkt4Ab7ubY/s1600/btrix_menupu_hover_left.gif) no-repeat;
 background-position: left;
}
.cbg_glossymenu1 li.current a b, .cbg_glossymenu1 li a:hover b{
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEBVrtdJnRoMJqEDpY49m0RLtroudWzm_lzvcfIPK1suJKgnZnk-g2Mz0SXeU0tm6ZwjGiB75dUGlWFUMkBDX14Tg9tZkcc-lmT2YgPg81LoYb5LFdvgBebCtvfYh1cth3H4YkFpN7WTE/s1600/btrix_menupu_hover_right.gif) no-repeat right top;
}

6. Entra en tu cuenta de blogger y de click en Diseño

7. Da Click Añadir un Gadget y selecciona HTML/Javascript

8. Pegue el codigo de abajo en espacio de HTML/Javascript

<ul class="cbg_glossymenu1">
 <li class="current"><a href="#"><b>Pagina Principal</b></a></li>
 <li><a href="#"><b>CSS</b></a></li>
 <li><a href="#"><b>Foros</b></a></li>
 <li><a href="#"><b>Herramientas</b></a></li>
 <li><a href="#"><b>JavaScript</b></a></li>
 <li><a href="#"><b>Contactenoss</b></a></li>
</ul>

Replace # with your links.

9. Guarda tu HTML/Javascript'.

    Ahora este lindo menu con curvas y brillo estare disponible para usted y sus visitantes..

Read More

Menu Vertical Sombreado Con CSS3 Para Blogger

 Tal vez has pensado añadir una barra de menu vertical a tu blog de blogger.En este articulo mostrare como añadir un menu vertical atractivo a tu pagina de tu web especialmente a blog. Puedes ademas insertar este sencillo y elegante menu en la barra lateral y enlazar aqui los articulos especiales o categorias.

 Chequea Como Añadir Menu Desplegable al Blog de Blogger

Para realizar este proyecto he utilizado  Css3 y Html otra de las caracteristicas que incluye este menu vertical es el efecto cuando poner el cursor sobre la barra esta cambia a color verde aceituna.El efecto de animacion conocido en ingles como Hover.

Ejemplo ir al siguiente enlace: http://lanoticiaspr.blogspot.com/

Vamos ahora a añadir este util menu vertical a tu blog.

1.Entra en tu cuenta de Blogger

Demo

2.Ir a  Deseño > Elementos de Pagina.

3. Da Click Añadir un Gadget y selecciona 'HTML/Javascript

4.Ahora pega el codigo de abajo

<style> .bcb_bloquemenu{ font: bold 14px Germand; width: 190px; /* width of menu */ } .bcb_bloquemenu ul{ border: 1px solid #eee; padding: 0; margin: 0; list-style: none; } .bcb_bloquemenu ul li{ margin:0; padding:0; } .bcb_bloquemenu ul li a{ display:block; text-transform: uppercase; color: #494949; padding: 10px 15px; text-decoration: none; border-bottom: 1px solid #cacaca; border-right: 1px solid #cacaca; /*right border between menu items*/ -moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */ -webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */ -moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */ -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .bcb_bloquemenu ul li a:hover, .bcb_bloquemenu ul li a.selected{ color: black; -moz-box-shadow: inset 7px 0 10px rgba(127,255,0, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(127,255,0, 0.8); /* Add 3 inset shadows to each menu item */ -webkit-box-shadow: inset 7px 0 10px rgba(127,255,0, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(127,255,0, 0.8); box-shadow: inset 7px 0 10px rgba(127,255,0, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(127,255,0, 0.8); } </style> <div class="bcb_bloquemenu"> <ul> <li><a href="#">Pagina Principal</a></li> <li><a href="#">Tutoriales</a></li> <li><a href="#">Categoria</a></li> <li><a href="#">Descargas</a></li> <li><a href="#">Sobre Autor</a></li> <li><a href="http://www.ciudadblogger.info/">Contactame</a></li> </ul> </div>

Reemplace # con las URLs.

5. Ahora guarda tu HTML/Javascript'.

   Ahora tendras un lindo y atractivo menu vertical para tus visitantes..

Chequea Como Añadir Menu Iluminado a tu Blog

Read More