Excelente Menu Deslizante Expansível no Topo do Blogger

Neste post vou mostrar para vocês como você pode colocar no seu blog um excelente menu deslizante com efeito rotativo nas imagens, semelhante ao que temos aqui no nosso site. Faz algum tempo que utilizo este menu em que neste blog, e eu particularmente gostei bastante, por isso estou aqui compartilhando este excelente menu com você, leitor. Enfim...

                                                                Seguir @DicashotBlogger

Este menu é muito útil para quem não gosta muito de ocupar espaço mais ao mesmo tempo quer mostrar bastante conteúdo. Como você pode ver na imagem abaixo, este menu contém submenus e ainda tem uma caixa de assinar feeds. Muito legal né...!!!

Para colocá-lo no blog é bem simples:

1°Clique em Editar HTML
2° Dê Ctrl + F e procure pela tag ]]></b:skin>

Cole este código ACIMA da tag



/* Bottom Sliding Menu<br /> ----------------------------------------------- */<br /> .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}<br /> .clearfix {display: inline-block;}<br /> * html .clearfix {height: 1%;}<br /> .clearfix {display: block;}<br /> .clearfix {height: 1%;}<br /> .clearfix {display: block;}<br /> <br /> .tab {<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip00DvLERBjRGoZUIMXUDxhhyzDxyZ0uZRJCICbjxec45WWHWlVWnqyg-swsmhdr1HZ9V71UmKzpymaUg2W-pOzw9u8Hx4nCeCH2mYWKdla-CYaGHFrJMWisqOly1bymQnR9jxhBdRwdxi/s42/tab_b.png) repeat-x 0 0;<br /> height: 42px;<br /> position: relative;<br /> top: 0;<br /> z-index: 999;<br /> display:block;<br /> }<br /> .tab ul.login {<br /> display: block;<br /> position: relative;<br /> float: right;<br /> clear: right;<br /> height: 42px;<br /> width: auto;<br /> font-weight: bold;<br /> line-height: 42px;<br /> margin: 0;<br /> right: 150px;<br /> color: white;<br /> font-size: 80%;<br /> text-align: center;<br /> }<br /> .tab ul.login li.left {<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhts0SkzrT6f9qgYTQhdtQYAz4EmoFBH37eFpsJksZ-EXpcqExJQqxxRWt_xlPC6ExUhYA3y46o8ujikSh3H2dbv56i05hGcOFAzjxBKM1hQQHUSekbow9AaYJAl6mVQZPKH-7zWLTwRsQB/s42/tab_l.png) no-repeat left 0;<br /> height: 42px;<br /> width: 30px;<br /> padding: 0;<br /> margin: 0;<br /> display: block;<br /> float: left;<br /> }<br /> .tab ul.login li.right {<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJUjNDy0TkZnyUUMYu3fPdBQ5wqVVeA_wP5kHW1LwFl8y3Ilb9Jk2zEPPMXM-hBzDjYizUnpZYoH_glnZiom44BQQvN6JGEj8k-yYyMiZOMry_NWOemlNadzYLHgVkRLhwtZBHkgm_NJhZ/s42/tab_r.png) no-repeat left 0;<br /> height: 42px;<br /> width: 30px;<br /> padding: 0;<br /> margin: 0;<br /> display: block;<br /> float: left;<br /> }<br /> .tab ul.login li {<br /> text-align: left;<br /> padding: 0 6px;<br /> display: block;<br /> float: left;<br /> height: 42px;<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCUMhCFfv45GgmfZWpVesYPx5RkVC6Ci1fEKP-L1gq6RzWgTe2L4wHa1klySTlPU-NAVR373GIzvnDp_UPJMaIYD5YYqcAoJdpN3bOmSxrr3jZS1LHZRwfQwCoRCdreLelLQt1S7_MzZ18/s42/tab_m.png) repeat-x 0 0;<br /> }<br /> <br /> .tab ul.login li a {color: #15ADFF;}<br /> .tab ul.login li a:hover {color: #FFFFFF;}<br /> .tab .sep {color:#414141}<br /> <br /> .tab a.open, .tab a.close {<br /> height: 20px;<br /> line-height: 20px !important;<br /> padding-left: 30px !important;<br /> cursor: pointer;<br /> display: block;<br /> width: 100px;<br /> position: relative;<br /> top: 11px;<br /> }<br /> <br /> .tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI3JRMxJBlf9FRBX3984eFM9URH41FIqf89hJOVYbhoHLWhdIwX805xvCDQxw9quxLkY7jwZ2iIoJ5K7IfE5eiwAiDpwB7VZc9H8tGA7qT2fn3qC1J7pAy7aVcefzG4TVD-w8jLVBuc7B7/s1600/bt_open.png) no-repeat left 0;}<br /> .tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Qx8nbukVRxhi7QtnpqiAKKLgkDd02w3cEb9AF9OZbwJzE_g-1kApdnvStdFtRNKMTSURPpsVhB3edNxffNfcnoOw84owHbgXVjH7uFGj-rCY-Kg9UhcHehzdFJ-vn0IlvReWerzWgntx/s1600/bt_close.png) no-repeat left 0;}<br /> .tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI3JRMxJBlf9FRBX3984eFM9URH41FIqf89hJOVYbhoHLWhdIwX805xvCDQxw9quxLkY7jwZ2iIoJ5K7IfE5eiwAiDpwB7VZc9H8tGA7qT2fn3qC1J7pAy7aVcefzG4TVD-w8jLVBuc7B7/s1600/bt_open.png) no-repeat left -19px;}<br /> .tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Qx8nbukVRxhi7QtnpqiAKKLgkDd02w3cEb9AF9OZbwJzE_g-1kApdnvStdFtRNKMTSURPpsVhB3edNxffNfcnoOw84owHbgXVjH7uFGj-rCY-Kg9UhcHehzdFJ-vn0IlvReWerzWgntx/s1600/bt_close.png) no-repeat left -19px;}<br /> <br /> #toppanel {<br /> position: fixed;<br /> bottom: 0;<br /> width: 100%;<br /> z-index: 999;<br /> text-align: center;<br /> margin-left: auto;<br /> margin-right: auto;<br /> }<br /> #panel {<br /> width: 100%;<br /> height: 270px; /* Alto del slide */<br /> color: #999999;<br /> background: #272727;<br /> overflow: hidden;<br /> position: relative;<br /> z-index: 3;<br /> display: none;<br /> }<br /> #panel h4 {<br /> font-size: 1.6em;<br /> padding: 5px 0 10px;<br /> margin: 0;<br /> color: #FFFFFF;<br /> text-align: center;<br /> }<br /> #panel p {<br /> margin: 5px 0;<br /> padding: 0;<br /> }<br /> #panel a {<br /> text-decoration: none;<br /> color: #15ADFF;<br /> }<br /> #panel a:hover {<br /> color: white;<br /> }<br /> #panel .content {<br /> width: 960px;<br /> margin: 0 auto;<br /> padding-top: 15px;<br /> text-align: left;<br /> font-size: 0.85em;<br /> }<br /> #panel .content .left {<br /> width: 280px;<br /> float: left;<br /> padding: 0 15px;<br /> border-left: 1px solid #333;<br /> }<br /> #panel .content .right {<br /> border-right: 1px solid #333;<br /> }<br /> #panel .content form {<br /> margin: 0 0 10px 0;<br /> }<br /> #panel .content label {<br /> float: left;<br /> padding-top: 8px;<br /> clear: both;<br /> width: 280px;<br /> display: block;<br /> }<br /> #panel .content input.field {<br /> border: 1px #1A1A1A solid;<br /> background: #414141;<br /> margin-right: 5px;<br /> margin-top: 4px;<br /> width: 200px;<br /> color: white;<br /> height: 16px;<br /> }<br /> #panel .content input:focus.field {<br /> background: #545454;<br /> }<br /> #panel .content input.bt_register {<br /> display: block;<br /> float: left;<br /> clear: left;<br /> height: 24px;<br /> text-align: center;<br /> cursor: pointer;<br /> border: none;<br /> font-weight: bold;<br /> margin: 10px 0;<br /> }<br /> #panel .content input.bt_register {<br /> width: 94px;<br /> color: white;<br /> background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0H3_gx4KBnjK6U9ArPSl-Key2UQyA7v3PL3-ZJCT2xukme8jKEDUa8feYG_ZRFZPaPdHC4CtJefsmZS3sWZCQVzbu0j-kJjt7UhFkKtIsQQ3aSkJ-cRWcOGFklv6qqWERyVt7BwC3xUic/s1600/bt_register.png) no-repeat 0 0;<br /> }<br /> <br /> #slide-menu {<br /> width: 160px;<br /> float: left;<br /> }<br /> #slide-menu2 {<br /> width: 160px;<br /> float: right;<br /> }<br /> #slide-menu ul, #slide-menu2 ul{<br /> font-family: Arial, Helvetica, sans-serif;<br /> list-style-type:none;<br /> margin:0;<br /> padding:0;<br /> }<br /> #slide-menu ul li a, #slide-menu2 ul li a {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTbkONzw4ycmGTm9Wgg6MATPAqeoVCF0f7nk4X2d_Pade4weN16NYT5iSBQFOuredpoERYigg1p6APXmQizTx3bVXHaxATSoPZRwGcHUs6-Wn04j2GMAArh_WUbkMeVCEbqDbTKV9Houm/s1600/bullet_blue.png) center left no-repeat;<br /> margin:0;<br /> padding:3px 3px 3px 18px;<br /> }<br /> #slide-menu li, #slide-menu2 li {display: inline;}<br /> #slide-menu a, #slide-menu2 a{<br /> color: #FFFFFF;<br /> text-decoration: none;<br /> font-size: 13px;<br /> display: block;<br /> padding: 3px;<br /> width: 160px;<br /> }<br /> #slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {<br /> color: #999;<br /> text-decoration: none;<br /> }<br /> #slide-menu a:hover, #slide-menu2 a:hover {<br /> color: #FFFFFF;<br /> }<br /> body#layout #toppanel {display:none !important;}


3° Procure por </head> e logo depois cole o seguinte código:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $("#open").click(function(){ $("div#panel").slideDown("slow"); }); $("#close").click(function(){ $("div#panel").slideUp("slow"); }); $("#toggle a").click(function () { $("#toggle a").toggle(); }); }); //]]> </script>



