Membuat Tab View di blog v2

Membuat Tab View Di Blog

Pagi ini saya akan share cara Membuat Tab View Di Blog seperti yang Anda lihat pada gambar di atas atau pada Tab View blog saya di samping kanan. Sebenarnya saya dapat kode scriptnya dari Maskolis (pembuat template blog ini), namun karena ada temen yang request scriptnya, sekalian saja saya buat postingannya.

Cara Membuat Tab View Di Blog sedikit gampang karena kita tidak usah mengobok-obok kode HTML blog kita, cukup menambahkan kode scriptnya di gadget HTML sidebar blok kita. Bagi yang ingin mencobanya, silahkan copy kode script Tab View di bawah ini, kemudian paste di gadget HTML sidebar blog Anda.


<style type="text/css"> div.TabView div.Tabs a { float: left; display: block; width: 90px; /* 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: 2px solid #393939; /* Warna border kotak Tab */ border-bottom: 2px solid #393939; /*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: none; /* Warna border Kotak Konten */ overflow: hidden; background-color: none; /* 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">Title Tab 1</span></a> <a><span style="color: #fff">Title Tab 2</span></a> <a><span style="color: #fff">Title Tab 3</span></a> </div> <div style="width: 300px; height: 350px;" class="Pages"> <div class="Page"> <div class="Pad"> <script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script> <script type="text/javascript" src="/feeds/posts/default/-/Software?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> <script type="text/javascript"> function recentpostslist(json) { document.write('<ul>'); for (var i = 1; i < json.feed.entry.length; i++) { for (var j = 1; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); } </script> Kode Html disini </div> </div> <div class="Page"> <div class="Pad"> Kode HTML Anda Di Sini </div> </div> <div class="Page"> <div class="Pad"> Kode HTML Anda Di Sini </div> </div> </div></div></form> <script src="http://kompiajaib.googlecode.com/files/tab_view2.js"> </script> <script type="text/javascript"> tabview_initialize('TabView'); </script> <div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://maytommy-perdana.blogspot.com/2012/07/membuat-tab-view-di-blog-v2.html' target='_blank'>widget</a></div>

Keterangan:

Perhatikan tulisan yang berwarna hijau, itu keterangan untuk tiap kode di sampingnya, silahkan rubah kode-kodenya dan sesuaikan dengan theme blog Anda.

Tulisan 300px merupakan lebar widget tab view ini, sesuaikan dengan lebar sidebar blog Anda.

Tulisan 350px merupakan tinggi untuk widget tab view, silahkan sesuaikan dengan keinginan Anda.

Tulisan berwarna ungu muda adalah kode script untuk recent post berdasarkan katagori/label dengan 1 buah thumbnail untuk postingan terakhir. Tulisan Software untuk label postingan Anda yang ingin ditampilkan silahkan ganti dengan URL label yang Anda tampilkan.

Kode HTML Anda Di Sini silahkan ganti dengan kode script widget yang lain seperti recent comment atau yang lainnya. Atau Anda bisa isi semua tab dengan kode script recent post yang warna ungu muda di atas, tinggal ganti nama labelnya saja. Seperti pada tab view di blog saya ini.

  Contoh :

Statistik Twitter Facebook

Ikuti @tommymayperdana free counter
Lillian Vernon Coupon Code
By: Tommy MP Ikuti @tommymayperdana statistik blogku

Kotak Suara

Reaksimu tentang blog ini Profesional Hebat Keren Mengagumkan View Results

Get this widget