Quitar el mensaje "Mostrando entradas con la etiqueta..."

Cuando se está buscando una entrada dentro del blog y usamos las etiquetas para localizarla, aparece un recuadro con el mensaje, que puede ser muy molesto para la mayoría de nosotros, aca esta la solución para poder quitar ese molesto mensaje, solo sigan los siguiente pasos:

Entra a Plantilla | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca este código:

<b:include data='top' name='status-message'/>

Y de esta manera desaparecerá ese mensaje.

ENTRADA

Menú Horizontal Desplegable Personalizado para blogger

En este post les traigo un tutorial donde les voy a enseñar a conseguir un menú desplegable para su blog donde podrán ustedes mismos personalizarlo a su gusto  con unos simples pasos que deberán seguir al pie de la letra, Recuerda siempre que antes de empezar a hacer cambios es recomendable que hagas una copia de seguridad de tu blog.

Hacer un menú desplegable en blogger es muy sencillo, empezamos por dirifirnos a nuestro blog Diseño/Multicolumnas/Javascript y agregan el siguiente codigo:

<div id='NavMenu'>

<div id='NavMenuleft'>

<ul id='nav'>

<li><a href='#'>Menu</a></li>

<li><a href='#'>Menu2</a></li>

<li><a href='#'>Menu2</a></li>

<li>

<a href=’#’>Menu desplegable 1</a>

<ul>

<li><a href=’#‘>submenu 1</a></li>

<li><a href=’#’>submenu 2</a></li>

<li><a href=’#’>submenu 3</a></li>

</ul>

</li>

<li>

<a href=’#’>Menu desplegable 1</a>

<ul>

<li><a href=’#‘>submenu 1</a></li>

<li><a href=’#’>submenu 2</a></li>

<li><a href=’#’>submenu 3</a></li>

</ul>

</li>

</ul></div></div> 

Acá podrán codificarlo, confirme a sus necesidades, <a href=’#‘>: tienes que cambiar el símbolo de la # por la url o dirección web a la que quieres que vaya el enlace (ojo con las comillas no las borres sin querer la url tiene que ir entre las comillas, sólo tienes que sustituir la #, ejemplo: si tengo <a href=’#‘>  colocar su enlace de esta manera <a href=’https://adblogers.blogspot.pe/‘>

Al terminar, se dirigen  Plantilla/Personalizar/Avanzado/Añadir CSS y copiar y pegar el siguiente código:

/* Menu desplegable—————- */

.tabs-inner .section:first-child ul { margin-top: 0px;}

.tabs-inner .widget ul {text-align: center !important;}/*Posición del texto del menu*/

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

color: #fff; /*Color del texto de las pestañas al pasar el ratón por encima*/

background-color: #356B8E; /*Color del fondo de las pestañas al pasar el ratón por encima*/

text-decoration: none;

}

.tabs .widget li, .tabs .widget li{ display: inline; float: none;}

#NavMenu {

position: relative;

margin: 0 auto;

padding: 0;

}

#NavMenuleft {

width: 1280px; /*Ancho del menú*/

float: none;

margin: 0 auto;

padding: 0;

}

#nav {margin: 0 auto; padding: 0; background:#25475D;}/*Color del fondo del menu*/

#nav ul {

float: none;

list-style: none;

margin: 0;

padding: 0;

overflow: visible;

}

#nav li a, #nav li a:link, #nav li a:visited {

font: normal 17px Arial; /*Tamaño y tipo de fuente de las pestañas */

color: #fff; /*Color del texto de las pestañas*/

display: block;

margin: 0;

padding: 10px 15px 10px;

}

#nav li a:hover, #nav li a:active {

color: #fff; /*Color del texto de las pestañas al pasar el ratón por encima*/

margin: 0;

padding: 10px 15px 10px;

text-decoration: none;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

font: normal 17px Arial; /*Tamaño y tipo de fuente de los submenus*/

background: #FC900D; /*Color del fondo de las subpestañas*/

width: 150px; /*Ancho de los submenus*/

color: #fff; /*Color del texto de los submenus*/

float: none;

margin: 0;

padding: 7px 10px;

}

#nav li li a:hover, #nav li li a:active {

background: #FC900D; /*Color del fondo de los submenus al pasar el ratón por encima*/

color: #fff; /*Color del texto de los submenus al pasar el ratón por encima*/

padding: 7px 10px;

}

#nav li {

float: none;

display: inline-block;

list-style: none;

margin: 0;

padding: 0;

}

*{

border-radius:none;

}

#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }

#nav li ul a { width: 140px; }

#nav li ul ul { margin: -32px 0 0 171px; }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }

#nav li:hover, #nav li.sfhover {position: static;}

.tabs-outer{overflow: visible;}

.tabs-inner { padding: 0px; } .section { margin: 0px; }

En este código podrán modificarlo a su gusto, si tienen conocimiento sobre CSS podrán hacer muchas cosas para personalizar su menú de forma mas llamativa.

ENTRADA

Menú horizontal con subpestañas y buscador integrado

Si quieres un menú estilo Apple, pero con diseño mas personalizable sigan en esta entrada, lo primero es para Para poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul, 
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT6D-YIg04LxQIYoBm5A0cwK4mRmhaLFAFBduw3ZDlCWwAIwV2gvrvl953w4yZe6zQDswnnNHVeLoV-KeH4flOwuEj9YOhyphenhyphenLYGIZnIHJyIEXd3SsEhV2dY8TUdsBIlw5YazZgXMExlT6ry/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT6D-YIg04LxQIYoBm5A0cwK4mRmhaLFAFBduw3ZDlCWwAIwV2gvrvl953w4yZe6zQDswnnNHVeLoV-KeH4flOwuEj9YOhyphenhyphenLYGIZnIHJyIEXd3SsEhV2dY8TUdsBIlw5YazZgXMExlT6ry/) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search { 
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKH7aXAz8-lA8ya9WmRFnrim-UdR8jYP_zK8HZRYibeWqxIYYSyNyam6WV639wsjvlJLgWm94EobHna_1Mj8LM1Mm55WXG560RL7ihzaPZX9RZkJuJST0iPTHHLYrr1Om9TlpqFYcncis/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Luego entra en Diseño y en un gadget HTML/Javascript pega lo siguiente:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>


<!-- Buscador -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</li>

</ul>
</div>

Guarda los cambios y listo. En color verde puedes ver las áreas para cambiar los colores.

Antes de <!-- Buscador --> puedes agregar más pestañas si lo deseas.
Si quisieras añadir otra pestaña simple, agrega una línea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li> 

Si quisieras agregar una pestaña con subpestañas entonces agrega este código:

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>

Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:

<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Con esta variación del menú podemos agrupar más enlaces y categorías en poco espacio, y que además, al conservar el buscador dentro del menú hace que sea un menú práctico, compacto y útil.

ENTRADA