Añade Menu Marcador Flotante A Tu Blog

 En esta ocasion te mostrare el super truco para insertar un menu de marcador atractivo flotante para tu blog de blogger.
Este widget Incluye atractivos iconos dentro del mismo.Este menú flotante aparecerá en cada entrada de tu blog.Asi,los visitantes siempre accederan al mismo facilmente.Asi este truco ayudara a que mas visitantes te enlacen con Facebook, Twitter, y  RSS.Este truco se puede anadir a tu blog siguiendo estos simples pasos.

Demostracion: Da Clic En Imagen Abajo

Pasos Insertar este widget a tu blog de blogger.

1. Entrar a la cuenta de blogger e Ir a Diseño >> Edición de HTML
     (asegúrese de hacer una copia de seguridad de la plantilla primero)

2. Encuentre esta etiqueta ]]> </ b: skin> usando Ctrl + F

3. Pegue el código de abajo antes de ]]> </ b: skin>

.bt-wdt{
 position: fixed;
 right: 10px;
 top: 43%;
}

.bt2-wdt{
 position: fixed;
 right: 30px;
 bottom: 22%;
}

.bt-wdt img{
 float: right;
 clear: right;
 margin: 5px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
.bt-wdt img:hover{
 -moz-transform: scale(1.2) rotate(6deg);
 -webkit-transform: scale(1.2) rotate(6deg);
 -o-transform: scale(1.2) rotate(6deg);
 -ms-transform: scale(1.2) rotate(6deg);
 transform: scale(1.2) rotate(6deg);
}

4. Ahora vaya a Diseno >>Elemento de Pagina

5. Haga clic en Agregar un Gadget y seleccione "HTML / Javascript"

6. Pegue el código siguiente.

!-- www.ciudadblogger -->
<div class="bt-wdt">
 <!-- Facebook -->
 <a href="http://www.facebook.com/Nombre-Pagina" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbugsY-p23kWxCggc3Do-a24SnPoAC9xngKs41KiTGMidU3Z58xTo20iBBC_ma23oUVv47NLIpYRlE2gtVZfMVgP-GhC4g4TWWV85as3e-qyv_X_aipBlYnx5tDZIwA9gdpOtTY95fo90P/s1600/inside-facebook-icon.png" /></a>
 <!-- Twitter -->
 <a href="http://twitter.com/Nombre de Usuario" title="Follow me on Twitter" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyCRQan04hcQlxz8Rafz8LgV-OwV_JamLNJQ6hO_rW0DWuQuxaSzp9fmLaoWQQLr_31Ci2D0O4rPl3rgUB2Ts5TTA1wHG29TmuBjieUMS9SKlWsT4sTDjXZQFJB-JCq3_B576GwrhHJCPd/s320/inside-twitter-icon.png" /></a>
 <!-- RSS -->
 <a href="http://feeds.feedburner.com/Direccion del Feed" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2gRjh4fn6dtZ5kd178S2cLsnyjbSHceBpy9UbRr6K1__zyZ3R2Eu0sh-Yx1gMNIkyX2wVhidwBQhxw4hqPz3eZKUNvtpbNHF9wMa0dcThs-uPDB77pD0nVYLnzm5EVAT2tWICuLnA2mq1/s1600/inside-rss-icon.png" /></a>
</div><div class="bt2-wdt"><a style=" font-size:9px; color:#3B78CD; text-decoration:none;"href="http://www.bloggertrix.com/2012/05/how-to-add-smooth-jquery-facebook-like.html"> Get This</a>
</div>
<!-- End -->

*Reemplace Nombre Pagina por el nombre tu pagina de Facebook
*Reemplace Nombre de Usuario por el nombre de tu Twitter
*Reemplace Direccion del Feed por la direccion de tu feedburner .

7. Guarda tu Plantilla
 Esteb truco de blog esta listo.

Read More

Añadir Css Menu Desplegable A Tu Blog

El Menu desplegable que compartire esta hecho de puro CSS y HTML, y por que buscar scripts y jquery cuando puedes jugar con CSS y HTML para blog de blogger., Este consiste de dos estructuras, el CSS y la HTML y no afectara e ltiempo de carga de tu pagina.


Ver Ejemplo:

Añadiendo el menu desplegable

Paso 1

• Entra en blogger
• DaClick en"Diseño" > "Editar HTML" > Haga Copia de Tu Plantilla
• Use ctrl F para encontrar ]]></b:skin> y pegue el codigo de abajo

/* CSS3 Menu Desplegable Por Ciudadblogger.info */
#nav {
 float: left;
 font: bold 12px Arial, Helvetica, Sans-serif;
 border: 1px solid #121314;
 border-top: 1px solid #2b2e30;
 overflow: hidden;
 width: 100%;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}

#nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

#nav ul li {
 float: left;
}

#nav ul li a {
 float: left;
 color: #d4d4d4;
 padding: 10px 20px;
 text-decoration: none;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
 border-left: 1px solid rgba(255, 255, 255, 0.05);
 border-right: 1px solid rgba(0,0,0,0.2);
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
/* CSS3  Menu Desplegable Por Ciudadblogger.info */
#nav ul li a:hover,
#nav ul li:hover > a {
 color: #252525;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover,
