2 Tutorial Menu Deslizante

Oi fadinhas, tudo bem com vocês? Com migo esta tudo bem.

Winxnaticos esse tutorial e feito especialmente a Sarah mais eu espero que vocês também gostem.

Então respira fundo e vamos começar. Let's Go Fairy 

 Antes de qualquer coisa quero informar que o tutorial e muito fácil, mais pra sair bem sucedida tem que prestar bastante atenção

     1ª Passo: Entre no painel do blogger e vá em Layout

     2ª Passo: Clique em adicionar um Gadget/Java Script

     3ª Passo: Cole o código abaixo no gadget

<script src="http://sites.google.com/site/menudeslizante/menudeslizante/prototype.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/menudeslizante/menudeslizante/effects.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/menudeslizante/menudeslizante/side-bar.js" type="text/javascript"></script>

<style>
body{font-size:75%;}
a{outline: none;}
a:active{outline: none;}
#sideBar{text-align:left; padding: 0px 0 0px 0px; border: ;}
#sideBar h2{
padding: ;
color:#FFFFFF;
font-size:0;
font-family:Segoe print;
margin:0;
font-weight:bold !important;
}
#sideBar h2 span{
color:#a7c1e7;
text-shadow:-2px -2px 3px #000;
padding: 0;
font-size:165%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:2px 2px 2px 2px;
padding:2px;
list-style-type:none;
display:block;
background:url(http://content.pimp-my-profile.com/tp/000000-20-tp.png);
border: 3px groove #fff;
width:155px;
color:#a7c1e7;
text-shadow: 2px 3px 4px #000;
}
#sideBar li a:hover{
width:145px;
color: #000;
background:url(http://content.pimp-my-profile.com/tp/a7c1e7-40-tp.png);
border: 3px ridge #ccc;
text-shadow: 2px 3px 4px #000;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:Segoe print;
font-size:150%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding: 2px 0 2px 2px;}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 100px;
right:0px;
background: url('') repeat;background-position:top right;}
#sideBarTab{background: url('') repeat;
float:right;
height:320px;
width:150px;
}
#sideBarTab img{border:none;}
#sideBarContents{
float:right;
overflow:hidden !important;
width:170px;
height:320px;
}
#sideBarContentsInner{width:180px;}
</style>

    4ª Passo: Só faça alterações a onde eu destaquei na cor 'Laranja' Mais Bruno qual alteração eu faço onde você destacou? Ali você vai alterar a altura e largura da sua imagem.
 
    5ª Passo: Agora salve o gadget, você percebeu que nada aconteceu né? Então agora novamente vai em adicionar um Gadget/Java Script copie o código a baixo e cole no gadget

<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2><span></span></h2>
<ul>
<li><a href="URL">Nome do link</a></li>
<li><a href="URL">Nome do link</a></li>
<li><a href="URL">Nome do link</a></li>
<li><a href="URL">Nome do link</a></li>
<li><a href="URL">Nome do link</a></li>
<li><a href="URL">Nome do link</a></li>
<li><a href="URL">Nome do link</a></li>
<li><a href="URL">Nome do link</a></li>
<li><a href="URL">Nome do link</a></li>
</ul>
</div>
</div>
<a id="sideBarTab" href="#">
<img alt="sideBar" src="URL da sua imagem" title="sideBar" /></a>
</div>

    6ª Passo: Façam a alterações colocando a URL, NOME DO LINK e a URL da sua imagem.

    7ª Passo: Salvem o gadget e pronto vocês verão que o MENU tará no seu blog certinho

Sei escrevi tanto e ensinei pouco, mais de verdade si fizer certinho de acordo com o tutorial nadinha da errado.

Qualquer duvida comentar.