Sidebar com Abas e Jquery no Blogger/BlogSpot 3

Olá pessoal. Vocês já devem ter notado no meu Blog, na sidebar (lateral), abas com três Gadgets, que são: "Destaque", "Recentes" e "Marcadores". É bastante vantajoso você ter em seu Blog, saiba porque: fornecer bastante espaço no seu template, o design de seu Blog fica mais atraente, fica com cara de profissional. Enfim... tem muitas vantagens. Mais para que saia tudo de acordo com que eu vou passar aqui, é necessário que você preste bastante atenção, vamos a pratica ?

Antes de qualquer alteração em seu  template é necessário que você faça o backup de seu template, para quem não sabe o que é, veja aqui. Vá em Design ~> Editar HTML, e procure pela tag ]]></ b: skin> e imediatamente cole todo o código abaixo acima.

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab  ul li:last-child {
border-bottom:none;
}
.widget-tab  ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab  ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content  ul li a:hover {
color:#a59c83;
}
.tab-content  ul li a:hover small {
color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;        
}
ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Esse script necessita da instalação da biblioteca Jquery, mais se você já tem, não será necessário a instalação dele em seu template. Mais quem não tem é só colar o código abaixo antes de </head>.

<!-- jQuery Call -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<!-- End of jQuery Call -->

Bom, agora vejamos se está tudo ok, temos o CSS ,  Jquery devidamente instalados,  agora vamos para o ultimo passa. Que é onde dá todo o "brilho" para nós. Basta colocar  corretamente todo o código abaixo, antes de </head>

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>

Tudo instalado em seus devidos lugares, agora vamos as personalização, como você pode ter notado no último código, existe essas três partes

var starttab=0;

var endtab=2;

var sidebarname="sidebar1";

Rapidamente para você entender o que se trata. var starttab=0; é o ponto  de partida dos Widgets instalads e começa contar a partir de 0.  var endtab=2; É o numero dos seus Widgets anteriores e var sidebarname="sidebar1"; é a ID de sua sidebar. Geralmente esse ID é só "sidebar" mesmo, mais se não for, você terá que procurar, e uma boa maneira de chegar até isso, é procura por “sidebar-wrapper” e você terá algo assim:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Nota: Se caso as imagens não estiverem aparecendo. Ou se por ventura apareceu e depois sumiu. Não precisa entrar em pânico. Eu tenho as imagens se caso precise, entre em contato comigo.

Encontrado,  é só copiar a ID de seu blog e adicionar em seu devido lugar como falei anteriormente. O tutorial é bem simples, e com excelentes resultados. Qualquer dúvida deixe um comentário.

Até a próxima!

Artigo original Abu Farhan