Añadir Menu Horizontal solo usando Css3 a blogger

Es importante que cada blog/website tenga un menu horizontal/vertical en la parte superior de su blog este ayuda al lector a navegar facilmente tu blog,ayuda ademas a poner en orden los enlaces dentro de tu menu.

Compartire un hermoso menu horizontal el cual funciona con puro codigo de CSS3.Cuando el usuario pone el cursor sobre este un nuevo color aparece en el enlace lo que le da resalte o belleza al menu.
Como trabaja solo con CSS3 este tiene sus limitaciones pero aun asi es bueno para aquellos pequenos blogs que no tengan muchos enlaces.Mira el ejemplo a continuacion.

• PaginaPrincipal
• CSS
• Foros
• JavaScript
• Galeria

Como Añadir este  Menu a Blogger?

1. Entra en cuenta de  > Diseño
2. Da Click en Añadir un Gadget
3. Pegue el codigo de abajo y da a boton de Guardar.

<style type="text/css">

/* Solo CSS3 Horizontal Menu para Blogger por http://www.ciudadblogger.info/ */

div.topbar {
 height: 16px;
 background: #565605;
}

ul.claybricks {
 font-weight: bold;
 width: 100%;
 background: #DFDF18;
 padding: 6px 0 6px 0;
 margin: 0;
 text-align: left;
        font-family: ariel;
}

ul.claybricks li {
 display: inline;
}

ul.claybricks li a {
 color: black;
 padding: 6px 8px 4px 8px;
 margin-right: 20px;
 text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected {
 color: white;
 background:#DFDF18;
 background: -moz-linear-gradient(top, #565605 0%, #565605 10%, #565605 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F91C), color-stop(12%,#F9F91C), color-stop(100%,#2349E2));
 background: -webkit-linear-gradient(top, #E48A8A 0%,#41251b 12%,#2349E2 100%);
 background: -o-linear-gradient(top, #E48A8A 0%,#41251b 12%,#2349E2 100%);
 background: -ms-linear-gradient(top, #E48A8A 0%,#41251b 12%,#2349E2 100%);
 background: linear-gradient(top, #E48A8A 0%,#41251b 12%,#2349E2 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E48A8A', endColorstr='#2349E2',GradientType=0 );
 -moz-box-shadow: 0 0 5px #E23323;
 -webkit-box-shadow: 0 0 5px #E23323;
 box-shadow: 0 0 5px #E23323;
 padding-top: 17px;
 padding-bottom: 6px;
}

/* Solo CSS3 Horizontal Menu para Blogger por http://www.ciudadblogger.info/ */

</style>

       <div class="topbar">
</div>
<ul class="claybricks">
 <li><a href="http://www.ciudadblogger.info/">Home</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">Foros</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">Galeria</a></li>
 <li><a href="http://www.ciudadblogger.info/"> Widgets</a></li>
</ul>

Para finalizar reemplace los enlaces y nombre de enlace con los tuyos de las lineas sombreadas en azul de arriba.

Finalmente guarda tu Html/Javascript y ahora tus lectores disfrutaran de un menu atractivo y facil de acceder.

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

Menu Horizontal Para Blog En 3D

 
Existen un sinnumero de menu desplazables para  blogger, hoy compartire un menu horizontal de los mejores navegadores que jamas hayas visto. Este se fija bien en la plantilla de blogspot y no requiere ni jQuery o JavaScript, solo puro CSS y HTML. Este tiene un efecto de 3D al poner el cursor da la vuelta.

Ejemplo:

• Home HomeHome
• AboutAboutAbout
• Services ServicesServices
• Blogging BloggingBlogging

Como Anadirlo a Blogger

Anadiendo el Codigo CSS

• Entra en la Interface de Blogger
• Da Click en Plantilla > Edite HTML > Proceda
• Busca la siguiente etiqueta ]]></b:skin> y pegue el codigo de abajo sobre esta.

/* 3d Flipping Menu por Ciudadblogger.info */
        .block-menu {
            display: block;
            background: #000;
        }

        .block-menu li {
            display: inline-block;
        }

        .block-menu li a {
            color: #fff;
            display: block;
            text-decoration: none;
            font-family: 'Passion One',Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 24px;
            padding: 15px 10px;
        }

        /* animation domination */
        .three-d {
            -webkit-perspective: 200px;
            -moz-perspective: 200px;
            perspective: 200px;
            -webkit-transition: all .07s linear;
            -moz-transition: all .07s linear;
            transition: all .07s linear;
            position: relative;
        }

            .three-d:not(.active):hover {
                cursor: pointer;
            }

            .three-d:not(.active):hover .three-d-box,
            .three-d:not(.active):focus .three-d-box {
                -moz-transform: translateZ(-25px) rotateX(90deg);
                -webkit-transform: translateZ(-25px) rotateX(90deg);
                -o-transform: translateZ(-25px) rotateX(90deg);
                transform: translateZ(-25px) rotateX(90deg);
            }

        .three-d-box {
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -ms-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;
            -webkit-transform: translatez(-25px);
            -moz-transform: translatez(-25px);
            -o-transform: translatez(-25px);
            transform: translatez(-25px);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .front {
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);
        }

        .back {
            -webkit-transform: rotatex(-90deg) translatez(25px);
            -moz-transform: rotatex(-90deg) translatez(25px);
            -o-transform: rotatex(-90deg) translatez(25px);
            transform: rotatex(-90deg) translatez(25px);
            color: #FFE7C4;
        }

        .front, .back {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

Guarda tu plantilla.


 Anadiendo el Codigo HTML

• Entra en Diseno > Anadir un Gadget (debajo de la seccion de encabezado)
• Escoja HTML/JavaScript y pegue el siguiente codigo.

<ul class="block-menu">
<li><a href="#" class="three-d">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
About<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
<li><a href="#" class="three-d">
Services
<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
</a></li>
<li><a href="#" class="three-d">
Blogging
<span class="three-d-box"><span class="front">Blogging</span><span class="back">Blogging</span></span>
</a></li>
<li><a href="#" class="three-d">
Create this
<span class="three-d-box"><span class="front">Create this</span><span class="back">Create this</span></span>
</a></li>
</ul>

• Edite las partes con las sombras  a tu manera
• Guarda este widget y Listo!

Read More