#nav ul li li:hover > a {
 color: #2c2c2c;
 background: #5C9ACD;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 border-bottom: 1px solid rgba(0,0,0,0.6);
 border-top: 1px solid #7BAED9;
 text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
/* CSS3Menu Desplegable Por Ciudadblogger.info */
#nav li ul {
 background: #3C4042;
 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 left: -999em;
 margin: 35px 0 0;
 position: absolute;
 width: 160px;
 z-index: 9999;
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
 left: auto;
}

#nav li ul a {
 background: none;
 border: 0 none;
 margin-right: 0;
 width: 120px;
 box-shadow: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 border-bottom: 1px solid transparent;
 border-top: 1px solid transparent;
}

.nav ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.nav ul li ul li {
    display: list-item;
    float: none;
}

.nav ul li ul li ul {
    top: 0;
}

.nav ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

#nav li li ul {
 margin: -1px 0 0 160px;
 visibility: hidden;
}

#nav li li:hover ul {
 visibility: visible;
}
/* CSS3 Menu Desplegable Por Ciudadblogger.info */

• Da Click "Guardar Plantilla"

Paso 2

Ahora añadiremos el codigo Html

• Da Click en "Elemento de Pagina" > "Añadir un Gadget"
• Seleccione "HTML/JavaScript" y copie el codigo de abajo en cuadro de contenido dejando el espacio de titulo en blanco

<div id="nav">
 <ul>
  <li><a href="#">PaginaPrincipal</a></li>
  <li><a href="#">Contactenos</a></li>
  <li><a href="#">Sobre Autor</a></li>
  <li><a href="#">Tutoriales</a></li>
  <li><a href="#">Mapa deSitio</a></li>
  <li><a href="#">Servicios</a>
  <ul>
   <li><a href="#">Sub Pagina #1</a></li>
   <li><a href="#">Sub Pagina #2</a></li>
   <li><a href="#">Sub Pagina #3</a></li>
   <li><a href="#">Sub Pagina #4</a></li>
   <li><a href="#">Sub Pagina #5</a></li>
  </ul>
  </li>
  <li><a href="#">Crea Esto</a></li>
 </ul>
</div>

• Reemplace # con una url en tu menu
• Reemplace toda palabra sombreadas en verde       con titulo de tu menu

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

Menu Deslizable Para Barra Del Lado de Blogger

Mostar-esconder, menu deslizable y sexy. Menu bar con javascript y mootools. Este articulo explica como anadir  un Menu deslizable, Sexy con JavaScript en la barra del lado Este  Menu usa la aplicacion de Mootools en el  blog que luce bien en el blog de blogspot .Para ser efectivos con CSS un menu vertical que muestra/esconde usa  MooTools para mostrar / esconder el menu con despliegue vertical agradable efecto.

  MooTools: "MooTools es un compacto, modular, Object-Orientado del framework de JavaScript  disenado para mediano y avanzado desarroladores de JavaScript .TE permite escribir poderoso, flexible,codigo de navegacion cruzada con elegante API, bien  documentado y consistente. ".
MooTools Home: Home Mootools.

 Instalar un Menu deslizable bello con JavaScript en la barra de lado con MooTool,


Vamos a anadirlo

Paso 1. Entra a tu cuenta de Blogger .ve a la interface de Blogger y da.Click en(Diseno) del panel de la izquierda y de clicken el enlace de Anadir un  Gadget .

Paso 2. Despues de dar click en Anadir un Gadget  Un cuatro se abrira mostrando una lista de gadget, escoja HTML/JavaScript de la opcion de gadgets dando click a la cruz azul de anadir para ese gadget.

Paso 3. Selecciona 'HTML/Javascript' y anade el codigo de abajo

Step 4. Despues de anadir el codigo da Clicken guardar 'JavaScript' y listo..

<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/prototype.js" type="text/javascript"></script>
<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/effects.js" type="text/javascript"></script>
<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/side-bar.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0HIQYykeuzAfLwf1dFznwHV0nw2wWF4Mh5oEOIUKHlIkzb87ArNv6ysz_0JAlZEz7Y7t6z-rjI2c_tgH8G0zSwN8j8Wm5iKUswtL3u-JUw2YUOB-3d4Rn-F3Qlujr5mQA3CWTIeTCRAZ8/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3oIZiRThK6eu5krlWSiXH7zHq0f2VdpMpGfAZ3FisY26BBd2-TI4Ig0c-9Y1Vr-CqKn9wInMCJa_iiVBh9tThQiZF_3YLzsy-CBdb2k2mpphs6aBCw4bq3ZCB7AiTqYg4lK8BBDX4Inub/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>

y ahora da click Guardar



Nota:Tenga en mente antes de guardar las "#" de tus link(enlaces)( Link 1, Link 2 Link 3 Link 4), cambiarlos porla Url  a donde dirigiras  el enlace.Puedes anadir hasta 10 enlaces.

Read More