Membuat tab menu views yang cantik

Memang dengan Menu Tab View bisa menghemat tempat di sidebar karena dalam satu widget bisa menyimpan beberapa menu sesuai kehendak kita , bukan itu saja tampilannyapun tampak cantik dan terkesan profesional, seperti tampilan di bawah ini. .

Cara Membuat Menu Tab View ini adalah sbb. :

1. Masuk ke Dashboard , Pilih Layout , lalu klik Edit HTML
2. Backup template dulu dengan  Download Full Template
3. Kemudian cari kode ini ]]></b:skin>
4. Untuk memudahkan pencarian , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next. 
5. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>

   /* Menu Tab View
   ----------------------------------------------- */
   div.TabView div.Tabs {widht:100%;
   padding-top: 0px;
   height: 24px;
   overflow: hidden;
   }
   /* Menu Utama */
   div.TabView div.Tabs a {
   float: left;
   display: block;
   width: 110px;
   text-align: center;
   height: 30px;
   padding-top: 7px;
   margin-right:4px;
   vertical-align: middle;
   border: 1px solid #0000;
   border-bottom-width: 0;
   margin:0px;
   padding: 5px 0;
   font-family:Arial,Helvetica,sans-serif;
   font-size:12px;
   font-weight:bold;;
   background-color: #4c4c4c; 
   color: #FFFFFF;
   -moz-border-radius-topleft:15px;
   -moz-border-radius-topright:15px;
   -webkit-border-top-left-radius:15px;
   -webkit-border-top-right-radius:15px;
   }
   div.TabView div.Tabs a.Active {
   background-color: #FFFFFF; 
   color: #000000;
   }
   div.TabView div.Tabs a:hover {
   background-color: #999999; 
   color: #FFFFCC;
   font-weight: bold;
   }
   /* Kotak Utama */
   div.TabView div.Pages {
   clear: both;
   border: 1px solid #00000;
   overflow: hidden;
   background:#FFFFFF;
   }
   div.TabView div.Pages div.Page {
   height: 100%;
   padding: 7px;
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad {
   padding: 5px 0px;
   font-size: 12px;
   }
   /* tabview css end */

6. Perhatikan text-text yang berwarna pink, silahkan disesuaikan ya.
7. Selanjutnya pasang kode berikut ini sebelum kode </head>

   <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>

8. Jika sudah tinggal Save Templates
9. Selesai …  untuk langkah pertama,
10. Langkah ke dua Silahkan masuk kemenu "Page Elements"
11. Klik  "Add a Gadget" ,  pilih "HTML/Javascript"  ,
12. Kemudian copy paste kode dibawah ini :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div></div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div></div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div></div>
</div></div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Categories: Blogger