4° E por último procure por </body> e antes cole o seguinte código:


<!-- Inicio bottom sliding menu --> <br /> <div id='toppanel'><div class='tab'><ul class='login'><li class='left'/> <br /> <li>Olá!</li><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <li class='sep'>|</li><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <li id='toggle'> <br /> <a class='open' href='javascript:void(0);' id='open'>Abrir menu</a> <br /> <a class='close' href='javascript:void(0);' id='close' style='display: none;'>Fechar menu</a> <br /> </li><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <li class='right'/> <br /> </ul></div><div id='panel'><div class='content clearfix'><!-- Primera sección --> <div class='left' style='width:240px !important'><h4>Olá Bem vindo ao blog!</h4><p>Pode seguir nas redes sociales e assinar nosso feed.</p><div align='center'><a href='http://nome-do-blog.blogspot.com/atom.xml'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSi9fSjXIvG22qzVElOCTRuih_pC1qk9USIWDv-l144qLpj2NznCDsQ4QlxSkM-HWCKOVGGdosCv5KbqJrSUGjCXH5Myanw2Ee9Hcj2qNi-eucc20G4U1t9ATInzTYNRvTf_jOh8I_E7KY/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCfqxbCS9QhJwIuF0oc_bYnXS1i9OL5eOoI28GFbCun8eehoc0Xs_t227hZRAr0O930H1YquLFMK_7RJvY1e9NJuMN184ZErns5_K0ejYLNGuA_vbk4hZIPRpvAGJd09aBSCDl9TpVkPwg/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrT4BmdtJrGAEaiQWcyhAo3A7pC6O4FMejuyxnteWKZluga_0701MS8I57qR4h3PV91MRO8S7y5jTPsf1jEIWrKFS6Z3l1z6BsAMRVwn3a-wYH-MZWY_0AZF_zTnSXbn8_jKLx045C_Iut/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a> <a href='https://plus.google.com/b/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2GU61fe_Ly1vqZNzz7NqX6SCIivoTClkqxQ0DhSkx-01Gf15sMOYqQwI0XAG7QoAKqkQ-QYWrLS0JUKmhZywcs8Z-Zbjku_arRbyDG_cvEVEhqV80Rvlq1yBxfQzAraEPOJmPjW1n9CT4/s40/GooglePlus.png' style='padding:25px 5px;' width='40'/></a> </div></div><!-- Segunda sección --> <div class='left' style='width:320px !important'><h4>Categorías</h4><div id='slide-menu'><ul><li><a href='URL del enlace'>Menu item numero um</a></li> <li><a href='URL del enlace'>Menu item dois</a></li> <li><a href='URL del enlace'>Menu item tres</a></li> <li><a href='URL del enlace'>Menu item quatro</a></li> <li><a href='URL del enlace'>Menu item cinco</a></li> <li><a href='URL del enlace'>Menu item seis</a></li> <li><a href='URL del enlace'>Menu item sete</a></li> <li><a href='URL del enlace'>Menu item oito</a></li> <li><a href='URL del enlace'>Menu item nove</a></li> <li><a href='URL del enlace'>Menu item dez</a></li> </ul></div><div id='slide-menu2'><ul><li><a href='URL del enlace'>Menu item numero um</a></li> <li><a href='URL del enlace'>Menu item dois</a></li> <li><a href='URL del enlace'>Menu item tres</a></li> <li><a href='URL del enlace'>Menu item quatro</a></li> <li><a href='URL del enlace'>Menu item cinco</a></li> <li><a href='URL del enlace'>Menu item seis</a></li> <li><a href='URL del enlace'>Menu item sete</a></li> <li><a href='URL del enlace'>Menu item oito</a></li> <li><a href='URL del enlace'>Menu item nove</a></li> <li><a href='URL del enlace'>Menu item dez</a></li> </ul></div></div><!-- Tercera sección --> <div class='left right'><h4>¡ Assine nosso Feed!</h4><p>Receba as novidades e ultimos artigos pelo email.</p><form action='http://feedburner.google.com/fb/a/mailverify?uri=Nome-do-Feed' method='post' target='_blank'><input class='field' name='email' type='text/' value=''/> <input name='uri' type='hidden' value='Nome-do-Feed'/> <input name='loc' type='hidden' value='es_ES'/> <input class='bt_register' type='submit' value='Assinar'/></form></div></div></div></div><!-- Fin bottom sliding menu -->

Neste último código não se esqueça de colocar o nome do seu feed onde está escrito: 'Nome_do_seu_feed' Feito isto é só salvar.