Cara membuat Multi tab

Halow... Semoga Ilmu tips dan trik ini bermanfaat untuk anda semua. Apakah anda tahu Multi Tab? Multi tab adalah... dst. Ayo yang mau membuat multi tab ala indonesian blogger hanya disini.
Ini screen Shootnya:

Jika anda berminant untuk membuat Multi Tab ala "Indonesian Blogger" ayo kita buat!
Langkah 1.
1. Buka Blogger ->Dashboard -> tata letak -> edit html
2. Cari kode </head>
3. Lalu copy Paste kode berikut sebelum kode </head>:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://pwam.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js'></script>

<style type="text/css">
.widgets545 {
  width:295px;
  overflow:hidden;
  margin-top:5px;
  margin-bottom:5px;
  padding:0px 0px 0px 0px;
  background:#e8dbcc;

}

.widgets545 a {
  color: #222;
  text-decoration: none;
  }

.widgets545 a:hover {
  color: #009;
  text-decoration: underline;
  }

ul.tabnav{

  padding:0px 0px 0px 0px;
  height:26px;
  margin:0px 0px;
  background:#FFFFFF;

}

.tabnav li {
  display: inline;
  list-style: none;
  float:left;
  text-align:center;
  margin-right:8px;

  }

.tabnav li a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: normal;
  padding: 5px 8px 6px 8px;
  width:70px;
  font-weight:normal;
  font: 12px tahoma, helvetica,arial,sans-serif;
  color: #E8DBCC;
  text-decoration: none;
  display:block;
  background:#5F381D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmKMHWggBREf4tw-0MxbzPCB5g18g8qZ5aIK4zao6IAgns9EW8UUm2jQe9V5kDKjAOQpXdoeRdrbRC8LEUmgqU7JO7PhIR-X-ZIQln-ruZafpVVLsvREK2e1FLsG_Ma5CXfA9dX-ot0J8D/) repeat-x;
  border-top:1px solid #7F1E00;
  border-left:1px solid #7F1E00;
  border-right:1px solid #7F1E00;
  }

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
  text-decoration:none;
  background: #E8DBCC;
  color: #AE8269;
  border-top:1px solid #DFD2C3;
  border-left:1px solid #DFD2C3;
  border-right:1px solid #DFD2C3;
  }

.tabdiv {

  padding: 5px 5px 5px 5px;
  font-family:Tahoma,Century gothic, Arial, sans-serif;
  border-bottom:1px solid #DFD2C3;
  border-left:1px solid #DFD2C3;
  border-right:1px solid #DFD2C3;
  }
.tabdiv a:link,.tabdiv a:visited {

   color:#333;

  }
.tabdiv a:hover{

  color: #2676A1;
  }
.tabdiv ul{

  list-style-type:none;
  margin:0px 0px;
  padding:0px 0px;

   }

.tabdiv ul li{

  height:100%;
  line-height:28px;
  padding: 0px 0px 0px 0px;
  color:#333;

}

.tabdiv li a:link,.tabdiv li a:visited{
  background:#f9f5f1;
  display:block;
  margin-left:5px;
  overflow:hidden;
  line-height:24px;
  padding:2px 5px ;
  margin:2px 0px;
  color:#6F6B53;
  font-size:13px;
}

.tabdiv li a:hover {
  background:#fff;
  color: #3F200C;
  text-decoration:none;
   }
.ui-tabs-hide {
  display: none;
   }
</style>

4. Simpan.

Langkah 2.

1. Seperti biasa Buka Blogger -> Dashboard -> Tata Letak -> add gadget -> HTML/Javascript.
2.Copy paste code berikut ke dalam Tab HTML

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(document).ready(function() {
$jx('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});
</script>
<div id="tabzine" class="widgets545">
<ul class="tabnav">
<li><a href="#tab11"> Recent </a></li>
<li><a href="#tab22"> Popular </a></li>
<li><a href=" #tab33"> Comments </a></li>
</ul>

<div id="tab11" class="tabdiv">

Tab 1 Content

</div>

<div id="tab22" class="tabdiv">

Tab 2 Content

</div>

<div id="tab33" class="tabdiv">

Tab 3 Content

</div>

</div>

Keterangan: Edit sendiri Yach!
3. Simpan

Maaf ada sedikit keanehan dalam kode berikut, saya memberi code text background itu menjadi abu-abu agar anda tidak kebingungan...
Eeeiiittss....... Jangan lupa Komentar oke!

Thanks to: www.bloggertipandtrick.net