How to Make the Two Hidden Tabs Scroll Widget

Want your blog added widget like the picture beside? let's do's how:

1. Log in to your blogger
2. Sign in to design / design
3. Choose Layout
4. Edit HTML
5. Then find this code: ]]> </ b: skin> (use Ctrl + F on your keyboard), after the meet to stay put following CSS code right above the code ]]> </ b: skin>

#slick_area{background-color:#fff;padding:8px;margin:10px 0;line-height:18px} #slick_area a{color:#000;text-decoration:none} .slick_area a:hover{color:#fff} ul.slick{margin:2px 5px 5px 5px;padding:0px} ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858} ul.slick li:hover{border:1px dotted #f00} ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede} .content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left} .content-slick ul{margin:10px;padding:0} .content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px} .content-slick ul li:last-child{border-bottom:none} .content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent} .content-slick ul li a{text-decoration:none;color:black;display:block}

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

<script language='javascript' src='http://c-mp3nk.googlecode.com/files/widget3tab.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $('#tabdua, #tabtiga').hide(); $("ul.slick li").click(function () { $(".active").removeClass("active"); $(this).addClass("active"); $(".content-slick").slideUp(); var content_show = $(this).attr("title"); $("#"+content_show).slideDown(); }); }); </script>

7. Save tempalate, and still up ya ... go to Layout / Design, click the Add New Widget / Add a widget, then select HTML / Javascript. Then put the code below:

8. Copy And paste This Scripts :

<ul class="slick"> <li title="tabsatu" class="slick active">Tab one</li> <li title="tabdua" class="slick active">Tab two</li> </ul> <div id="tabsatu" class="content-slick"> Put YOUR code HTML/Javascript Here </div> <div id="tabdua" class="content-slick"> Put YOUR code HTML/Javascript Here </div>

9. Up here you can make a scroll view jquery show hide tab widget. and do not forget to save it.