Cara Membuat Widget Tab View

Tab View adalah widget yang berguna untuk menghemat halaman blog anda, Jika anda memiliki banyak gadget/widget Tab View ini sangatlah berguna karna fungsi yang dilakukan oleh Tab View ini adalah menyembunyikan widget- widget yang anda gunakan.

nah untuk kalian yang ingin menggunakan widget sangat lah mudah,
ikuti langkah langkah berikut ini:

1.Masuk ke blog anda lalu klik dasboard dan Tata letak.
2.tambahkan HTMLdanJavascript
3.Paste code dibawah ini

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://lh5.googleusercontent.com/-4oB3c0hJXFo/TwgIZu7CB3I/AAAAAAAAUfM/0yDsmg_GI54/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0eI1Gb4zz4ZAnovVqGT7PC8u0a_Gx5J1jan2Y54wbzpA3AOocEOCLHtWnQkX42EhZFb-nN2IpZPGYknooDCjcw3P3wgL8X_0Zq_i5ft0Id2K_m-IhRphg8SxXSEurfYk_cPZuRPFFQw/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://lh6.googleusercontent.com/-35jZQ4g9ijI/TwgIabuIPhI/AAAAAAAAUfU/4pH5w6Ptzwo/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content 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;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Tab 1</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Tab 2</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Tab 3</a></li>
</ul>
<div id="content_1" class="content">

...isi tab view yang anda inginkan...

</div>
<div id="content_2" class="content">

...isi tab view yang anda inginkan...
 
</div>
<div id="content_3" class="content">

...isi tab view yang anda inginkan...

</div>
<span style="color:#ddd; font-weight:bold; font-family:arial; font-size:11px;">Widget by: <a style="color:#f7f7f7; font-weight:bold" href="http://coretanblogparta.blogspot.com/">Parta Blog</a></span>
</div>

4.Ganti teks "conten_1,2 dan 3 dengan teks kalian 
5.Ganti juga teks View yang kalian inginkan
6. simpan template