Membuat Menu Tab View Widget Di Blogger

Pada postingan pertama Membuat Menu Tab View Di Blogger dengan mengedit HTML. Sekedar memperdalam ilmu sebaiknya anda membacanya terlebih dahulu karena pada postingan kali ini saya akan memberikan tutorial Membuat Menu Tab View Widget yang sedikit lebih mudah. Mengapa? karena kita tidak perlu lagi mengedit HTML..

Berikut Langkah-langka Membuat Menu Tab View Widget:

1. Login ke Blogger Anda.
2. Pilih Tata Letak.
3. Posisikan dimana anda akan meletatkannya, sebaiknya pada sidebar. Kemudian pilih Add Gadget. dan masukan kode di bawah ini.

<style type="text/css">
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">
<div class="Page">
<div class="Pad">
konten 1</div>
</div>
<div class="Page">
<div class="Pad">
konten 2</div>
</div>
<div class="Page">
<div class="Pad">
konten 3</div>
</div>
</div></div></form>
<script src="https://masolis-javascript.googlecode.com/svn/trunk/tab-viewmaskolis.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

4. Simpan.

Keterangan

• Untuk tulisan berwarna merah di isi dengan judul dari Tab View.
• Untuk tulisan berwarna biru di isi dengan konten anda.

Apabilila anda belum mengerti mengenai konten, berikut contohnya :

<div class="Page">
<div class="Pad">
<script style=text/javascript src=http://frangky-s.googlecode.com/files/recent-comments.js></script><script style=text/javascript>var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://frangkys.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script> <style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} </style>
</div>
</div>
<div class="Page">
<div class="Pad">
<script style="text/javascript" src="http://frangky-s.googlecode.com/files/recentposthumb.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 150;
</script>
<script src="http://frangkys.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
</div>
</div>

Demikian Tutorial Membuat Menu Tab View Dengan Widget semoga dapat bermanfaat bagi teman-teman.

~God Luck~