Cara Mudah Membuat Menu Tab View di Blogspot

Cara Mudah Membuat Menu Tab View di Blogspot. Pada tutorial kali ini saya akan share tentang cara membuat Menu Tab View di blogspot, postingan ini sekaligus menjawab komentar salah seorang sobat kita "cara buat recent post, terus recent comment, dan tweet, seperti ini http://prntscr.com/1xudqa, di buat dong tutorialnya...".

Sebelum kita menuju ke tutorilnya, ada baiknya kita mengetahui apa itu Menu Tab View. Menu TAB view adalah merupakan suatu widget yang berisi beberapa widget yang terdiri dari beberapa slot yang dapat di isi sesuai keinginan, misalnya Daftar isi blog dan lain-lain. Dengan menggunakan tab view kita juga dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita. lihat contoh gambar di bawah ini :

Nah, jika sobat skalian sudah mengerti, langsung kita ke tutorialnya...

1. Login ke Blogger.
2. Kemudian Pilih Tata Letak → Tambah Gadget → html/javascript.
3. Copy paste code dibawah ini dan letakkan ke kolom html/javascript.

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px;
height: 22px;
text-align: center;
margin: 5px 0px 0px 3px;
background-color: #000;
padding-top: 2px;
border: 1px solid #ffffff;
border-bottom: 1px solid #ccc;
font-family: "Arial, Helvetica, sans-serif", Arial;
font-weight: 900;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc;
overflow: hidden;
background-color: #ffffff;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px;
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 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>

Keterangan:

Silahkan ganti tulisan berwarna merah sesuai dengan keinginan sobat
Tulisan berwarna hijau merupakan warna judul Tab
Tulisan berwarna biru merupakan judul Tab
Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota.
Tulisan yang di cetak tebal merupakan isi tab view.

** Jika sobat ingin menambah menu tab baru, cukup tambahkan kode yang berwarna kuning di bawahnya.

Demikian tutorial Cara Mudah Membuat Menu Tab View di Blogspot, semoga bermanfaat......

Cara Mudah Membuat Menu Tab View di Blogspot

Artikel Terkait Blogging ,Tutorial Blog

0 komentar:

Posting Komentar

Kategori

Arsip Blog

Link Teman