Menu Com Redes Sociais Fixado no Topo do Blogger - Exclusivo
Nesta postagem compartilho com vocês este menu que eu usei muito no meu ultimo template. O meu é super elegante e desce conforme a página rola para baixo. Espero que gostem!!!!
Para colocar o menu no topo do seu blog... Siga os passos abaixo:
Para coloca-la no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag
]]></b:skin>
/** Menu deslizante by DicasHot */ body#layout #header { margin-left: 0px; margin-right: 0px; } .post-body img {max-width:99% !important;} /*Related Posts Widget by www.Tutoriales-Blogger.info*/ #bloggerspice-rp h3{ border-bottom:4px solid #333333; font-family:Oswald,arial,Georgia,serif; font-size:18px; padding-bottom: 5px; text-transform: uppercase; } #bloggerspice-rp ul {margin-bottom: 20px; padding: 10px 0; } #bloggerspice-rp ul li{ float:left; height:150px; margin:0 10px 10px 0; width:200px; font-size: 15px; } #bloggerspice-rp img{padding:0 0;width:200px;height:95px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out} #bloggerspice-rp img:hover{opacity:0.7;} #bloggerspice-rp ul li:nth-child(3n+3){margin-right:0;} #bloggerspice-rp ul{margin:0;padding:0;list-style:none;} /*Related Posts Widget by www.bloggerspice.com End*/ #nav-menu-label{float:right; margin:0; padding:0; } .text-style{color:#fff; display:block; font-size:12px; font-family:arial,verdana,georgia; font-weight:normal; text-transform:normal; margin:1px 0; border-left:2px solid #1E3C51; padding:2px 8px 6px 8px} .text-style:hover{color:#000; cursor:pointer} #nav-menu-label ul{float:left; list-style:none; margin:0; padding:0} #nav-menu-label li{list-style:none; margin:0; padding:0} #nav-menu-label li a, #nav-menu-label li a:link, #nav-menu-label li a:visited{color:#fff; display:block; font-size:11px; font-family:arial,verdana,georgia; font-weight:normal; margin:0; border-left:none; padding:1px 10px 6px 10px} #nav-menu-label li a:hover, #nav-menu-label li a:active{color:#fff; margin:0; padding:1px 8px 6px 8px; text-decoration:none} #nav-menu-label li li a, #nav-menu-label li li a:link, #nav-menu-label li li a:visited{background:#080808; width:90px; color:#fff; font-size:11px; font-family:'Arial'; font-weight:normal; float:none; margin:0; padding:4px 10px 4px 10px; border-top:1px solid #111; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000} #nav-menu-label li li a:hover, #nav-menu-label li li a:active{background:#33aaff; color:#fff; padding:4px 10px 4px 10px} #nav-menu-label li{float:left; padding:0} #nav-menu-label li ul{z-index:999; position:absolute; left:-999em; height:auto; width:70px; margin:0; padding:0} #nav-menu-label li ul a{width:70px} #nav-menu-label li ul ul{margin:-31px 0 0 100px} #nav-menu-label li:hover ul ul, #nav-menu-label li:hover ul ul ul, #nav-menu-label li.sfhover ul ul, #nav-menu-label li.sfhover ul ul ul{left:-999em} #nav-menu-label li:hover ul, #nav-menu-label li li:hover ul, #nav-menu-label li li li:hover ul, #nav-menu-label li.sfhover ul, #nav-menu-label li li.sfhover ul, #nav-menu-label li li li.sfhover ul{left:auto} #nav-menu-label li:hover, #nav-menu-label li.sfhover{position:static} .breadcrumbs a { color:#ffffff; } ul.topnav { list-style: none; padding: 0 20px; margin: 0; float: right; font-size: 11px; } ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base--*/ } ul.topnav li a{ padding: 10px 5px 10px 5px; color: #fff; display: block; text-decoration: none; float: left; text-transform:uppercase; } ul.topnav li a:hover{ } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(https://lh5.googleusercontent.com/-xW4p9b_uWyI/TeQwwBEAGGI/AAAAAAAAAGY/rGxrR1WBhgE/subnav_btn.gif) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.subnav { list-style: none; position: absolute; left: 0; top: 35px; background: #202020; margin: 0; padding: 0; display: none; float: left; width:150px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; z-index:1001; } ul.subnav_last{ list-style: none; position: absolute; right: 15px; top: 35px; background: #202020; margin: 0; padding: 0; display: none; float: left; width:150px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; z-index:1001; } ul.subnav li, ul.subnav_last li{ margin: 0; padding: 0; border-top: 1px solid #111; border-bottom: 1px solid #333; clear: both; width:150px; } ul.subnav li:last-child{ border-bottom: none; } ul.subnav_last li:last-child{ border-bottom: none; } html ul.subnav li a, ul.subnav_last li a { float: left; width:125px; text-align:left; background: transparent url(https://lh4.googleusercontent.com/-OjDdWCsCcvs/TeQwvMALnUI/AAAAAAAAAGI/-FC-KZkBGGg/dropdown_linkbg.gif) no-repeat 10px center; padding:8px 0 8px 20px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; text-transform:none; } html ul.subnav li a:hover, ul.subnav_last li a:hover{ /*--Hover effect for subnav links--*/ background: #191919 url(https://lh4.googleusercontent.com/-OjDdWCsCcvs/TeQwvMALnUI/AAAAAAAAAGI/-FC-KZkBGGg/dropdown_linkbg.gif) no-repeat 10px center; } #header-bar-outer{ position:fixed; z-index:9999; width:100%; height:34px; padding:0; margin:0; background:#212121; border-top:1px solid #000; border-bottom:1px solid #000; padding-top:1px; padding-bottom:1px; top:0; } #header-bar { width:100%; height:33px; margin:0 auto; padding:0; border-top:1px solid #444; border-bottom:1px solid #444; } #top_nav{ height:33px; line-height:33px; text-align:left; float:left; } #top_nav ul{ margin:0; padding:0 0 0 5px; } #top_nav li{ display:inline; } #top_nav li a{ color: #CCCCCC; font-size: 11px; margin: 0 0 0 0; padding: 0 0 0 10px; text-transform: uppercase; } #magazine-left2 { background: none repeat scroll 0 0 #191919; border: 1px solid #000000; border-radius: 3px 3px 3px 3px; float: left; overflow: hidden; padding: 5px; width: 348px; } #magazine-left2 h2 { border-bottom: 1px dashed #444444; font-family: Arial,Helvetica,san-serif; height: 50px; line-height: 28px; text-align: left; } #magazine-right2 { background: none repeat scroll 0 0 #191919; border: 1px solid #000000; border-radius: 3px 3px 3px 3px; float: right; margin-bottom: 20px; margin-right: -1px; overflow: hidden; padding: 5px; width: 350px; } #magazine-right2 h2 { border-bottom: 1px dashed #444444; font-family: Arial,Helvetica,san-serif; height: 50px; line-height: 28px; text-align: left; } #HTML13 h2 { display: none; } .Table-f{padding-top:10px; background:#f0f0f0; -moz-border-radius:4px 4px 0; -khtml-border-radius:4px 4px 0; -webkit-border-radius:4px 4px 0; border-radius:4px 4px 0;} .Table-Post table{text-align:left; margin:0 auto; width:600px} .Table-Post2{border: 0 solid #F0F0F0; font-family: 'Lustria', serif; font-size: 15px; text-align: justify;} .tfeatures{font-size: 18px; font-weight: bold; padding-bottom: 8px; line-height: 32px;font-family: 'Oswald',sans-serif;} .cbt-tag { overflow: hidden; padding: 6px 0 1px 4px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMjP9BZQMgfZ3YDoXuvv0rY3zuayc7lL5OrBlhxEW0BZjh4RymTHDOcVK4rw8n8PjokqER7uEKjzrMqPdREdjh1LyEHWQ7teiop9yAw3w4_m0OMfeO3SNbKLsGX9hfqROXw9CFJHkTnw/) repeat-x left bottom; } .anoua { border-radius: 5px 5px 5px 5px; color: #333333; font-size: 11px; margin: 0 0 8px 3px; text-align: justify; width: 715px; } .anoua a{ color: red; } /* social icon */ #social-networking li { float: left; } #social-networking a { display: block; padding: 0 3px 0 0; position: relative; } #social-networking span { opacity:0.5; width: 24px; height: 24px; display: block; border:4px solid #252628; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; box-shadow:inset 0 2px 6px #000000; webkit-shadow:inset 0 2px 6px #000000; -moz-shadow:inset 0 2px 6px #000000; -moz-transition: all .1s linear; -webkit-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } #social-networking span:hover { border:4px solid #888; opacity:0.9; } #social-networking .social-icon { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX7HbH9bFMBS2CDPKKEKVxHchj8HnNdzx0dV9MWQiS6YQMFtSgwAFR8n0v_R_WE_r5jjDm5lxBdjcmWMMssSBwOX461n8E5n9A661FGAzfz4GDNfCsafvB5KIJH4-Src6oTSJiG5dTip0/s1600/social.png') no-repeat; } .opacity #social-networking .social-icon { opacity: 0.85; } .opacity #social-networking a:hover .social-icon { opacity: 0.6; } #social-networking .facebook { background-position: 0 -28px; } #social-networking .flickr { background-position: 0 -87px; } #social-networking .vimeo { background-position: 0 -233px; } #social-networking .youtube { background-position: 0 -291px; } #social-networking .linkedin { background-position: 0 -322px; } #social-networking .googleplus { background-position: 0 -353px; } #social-networking .dribbble { background-position: 0 -205px; } #social-networking .tumblr { background-position: 0 -177px; } #social-networking .skype { background-position: 0 -262px; } #social-networking .delicious { background-position: 0 -149px; } #social-networking .digg { background-position: 0 -117px; } #social-networking .rss { background-position: 0 -57px; } .main-nav{list-style:none} main-nav-wrap{margin: 19px 0 0 0 }.ie8 .main-nav-wrap{margin:0} .main-nav li{ float:left;width:12.5%; position:relative; -moz-transition:background-color 0.4s ease; -o-transition:background-color 0.4s ease; -webkit-transition:background-color 0.4s ease; -ms-transition:background-color 0.4s ease } .main-nav li:hover{ background:rgba(0,0,0,0.4); -moz-transition:background-color 0.1s ease; -o-transition:background-color 0.1s ease; -webkit-transition:background-color 0.1s ease; -ms-transition:background-color 0.1s ease -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 6px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px; } .main-nav a{ border-top: 0 none; color: white; display: block; font-family: 'Oswald',sans-serif; font-size: 15px; letter-spacing: 0.5px; margin-left: -15px; overflow: hidden; padding: 10px; position: relative; text-align: center; text-transform: uppercase; z-index: 2; } .ie8 .main-nav a:before{display:none }.ie8 .main-nav a{padding:10px !important } .main-nav span{ display:block; text-align:center; font-size:9px; white-space:nowrap } .main-nav .forums a:before{background-position:center -40px } .main-nav .snippets a:before{ background-position:center -80px } .main-nav .almanac a:before{ background-position:center -160px } .main-nav .videos a:before{ background-position:center -120px } .main-nav .gallery a:before{ background-position:center -200px } .main-nav .downloads a:before {background-position:center -240px } .main-nav .deals a:before {background-position:center -280px }
Agora, procure pela tag
</body>
Tendo encontrado a tag, cole ACIMA dela o seguinte código
<div id='header-bar-outer'> <div id='header-bar'> <ul class='topnav'> <li> <a class='buyb' href='URL'>MENU</a> </li> <li> <a href='URL'>MENU 1</a> <span class=''/></li> <li><a href='URL'>MENU 2</a> <span class=''/></li> <li> <a href='URL'>MENU 3</a> <span class=''/></li> <li> <a href='URL'>MENU 4</a> <span class=''/></li> <li> <a href='URL'>MENU 5</a> <span/></li> </ul> <div id='top_nav'> <!-- start #social-networking--> <ul id='social-networking'> <li><a href='http://twitter.com/' id='twitter-link' target='_blank' title='twitter'><span class='twitter social-icon'/></a></li> <li><a href='http://www.facebook.com/dicashot' id='facebook-link' target='_blank' title='facebook'><span class='facebook social-icon'/></a></li> <li><a href='http://www.youtube.com/user/SCSSamuel1996' id='youtube-link' target='_blank' title='youtube'><span class='youtube social-icon'/></a></li> <li><a href='http://lk.linkedin.com/' id='linkedin-link' target='_blank' title='linkedin'><span class='linkedin social-icon'/></a></li> <li><a href='https://plus.google.com/u/0' id='googleplus-link' target='_blank' title='googleplus'><span class='googleplus social-icon'/></a></li> <li><a href='http://delicious.com/url/' id='delicious-link' target='_blank' title='delicious'><span class='delicious social-icon'/></a></li> <li><a href='http://feeds.feedburner.com/DicasHot' target='_blank' title='rss'><span class='rss social-icon'/></a></li> </ul> <!-- end #social-networking--> </div> </div> </div>
SUBSTITUA as partes destacadas no código.
Tendo feita as substituições, basta salvar e pronto!!!
