La barra de menús de navegación es una parte importante de cada blog y página web. Donde los visitantes pueden navegar por las páginas de blogs y mensajes. Por lo que esta más necesario para que sea atractivo y fácil de usar. Si ya tienes esta función, entonces es correcto. Si tu blog blogger falta de esta característica, a continuación, debes seguir este tutorial.
- Ingresa a tu plantilla Blogger
- Busca </header>
- Justo debajo de coloca el siguiente código CSS
<style>
#bt_tabmenu {font-family:arial;font-size:16px;line-height:1.8em;background:#333;
display:table;padding:0;margin:1em auto;border-spacing:0;padding:0.5em;
border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999;
white-space:nowrap;}
#bt_tabmenu li p {border-radius: 0.5em 0.5em 0 0 ; }
#bt_tabmenu li ul li:last-child a {border-radius: 0 0 0.5em 0.5em ;}
#bt_tabmenu ul {display:table;margin:0;padding:0;position:absolute;
left:-9999px;z-index:1;top:1.6em;}
#bt_tabmenu > li {display:inline-block;width:150px;vertical-align:top;position:relative;white-space:normal;}
#bt_tabmenu ul li {float:right;list-style-type:none;clear:right;height:1.6em;}
#bt_tabmenu li a , #bt_tabmenu p {border:solid 1px #333;background-color:gray;background-image:linear-gradient(90deg,#aaa,#eee);
display:block;width:150px;text-indent:1em;margin:0;outline:0;text-decoration:none;color:#333;}
#bt_tabmenu li a {box-shadow: 0px 3px 10px -5px black;float:right;}
#bt_tabmenu p {position:relative;height:1.6em;}
#bt_tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}
#bt_tabmenu p:focus:after {content:'';}
#bt_tabmenu p a {display:inline;position:absolute;border:0;left:-9999px;background:transparent;
color:#E68F28;text-shadow:0 0 1px black,0 0 2px white;text-decoration:none;text-align:right;width:auto;
padding-right:5px;}
#bt_tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}
#bt_tabmenu ul a:focus , #bt_tabmenu p:focus + ul li a {margin-left:9999px;}
#bt_tabmenu a:focus:before {content:'\25BA';margin-left:-1em;color:#E9CF5F;}
:focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}
[tabindex] {cursor:pointer;}
#bt_tabmenu ul ul{left:150px;position:relative;top:-1.95em;width:150px;display:table;margin:0 0 0 -9999px;z-index:1;}
#bt_tabmenu ul ul a {margin-left:-9999px;}
#bt_tabmenu ul ul li a:focus {margin-left:19998px;}
#bt_tabmenu ul ul li:first-child a {border-radius:0 0.5em 0 0 ;}
#bt_tabmenu ul li a:focus.fermoir + ul {
margin-left:10001px;}
#bt_tabmenu ul li .fermoir {position:absolute;z-index:1;right:1px;margin-top:1px;border:0;width:auto;background:none;box-shadow:none;
padding: 0 5px 0 20px;text-indent:0;line-height:1.4em;}
.fermoir:before {display:none;}
#bt_tabmenu ul li .fermoir:focus , p#bt_tabmenu {color:white;}
</style>
<div id="bt_tabmenu">
<li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title=""# class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><p tabindex="0" onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">►</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><p tabindex="0" onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">►</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
</div>
Author : Bloguero Tutorial
Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. ,
click aquí ?
CSS atractivo menú desplegable para Blogger 004.
Tu mensaje sera visible tras la aprobación del administrador