Membuat 3 Tab View Untuk merapikan Widged

...

masuk blog agan terlebih dahulu
pilih menu tata letak/add gadged
kemudian letakan kode dibawah ini pada formulirnya

<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:310px;}
.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 #A10606;background-color:#A10606;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:#A10606;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 #A10606;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigwz4kZ0hZQ4exzzN66zfamPtBIX0VYR5NU3qOy0lNI8BP9OoArSOBR_63n-hes9iLDF34hepzEcdE3niupCtl_asMCvcvHXHhjXz1hDgcR-20LBUUBn6C9zDWT_IVcgj3MtXf9lJaQCA/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#A10606;border-color:#A10606;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #A10606;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3apGOobPQW8NU7GmzQAf_FxRaGDNVm4N61oOmj8AhiccNJg-cKNJGdNzXSSwpRvhG2siMYdDKe8wovh3oSufN51NFqSwcnKI3OHimntXLQxvQ0ItHdUZKLaSh-mZ8ykczvBNLTym3Bqk/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #A10606;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk4yKrVIFVQ1stHmzq1D33g9Gxm6Lk2ZZEWdBYNBAHpp6GvWHk_-y9qFEhysf6Q5XjHPbt1qw-HwThQcx2jrv_IzroACtsFFmUHt7JDbPNYLpT67JcNRaIjg7P17HEzJFNxK-SzYKzg1Q/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 #A10606;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:#343464;}
.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">Judul Tab 1</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Judul Tab 2</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Judul Tab 3</a></li>
</ul>
<div id="content_1" class="content">
Isi Tab 1
</div>
<div id="content_2" class="content">
Isi Tab 2
</div>
<div id="content_3" class="content">
Isi Tab 3
</div>
</div>

Jika sudah silahkan simpan templatenya..
untuk kode berwarna merah saya rasa agan sudah cukup mengerti harus menggantinya dengan kode mana...

Selamat mencoba semoga bermanfaat...