Widget Acordeón para Blogger V3
La disponibilidad de trucos para Blogger
es la mejor opción al momento de darle nuevos estilos a nuestro blog de Blogger.
El día de hoy aprenderán a realizar un truco muy importante para muchos
bloggers que necesitan un widget acordeón y mostrarlo en el sidebar de Blogger,
el cual ahorrara espacio en su blog. No vamos a instalar ningún código en el
Editor HTML de nuestra plantilla, solo vamos a copiar un código directamente en
un widget, realizaremos varios cambios y luego lo ubicaremos en el sidebar de
nuestro blog de Blogger o donde a ustedes mejor les parezca. Lo que va a
realizar nuestro widget acordeón es mostrar los títulos de nuestras categorías principales,
al dar un clic en cualquier categoría se desplegara hacia abajo los temas
interesantes que quieran dar a conocer, así los usuarios que visitan sus blogs podrán
tener una mejor percepción de lo que contiene su página, creando un nuevo
trafico gracias a los nuevos puestos creados. Este nuevo widget acordeón para Blogger
funciona perfectamente en todos los navegadores web como Firefox, Internet Explorer,
Google Chrome etc.
Tutorial Blogger
Además, anteriormente di a conocer dos
tipos diferentes de widgets acordeón para Blogger de los cuales les dejo los
enlaces:
A continuación mire su demostración en
mi blog de demos, el widget acordeón está ubicado en el sidebar y tiene como
nombre “Widget Acordeón Blogger”
Les gusto verdad!
Vamos a trabajar
1 Ir a Blogger
2 Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript”
ábrelo
5 Ingresa las siguientes líneas de código
en su interior
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script
type="text/javascript" >$(document).ready(function(){
$('li.title a').click(function(e){
var dropDown = $(this).parent().next();
$('.downlistie').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});</script>
<style>
ul.container{
width:285px;
padding:5px;
}
li.accoi-menu{
list-style:none;
padding:1px;
width:100%;}
li.title
{
border-radius:5px;
background:#6F6D6D;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
display:block;
padding:5px;
font:14px georgia, verdana;
overflow:hidden;
position:relative;
width:100%;
text-decoration:none;
}
.downlistie{
list-style:none;
display:none;
padding-top:5px;
width:100%;
}
.downlistie li{
list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
margin:5px ;
padding:4px 10px;
}
.downlistie li:hover {
background:blue;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#6F6D6D;
}
.downlistie li a:hover {
text-decoration:none;
color:#6F6D6D;
}
</style>
<ul class="container">
<li
class="accoi-menu">
<ul>
<li
class="title"><a href="#" >Blogger</a></li>
<li
class="downlistie">
<ul>
<li><a href="#" >Plantillas</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Slideshow</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li
class="title"><a href="#" >Tutoriales</a></li>
<li
class="downlistie">
<ul>
<li><a href="#"
>Temas</a></li>
<li><a href="#">Plantillas</a></li>
<li><a href="#">Alojamiento</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li
class="title"><a href="#" >SEO y Marketing</a></li>
<li
class="downlistie">
<ul>
<li><a href="#"
>SEO</a></li>
<li><a href="#">Seguridad</a></li>
<li><a href="#">Estrategias</a></li>
<li><a href="#">Diseño</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li
class="title"><a href="#" >Diseño web</a></li>
<li
class="downlistie">
<ul>
<li><a href="#"
>Paginas</a></li>
<li><a href="#">Diseño</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Widgets Blogger</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li
class="title"><a href="#" >Contactos</a></li>
<li
class="downlistie">
<ul>
<li><a href="#"
>Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">Pinterest</a></li>
</ul></li></ul></li>
</ul>
|
Realiza estos cambios:
Nota: Si ya utilizas un script jQuery en
tu blog ya no necesitaras insertar solo esta línea de código http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
y si no utilizas ningún script jQuery inserta todo el código tal como está en
este tutorial.
He marcado de tres diferentes colores en
los cuales ustedes tendrán que realizar sus diferentes cambios
Los símbolos numerales que están marcados
de color azul #, tienes que borrarlos y poner ahí
las direcciones URLs de sus post.
Cambia los nombres que están marcados de
color rojo, por el nombre de la categoría que tú quieras.
Y por último borra los nombres que están
marcadas de color verde y remplázalos por los nombres que quieras dar a conocer.
Eso es todo, ahora es momento de dar un
clic en “Guardar” y ubica tu nuevo widget acordeón en el sidebar de tu blog de Blogger
Fácil verdad!
Suscríbete y recibirás mis nuevas
actualizaciones directamente en tu correo electrónico
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
3 comentarios: