¿Les gustó? Bueno, entonces vamos a nuestra plantilla y pegamos el siguiente código antes de
]]></b:skin>
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Busca el siguiente código
]]></b:skin>
Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste
ul#blmenudeslizante {
position: fixed;
margin: 0px;
padding: 0px;
top: 55%;
left: -2px;
list-style: none;
z-index:9999;
}
ul#blmenudeslizante li a {
background-color: #878787;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #afafaf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 12px;
-webkit-border-top-right-radius: 12px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
opacity: 0.9
text-align: right;
height:40px;
padding-top: 20%;
padding-left: 4px;
padding-right: 4px;
margin-right:-5px;
width:100px;
display:block;
font-size: 18px;
color: #ffffff;
}
ul#blmenudeslizante li {
width: 90px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 0;
text-indent: 18px;
}
ul#blmenudeslizante li a:hover {
text-decoration: none;
color: #815683;
font-weight:bold;
font-style:italic;
}
position: fixed;
margin: 0px;
padding: 0px;
top: 55%;
left: -2px;
list-style: none;
z-index:9999;
}
ul#blmenudeslizante li a {
background-color: #878787;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #afafaf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 12px;
-webkit-border-top-right-radius: 12px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
opacity: 0.9
text-align: right;
height:40px;
padding-top: 20%;
padding-left: 4px;
padding-right: 4px;
margin-right:-5px;
width:100px;
display:block;
font-size: 18px;
color: #ffffff;
}
ul#blmenudeslizante li {
width: 90px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 0;
text-indent: 18px;
}
ul#blmenudeslizante li a:hover {
text-decoration: none;
color: #815683;
font-weight:bold;
font-style:italic;
}
Ahora buscamos la etiqueta </head> y pegamos lo siguiente antes de dicha etiqueta:
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Busca el siguiente código
</head>
Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('#blmenudeslizante a').stop().animate({'marginLeft':'-70px'},1000);
$('#blmenudeslizante > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},400);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-70px'},400);
}
);
});
</script>
<script type='text/javascript'>
$(function() {
$('#blmenudeslizante a').stop().animate({'marginLeft':'-70px'},1000);
$('#blmenudeslizante > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},400);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-70px'},400);
}
);
});
</script>
isto ahora nos queda agregar el html. Entonces abrimos un gadget HTML/Javascript y volcamos el siguiente código dentro de él:
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente código en el interior
<ul id="blmenudeslizante">
<li class="blink"><a href="https://URL DEL ENLACE">Home</a></li>
<li class="blink"><a href="https://URL DEL ENLACE">Facebook</a></li>
<li class="blink"><a href="https://URL DEL ENLACE">Twitter</a></li>
<li class="blink"><a href="https://URL DEL ENLACE">Google+</a></li>
</ul>
<li class="blink"><a href="https://URL DEL ENLACE">Home</a></li>
<li class="blink"><a href="https://URL DEL ENLACE">Facebook</a></li>
<li class="blink"><a href="https://URL DEL ENLACE">Twitter</a></li>
<li class="blink"><a href="https://URL DEL ENLACE">Google+</a></li>
</ul>
Ahora reempalzamos lo que está en negrita URL del enlace al que va a conducir el casillero y lo que está en azul por el nombre que va a llevar esa opción.
Donde pone Backgroun:#878787 es el color de fondo de las pestañas, puedes ponerle el color que gustes; top: 55% es la distancia del contenedor para que permanezca fijo abajo, si lo quieres arriba solo cambia 55% por 0px hasta que quede a la altura que quieras. En color:#ffffff es el color del texto (está blanco) cámbialo al color que gustes, en color:#815683 es el color del texto (morado) cuando se pone el cursor.
Es decisión tuya el color que le pongas.
Despues de haber insertado el código, un clic en "Guardar"
Fuente; hogarblogger
Publicado por;
0 comentarios