How to Make the Tab View of Jquery Scroll Animation Effects

Tab view is a box or a box that allows users to save space sidebar blogger and one of the tricks in order to see the blog looks neat, beautiful and professional. To view this tab provides the trick I use JQuery.For understanding JQuery I have already discussed in the article 
previous. Well, why are we using jQuery, which is clear for loading loadnya clearly better. For example the tab view, you can see the right sidebar, or see the following picture: 

Sample Tab view

Well, just go ahead. Please follow the steps below:

1. Login to your account blogger pal
2. Go to the design / design
3. Select Layout
4. Edit HTML
5. Then find the code berkut:]]> </ b: skin>, after the meet live right place the following CSS code above the code]]> </ b: skin>

#slick_area {
border: 0px solid # 585 858;
background-color: # FFFFFF;
padding: 8px;
margin: 10px 0;
line-height: 18px;
}
#slick_area a {
color: # FFFFFF;
text-decoration: none;
}
.slick_area a: hover {
color: # FF0000;
}
ul.slick {
margin: 5px 2px 8px 0;
padding: 0px;
}
ul.slick li {
list-style: none;
display: inline;
background-color: # FFFFFF;
padding: 5px 14px;
text-decoration: none;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
border: 0px solid # 585 858;
}
ul.slick li: hover {
color: #red;
}
ul.slick li.active {
background-color: # FFFFFF;
border: 1px solid # 585 858;
color: # 222222;
}
.content-slick {
background-color: # FFFFFF;
border: 0px solid # 585 858;
color: # 222222;
min-height: 40px;
padding: 5px 13px 7px;
text-align: left;
}
.content-slick ul {
margin: 20px;
padding: 0;
}
.content-slick ul li {
list-style: none;
border-bottom: 1px solid # 222222;
padding: 1px;
}
.content-slick ul li: last-child {
border-bottom: none;
}
.content-slick ul li: hover, .content-slick ul li a: hover {
display: block;
background-color: # FFFFFF;
}
.content-slick ul li a {
text-decoration: none;
color: black;
display: block;
}

6. After that, look for the code </ head> after meeting place and the following jQuery javascript code right above:

<Script language = 'javascript' src = 'http: //k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type = 'text / javascript' />
<Script type = 'text / javascript'>
$ (Document) .ready (function () {
$ (& # 39; #tabdua, # tabtiga & # 39;). Hide ();
$ (& Quot; ul.slick li & quot;). Click (function () {
$ (& Quot; .active & quot;). RemoveClass (& quot; active & quot;);
$ (This) .addClass (& quot; active & quot;);
$ (& Quot; .content-slick & quot;). SlideUp ();
content_show var = $ (this) .attr (& quot; title & quot;);
$ (& Quot; # & quot; + content_show) .slideDown ();
});
});
</ Script>

7. Save tempalate, and still more neh bro ... go to Layout / Design, click the Add New Widget / Add Widget, and then select HTML / Javascript. Then put the code below:

<Ul class = "slick">
<li title = "tabsatu" class = "slick active"> Tab The </ li>
<li title = "tabdua" class = "slick active"> Tab Two </ li>
<li title = "tabtiga" class = "slick"> Tab Three </ li>
</ Ul>
<Div id = "tabsatu" class = "content-slick">
Put the code HTML / Javascript to Tab One </ div>
<Div id = "tabdua" class = "content-slick">
Put the code HTML / Javascript to Tab Two </ div>
<Div id = "tabtiga" class = "content-slick">
Put the code HTML / Javascript to Tab Three </ div>

Information :
The code in bold replace / fill with widgets that my friend wanted.

8. Once completed please SAVE, and see the results .. Good luck.