Membuat Tab View Di Blog

Screenshot
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 blog 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 + "'";//bsvar 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><script src="http://kompiajaib.blogspot.com/feeds/posts/summary/-/Software?max-results=30&alt=json-in-script&callback=recentpostslist"></script><a href="http://kompiajaib.blogspot.com/search/label/Software" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
</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 type='text/javascript'> //<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);var Tabs=TabView.firstChild;while(Tabs.className!="Tabs")Tabs=Tabs.nextSibling;var Tab=Tabs.firstChild;var i=0;do{if(Tab.tagName=="A"){i++;Tab.href="javascript:tabview_switch('"+TabViewId+"', "+i+");";Tab.className=(i==id)?"Active":"";Tab.blur()}}while(Tab=Tab.nextSibling);var Pages=TabView.firstChild;while(Pages.className!='Pages')Pages=Pages.nextSibling;var Page=Pages.firstChild;var i=0;do{if(Page.className=='Page'){i++;if(Pages.offsetHeight)Page.style.height=(Pages.offsetHeight-2)+"px";Page.style.overflow="auto";Page.style.display=(i==id)?'block':'none'}}while(Page=Page.nextSibling)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)} //]]> </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://kompiajaib.blogspot.com/2012/06/membuat-tab-view-di-blog.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. kompiajaib.blogspot.com silahkan ganti dengan blog Anda. 30 merupakan banyaknya recent post yang ditampilkan, dan http://kompiajaib.blogspot.com/search/label/Software 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.

Jika Anda ingin membuat dua buah tab view atau lebih, cukup menggunakan 1 buah javascript seperti di bawah ini. Sebaiknya simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);var Tabs=TabView.firstChild;while(Tabs.className!="Tabs")Tabs=Tabs.nextSibling;var Tab=Tabs.firstChild;var i=0;do{if(Tab.tagName=="A"){i++;Tab.href="javascript:tabview_switch('"+TabViewId+"', "+i+");";Tab.className=(i==id)?"Active":"";Tab.blur()}}while(Tab=Tab.nextSibling);var Pages=TabView.firstChild;while(Pages.className!='Pages')Pages=Pages.nextSibling;var Page=Pages.firstChild;var i=0;do{if(Page.className=='Page'){i++;if(Pages.offsetHeight)Page.style.height=(Pages.offsetHeight-2)+"px";Page.style.overflow="auto";Page.style.display=(i==id)?'block':'none'}}while(Page=Page.nextSibling)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
//]]>
</script>
Kemudian tambahkan angka 2 pada setiap tulisan TabView sehingga menjadi TabView2. Begitu juga kalau Anda ingin membuat tiga buah tab view di sidebar blog Anda.

Demikian sharing cara Membuat Tab View Di Blog kali ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu yang baru, setiap orang pasti melakukan try and error.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments