Menú desplegable para blogger con imágenes
Es tiempo de compartir con todos los
bloggeros del mundo un fabuloso menú desplegable para blogger con imágenes. Este
truco para blogger es muy fácil de realizarlo solo tienen que seguir mis
instrucciones y podrán tener este espectacular menú desplegable para blogger
con imágenes. Las características de este menú son muy simples, el menú desplegable
le va ha mostrar imágenes al momento que desplieguen cualquier categoría. Este menú
desplegable para blogger con imágenes solo lo podrán utilizar con tres tipos de
URLs, las cuales son, etiquetas, consultas de búsqueda y búsqueda de etiquetas.
A continuación mire su demostración en
mi blog de demos
Les gusto verdad, ahora nos dirigimos a
trabajar
1 Ir a blogger
2 Da un clic en “Plantilla”, luego un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu
plantilla, se mostrara igual como la imagen que esta a continuación
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, a continuación
mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en
tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al
momento que yo diga busca este código.
3 Busca este código
]]></b:skin> y
arriba de el inserta el siguiente código CSS
/* Menu Stylings by
www.ayudadeblogger.com star www.grupodelecluse.com */
.w2bmenu *{margin:
0;padding: 0;}
ul.w2bmenu {list-style:
none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin:
0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style:
none;position:relative;float: left;margin: 0 !important;padding: 0
!important;}
ul.w2bmenu li a{margin:
0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial,
Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px
0 #fff;font-weight: 700 !important;text-transform: uppercase
!important;font-size: 12px !important;display: block !important;border: 0
none !important;}
ul.w2bmenu li
a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position:
absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover >
ul{display: block;}
ul.w2bmenu ul li{float:
none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li
a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li
a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display:
none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li
div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left:
-1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px
solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover
div.submenu {display: block;}
ul.w2bajaxmenu ul
,ul.w2bajaxmenu ul li{display: block !important;border: 0 none
!important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul
li{background: none !important;float: none !important;}
ul.w2bajaxmenu
ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom:
0;background: #f5f5f5;}
ul.w2bajaxmenu
ul.postslist {position: relative;display: block;width:65%;float:
right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu
ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee
solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px
!important;}
ul.w2bajaxmenu
ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu
ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width:
100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size:
0;line-height: 0;}
ul.w2bajaxmenu
ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width:
100px;height: 100px;display: block;}
ul.w2bajaxmenu
ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu
.loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0
transparent;width:22px;height:22px;position: absolute;top:50%;margin-top:
-11px;right:5px;}
ul.w2bajaxmenu .menuArrow
{border-bottom: 4px solid transparent;border-top: 4px solid
transparent;border-left: 4px solid #999999;display: block;height:
0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background:
#ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0
100%);background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background:
-webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background:
-o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background:
-ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background:
linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed',
endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;
|
4 Luego deberás encontrar este otro código
</head>,
recuerda que el código que vas a insertar es un código javascript y si ya lo
tienes en tu blog, ya no es necesario ponerlo, ya que crearía conflictos, y si
no lo tienes instalado tendrás que insertarlo arriba del </head>
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'
type='text/javascript'/>
|
5 También deberás colocar las siguientes
líneas de código antes de
</head>
<script
src='https://dl.dropboxusercontent.com/s/ysjbhuo6a0lup4z/bloggermenu.js'
type='text/javascript'/>
<script
type='text/javascript'>
jQuery(document).ready(function($)
{
$('#w2bajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg :
'http://url-to-image.com/default-image.jpeg' // Default
thumbnail Image
});
});
</script>
|
Ahora dale un clic en “Guardar plantilla”.
6 Da un clic en “Diseño” y abre un nuevo
widget “HTML/Javascript” e inserta en su interior el siguiente código. El código
que vas a insertar en tu nuevo widget tendrás que insertarlo con mucho cuidado
y realizar algunos cambios, y si no es así, no te funcionara correctamente.
<ul
id="w2bajaxmenu" class="w2bmenu">
<li>
<a
href="#">Inicio</a>
</li>
<li>
<a
href="#">Ejemplo 1</a>
<ul>
<li><a
href="http://www.ayudadeblogger.com/search/label/Plantillas">Plantillas</a></li>
<li><a
href="http://www.ayudadeblogger.com/search/label/Slideshow">Slideshow
Blogger</a></li>
<li><a href="http://www.ayudadeblogger.com/search/label/Trucos%20Blogger">Trucos Blogger</a></li>
<li><a href="http://www.ayudadeblogger.com/search/label/Trucos%20CSS%20y%20HTML">Trucos CSS</a>
</li></ul>
</li>
<li>
<a href="#">Ejemplo
2</a>
<ul>
<li><a
href="http://tublogdireccion.blogspot.com/search/label/Design">Nombre 1</a></li>
<li><a
href="http://tublogdireccion.blogspot.com/search/label/Facebook?q=Like+Button">Nombre 2</a></li>
<li><a
href="http://tublogdireccion.blogspot.com/search/label/Templates">Nombre 3</a></li>
<li><a
href="http://tublogdireccion.blogspot.com/search?q=Guest+Posts">Nombre 4</a></li>
</ul>
</li>
<li><a href="http://tublogdireccion.blogspot.com">Link Normal</a></li>
</ul>
|
Realiza estos cambios:
Los links que esta marcados de color
azul, deberás sustituirlos por el link de cualquiera de tus etiquetas.
Las letras que están marcadas de color
rojo, deberás cambiarlas por los nombres que tu quieras, eso es todo.
Dale un clic en “Guardar” y mira tu
nuevo menú desplegable para blogger con imágenes incluidas.
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
16 comentarios: