add

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:

  1. Widget Acordeón para blogger
  2. Widget Acordeón para blogger V2
Widget Acordeón para Blogger V3

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

Widget Acordeón para Blogger V3

3 Abre un gadget “Añadir un gadget

Widget Acordeón para Blogger V3

4 Busca el widget que dice “HTML/Javascript” ábrelo

Widget Acordeón para Blogger V3

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

2 comentarios:

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios