Home » , » Cara Mudah Membuat Menu Tab View di Blogspot

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 LetakTambah Gadgethtml/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......



Artikel Terkait Blogging ,Tutorial Blog

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Dbugiest Blog

0 komentar:

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. DBUGIEST BLOG - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger