Membuat TAB VIEW

Apa yang anda lakukan jika space blog anda semakin sempit, sementara artikel postingan semakin bertambah, belum lagi widget baru yang mulai banyak,seakan akan halaman blog semakin sempit saja, sehingga ruang satu centimeter persegi sangat berarti sekali. Jika masalah seperti itu anda rasakan saat ini, jangan kuatir. karena anda bisa menambah TAB VIEW untuk solusi masalah tersebut. Untuk membuatnya, baca terus tutorial dibawah ini.

Yang anda harus lakukan adalah sebagai berikut :
1. Login dulu ke blog kamu trus pilih menu Layout --> Edit HTML
2. Cari script seperti dibawah ini
]]></b:skin>

Kemudian masukkan kode berikut ini diatas kode ]]></b:skin>

div.TabView div.Tabs<br /><br />{<br /><br />height: 24px;<br /><br />overflow: hidden;<br /><br />}<br /><br />div.TabView div.Tabs a<br /><br />{<br /><br />float: left;<br /><br />display: block;<br /><br />width: 98px;<br /><br />text-align: center;<br /><br />height: 24px;<br /><br />padding-top: 3px;<br /><br />vertical-align: middle;<br /><br />-moz-border-radius-topleft:12px;<br /><br />-moz-border-radius-topright:12px;<br /><br />border-top: 1px solid #d9e3ff;<br /><br />border-left: 1px solid #d9e3ff;<br /><br />border-right: 1px solid #d9e3ff;<br /><br />border-bottom: 1px solid #d9e3ff;<br /><br />font-family: "verdana", Serif;<br /><br />font-weight: 900;<br /><br />color: #1E62B6;<br /><br />}<br /><br />div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active<br /><br />{<br /><br />background-color: #F2F2F2;<br /><br />}<br /><br />div.TabView div.Pages<br /><br />{<br /><br />clear: both;<br /><br />border-left: 1px solid #d9e3ff;<br /><br />border-right: 1px solid #d9e3ff;<br /><br />border-bottom: 1px solid #d9e3ff;<br /><br />overflow: hidden;<br /><br />background-color: #ffffff;<br /><br />}<br /><br />div.TabView div.Pages div.Page<br /><br />{<br /><br />height: 100%;<br /><br />padding: 0px;<br /><br />overflow: hidden;<br /><br />}<br /><br />div.TabView div.Pages div.Page div.Pad<br /><br />{<br /><br />padding: 3px 5px;<br /><br />}

3. Cari script seperti dibawah ini
</head>
Kemudian masukkan kode berikut ini diatas kode </head>

<script src='http://sites.google.com/site/hitsukeproject/tabview.js' type='text/javascript'/>

4. lalu klik SAVE

5. Pemasangan di SIDE BAR
Pilih menu Page Elements ---> Trus Add Gadget ---> pilih HTML / JavaScript

lalu copy script dibawah ini dan paste di widget tersebut

<form action="tabview.html" method="get"><br /><br /> <div id="TabView" class="TabView"><br /><br /> <div style="width: 300px;" class="Tabs"><br /><br /> <a class="Active" href="javascript:tabview_switch('TabView',%201);">Tab One</a><br /><br /> <a class="" href="javascript:tabview_switch('TabView',%202);">Tab Two</a><br /><br /> <a class="" href="javascript:tabview_switch('TabView',%203);">Tab Three</a><br /><br /> </div><br /><br /> <div style="width: 300px; height: 275px;" class="Pages"><br /><br /><br /> <div style="overflow: auto; height: 274px; display: block;" class="Page"><br /><br /> <div class="Pad"><br /><br /> <ol><br /><br /> <li><a href="Your Link Here">Your Link Name </a></li><br /><br /> <li><a href="Masukkan link postingan kamu disini">Nama Postingan </a></li><br /><br /> </ol><br /><br /> </div><br /><br /> </div><br /><br /><br /> <div style="overflow: auto; height: 274px; display: none;" class="Page"><br /><br /> <div class="Pad"><br /><br /> <ol><br /><br /> <li><a href="Your Link here">Name of your link </a></li><br /><br /> <li><a href="Masukkan link postingan kamu disini">Nama Postingan </a></li><br /><br /> </ol><br /><br /> </div><br /><br /> </div><br /><br /><br /> <div style="overflow: auto; height: 274px; display: none;" class="Page"><br /><br /> <div class="Pad"><br /><br /> <ol><br /><br /> <li><a href="Your Link here">Name of your link </a></li><br /><br /> <li><a href="Masukkan link postingan kamu disini">Nama Postingan </a></li> <br /><br /> </ol><br /><br /> </div><br /><br /> </div><br /><br /><br /> </div><br /><br /> </div><br /><br /> </form><br /><br /><br /> <script type="text/javascript"><br /><br /> tabview_initialize('TabView');<br /><br /> </script>

Lalu lihat hasilnya, mudah bukan

Dipulung dari :hitsuke.blogspot.com

Related Posts by Categories