Carregando atualizações...

X

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>
Tendo encontrada a tag, cole ACIMA dela o seguinte código
/** 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://lh4.googleusercontent.com/_63wLUMEe0os/TVFvwDXKpyI/AAAAAAAAAOg/qqwY6Zibt-4/bb.gif) 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('http://4.bp.blogspot.com/-xWyhwRsNxmY/T0u_sVGz8QI/AAAAAAAAHck/p77h_vjely0/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!!!

Cursos On-line 24 Horas - Educação a Distância de Qualidade

NOSSO CANAL
VER TV A CABO ONLINE GRÁTIS
TV ONLINE 1.0