Cara membuat Menu MultiTab View Sidebar di Blogspot




Cara membuat Menu MultiTab View Sidebar di Blogspot


     Sebenarnya sudah banyak Artikel / Postingan yang menjelaskan tentang hal ini, akan tetapi tidak ada salahnya jika saya bahas lagi mengenai Cara membuat Menu MultiTab View Sidebar di Blogspot ini. Mungkin saja Artikel / Postingan ini lebih mudah dimengerti oleh Sobat dibandingkan dengan Artikel / Postingan yang lain.
Menu MultiTab View adalah menu yang bisa memuat 2-3 menu bahkan lebih dalam satu kotak ini berfungsi untuk meminimalkan halaman yang kita pakai selain itu menu ini juga bisa mempercantik tampilan pada Blog kita.
Oke langsung saja kita terapkan Cara ini ke dalam Web/Blog Sobat, Tampilan Menu MultiTab View seperti gambar di bawah ini :

menu multitab view

Cara membuatnya sangatlah mudah, Beginilah Cara membuat Menu MultiTab View Sidebar di Blogspot tersebut

Ikuti langkah-langkah berikut:
  • Login ke akun Blogger Sobat
  • Masuk ke rancangan / design
  • Pilih Tata Letak
  • Pilih Add New Widget / Tambah Gadget / Element
  • klik HTML/Javascript.
  • Kemudian copy paste kode dibawah ini:
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* 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: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*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: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* 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: 385px;" class="Tabs">
<a><span >TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span >TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">
<div class="Page">
<div class="Pad">

Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 1

</div>
</div>

<div class="Page">
<div class="Pad">

Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 2

</div>
</div>

<div class="Page">
<div class="Pad">

Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 3

</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://projectloss.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
Jangan lupa klik Simpan, Silahkan edit warna, ukuran menurut selera Sobat
Untuk mempermudah dalam pengeditan warna silahkan klik Disini
Selamat Mencoba,,,,,

Cara membuat Menu MultiTab View Sidebar di Blogspot



Share this to:
Anda sedang membaca artikel : Cara membuat Menu MultiTab View Sidebar di Blogspot dengan url http://arifpoetrayunar.blogspot.com/2011/08/cara-membuat-menu-multitab-view-sidebar.html

Artikel Terkait: Cara membuat Menu MultiTab View Sidebar di Blogspot

{ 16 komentar to : Cara membuat Menu MultiTab View Sidebar di Blogspot | Skip to Comment }

Rudy Hartono mengatakan...

terima kasih dengan informasinya yang sangat berguna dan bermanfaat sekali, visit me back

TANTO mengatakan...

trmksh ilmu nya, salam kenal dari newbi jogja

vian okta mengatakan...

TQ......ilmunya bermanfaat banget

Cadis Hangoluan mengatakan...

thanks infonya gan..

ika putriey mengatakan...

sipp ... sya coba ya .. hhe

i post mengatakan...

mantabh gan infonya

Risalahati Dedic Ahmad mengatakan...

ini lebih baik cz ga pake ngedit template jd tidak riskan

Mr. Solusi mengatakan...

thanx gaan, sangat bermanfaat :D

Anonim mengatakan...

This article will assist the internet users for building up new webpage or
even a weblog from start to end.
Here is my web page ; Continued

ternak ayam kampung mengatakan...

ini tidak otomatis mengikuti lebar widget ya?trus kalau mau menambah label dalam kotak view gimana?

odang mengatakan...

bisa otomatis lohh

pengobatan benjolan di payudara mengatakan...

thanks gan

Kedai Jelly Gamat Gold G mengatakan...

Terimakasih atas informasinya sangat bermanfaat :)

Franklin Impianro Turnip mengatakan...

Info ini bermanfaat banget. Terima kasih

infotech mengatakan...

gak bisa di copas gan script diatas

Master mengatakan...

gimana cara copy html nya gan, ?

Poskan Komentar

 
Back To Top