Redes Sociais na lateral da tela

Estava zanzando na net e achei um tutorial bem legal e interessante, um que todas as redes sociais ficam coladas na lateral da tela. Aqui vai a demonstração:Demonstração
Então vamos lá:

Primeiro vá normalmente no blog e vá em editar HTML. Chegando lá procure por ]]></b:skin> e ACIMA dela cole o código:


/* Page-Navigation - Ryuuzaki
----------------------------------------------- */
.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/AVvXsEjBugmWtHP47E3PUGs9Jyqam527og8iklE59Dh4e5IeDxwwAmchX1k4jV7FulIMGXC7ynCB9UQcrmVnYXO4R_3_wkKyaChfxe5KPCRUcLDL9RrrKjrYufsVVThtPlmeC-Wd32RZiEI_Vo8/s1600/wp5.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBugmWtHP47E3PUGs9Jyqam527og8iklE59Dh4e5IeDxwwAmchX1k4jV7FulIMGXC7ynCB9UQcrmVnYXO4R_3_wkKyaChfxe5KPCRUcLDL9RrrKjrYufsVVThtPlmeC-Wd32RZiEI_Vo8/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/AVvXsEjBugmWtHP47E3PUGs9Jyqam527og8iklE59Dh4e5IeDxwwAmchX1k4jV7FulIMGXC7ynCB9UQcrmVnYXO4R_3_wkKyaChfxe5KPCRUcLDL9RrrKjrYufsVVThtPlmeC-Wd32RZiEI_Vo8/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;
}



Feito isso, pressione CTRL + F e procure por </body>

e ACIMA dela cole o seguinte código:

Download do código

PS: Coloque seu link onde estiver escrito "LINK (TWITTER, FACBEOOK, ORKUT, ETC)" e para editar fundo do botão altere aqui: background-color:#141414;


NÃO SE ESQUEÇAM, FALTAM 3 DIAS PARA O FIM DO CONCURSO: SEU LAYOUT NOSSO TEMPLATE Õ/