Baixar Brasil Baixar Templates Novos Top Novos download

Avatar
Tutorial botões de redes sociais na lateral

Eaw galera! estava aqui pensando em qual tutorial postava hoje, bom eu pensei bem e achei legal postar um bem interessante que foi as redes sociais no canto da tela do blog. Bom sem mais delongas vamos ao tutorial:

Primeiro vá no HTML do blog e depois procure por: ]]></b:skin> e acima cole o seguinte código:
/* Page-Navigation - Ryuuzaki 
----------------------------------------------- */site reserva hoteis

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QyxhvxWgjF3Ay4nIjNnq56mrbMeMJ-LpOYEg6NRz8NcGexYystjT_DYukIS0mNaX_fGbBqF791BwnAQCTTj_wmaQe-tgyTEnaXmWqY7KxuM2fbJ4BUUwFB1XJ6tOvbfC7_JPbIyNhvo/s1600/wp5.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QyxhvxWgjF3Ay4nIjNnq56mrbMeMJ-LpOYEg6NRz8NcGexYystjT_DYukIS0mNaX_fGbBqF791BwnAQCTTj_wmaQe-tgyTEnaXmWqY7KxuM2fbJ4BUUwFB1XJ6tOvbfC7_JPbIyNhvo/s1600/wp5.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QyxhvxWgjF3Ay4nIjNnq56mrbMeMJ-LpOYEg6NRz8NcGexYystjT_DYukIS0mNaX_fGbBqF791BwnAQCTTj_wmaQe-tgyTEnaXmWqY7KxuM2fbJ4BUUwFB1XJ6tOvbfC7_JPbIyNhvo/s1600/wp5.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; } ul#menusisi { position:fixed; margin:0; padding:0; top:80px; left:0; list-style:none; z-index:9999; } ul#menusisi li { width:100px; } ul#menusisi li a { display:block; margin-left:-50px; width:100px; height:55px; background-color:#141414; /* Cor de fundo do botão */ background-repeat:no-repeat; background-position:48px center; border:1px solid #cfcfcf; /* Cor da borda do botão*/ -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; /*-moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; */ opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); } ul#menusisi .home a { background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png); } ul#menusisi .twitter a { background-image:url(https://www.coderesort.com/p/epicode/export/1390/FV.ShareIt/trunk/Install/FV.ShareIt/Images/twitter-48x48.png); } ul#menusisi .youtube a { background-image:url(http://www.cornealdystrophyfoundation.org/assets/images/youtube-48x48.png); } ul#menusisi .facebook a { background-image:url(https://www.coderesort.com/p/epicode/export/1390/FV.ShareIt/trunk/FV.ShareIt/FV.ShareIt/Images/facebook-48x48.png); } ul#menusisi .orkut a { background-image:url(http://static.wix.com/media/0d3caec202c11a5904b9cb4f697c2a3f.wix_mp_256); } ul#menusisi .rssfeed a { background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png); } #toTop { width:50px; /* Largura do botão * / background: #000000; /* Cor do botão*/ border:1px solid #FFF; /* Cor da borda */ text-align:center; /* Alinhamento do texto */ padding:5px; /* Distancia entre texto e borda */ position:fixed; /* Posição que faz com que ele corra por toda a página*/ bottom:5px; right:5px; cursor:pointer; color:#FFFFFF; /* Cor da letra */ text-decoration:none; font-weight:700; /* Tamanho da letra */ -moz-border-radius:5px; /* Definições para o angulo do botão */ -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #blog-pager-newer-link { float: left; text-transform: capitalize; font: bold 14px arial; color: #fff; } #blog-pager-older-link { float: right; text-transform: capitalize; font: bold 14px arial; color: #fff; } #blog-pager { text-align: center; text-transform: capitalize; font: bold 12px arial; padding: 10px 0; } .showpageArea { font-family:"Oswald", Lucida Sans Unicode, Helvetica, Arial, sans-serif; color: #353131; font-size:15px; margin:20px; } .showpageNum a, .showpage a{ padding:0px 8px; margin:0 3px; text-decoration:none; background:#fff; border:1px solid #353131; font-size:16px; color:#000000; -webkit-border-radius:5px;-moz-border-radius:8px; } .showpageNum a:hover{ background:#353131; color:#000; } .showpagePoint{ color:#000; font-size:17px; padding:0 8px; margin:2px; -webkit-border-radius:5px;-moz-border-radius:8px; border:1px solid #353131; background:#353131; text-decoration:none; } .showpageOf{ display:none !important; visibility:hidden !important } #gb { position:fixed; top:150px; z-index:+1000; right:-610px; } * html #gb { position:relative; } .gbtab { height:161px; width:47px; float:left; cursor:pointer; background:url('http://4.bp.blogspot.com/-JwNTvG-mTrI/T5XW8oBi4OI/AAAAAAAAAEY/AvOs18rFwgE/s1600/bot%C3%A3o+do+xat+c%C3%B3pia.png') no-repeat; margin-top:20px; } .gbcontent { float:right; border:2px solid #8c00c1; background:#fff; opacity:0.80; -moz-opacity: 0.80; filter: alpha(opacity=80); -webkit-border-radius: 20px; border-radius: 20px; -khtml-border-radius: 20px; padding:8px; }site reserva hoteis

Feito isso procure por Body e adicione o seguinte código:


PS: Coloquem o link desejado onde tiver link(FaceBook, Orkut e etc...)

Espero que tenham gostado do tutorial.

~Akatsukage.

0 comentários:

Postar um comentário