Hallo rekan-rekan blogger dan pengunjung setia blog ini, malam ini tiba-tiba saya berpikir untuk sedikit meminimize halaman blog/web saya, agar lebih menghemat tempat dan para pengunjung semua bisa melihat Tampilan Link, Komentar, Artikel Postingan, Banner dan lain-lain. Dan Tab View ini berbentuk sebuah kotak yang besarnya bisa kita atur sesuai dengan yang kita inginkan, sehingga dapat menghemat ruang sidebar di blog/web kita.
Apa itu Tab View ?
Anda bisa melihatnya di bawah postingan blog/Blog Post saya, dan Anda ingin tahu cara membuatnya adalah sebagai berikut :
Sebagai Langkah Awal :
- Login ke Account Blogger Anda
- Lalu klik "Layout / Tata letak" dan lalu klik "Edit HTML"
- Kemudian cari kode ini ]]></b:skin>
- Lalu Copy-kan kode dibawah ini, dan letakkan sebelum atau diatas kode ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
- Perhatikan text-text yang dicetak biru, itu adalah keterangan yang ada di Tab View. Ada ukuran, style border dan warna . Silahkan ganti sesukamu.Untuk melihat kode warna klik disini.
Melihat style border klik disini. - Selanjutnya copy kode dibawah ini, letakkan sebelum kode </head>
<script src='http://www.geocities.com/sehatserasi72/tabview.js' type='text/javascript'/>
- Kemudian Simpan
Langkah Selanjutnya :
- Pilih "Page Elements"
- Trus Pilih "Add a Gadget" --> "HTML/Javascript" untuk meletakkan Tab Menu View ini.
- Copy script dibawah ini kedalamnya:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<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');
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<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');
- Lalu Simpan/Save
Keterangan:
- Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar Tab View.
- Kode yang berwarna Ungu text yang muncul di Menu utama (Menu Atas).
- Kode yang berwarna Hijau adalah isi dari Tab View.
Demikianlah informasi yang bisa Saya berikan dan sudah di coba di blog/website ini, semoga berguna buat Anda semua.
Terimakasih.
nice tips sob! memang bener sob! ada ribuan situs bisnis on line! kalau yg gratisan nggak ada salahnya kita coba!! kalau anda tak mencoba kapan anda tau situs tersebut scam atau nggak? prinsip saya tak ada salahnya kita mencoba!
ReplyDeleteGood tutorial ..
ReplyDeleteaku praktekkan nanti kalau ada waktu ya !
Thanks bangeet.
Mau ketawa ? Lihat saja di jokes anekdot
Nice info ...
ReplyDeleteI like this blog, very useful to improve my blog be eye catching.
I need more advice and suggestion from you, the master ^_^.
trims dah berbagi sob....
ReplyDeletestop dreaming start action
infonya sangat bermanfaat stop dreaming start action
ReplyDelete@lusalary : benar sekali sobat, saya setuju sekali, dan tidak ada salahnya kita meneliti dulu apakah itu scam atau bukan, supaya usaha kita tidak sia-sia. Dan dengan memiliki banyak teman di blog, kita pasti akan saling memberitahukan. Terimakasih infonya sobat.
ReplyDelete@k gibran : Terimakasih sobat, senang sekali kalau artikel yang saya buat berguna buat anda.
@mike gyver : Thanks for visit and read my simple article, and hope useful for you friend.
@Stop Dreaming Start Action : Terimakasih sobat sudah berkunjung dan berkomentar disini.
kunjungan ke blog sahabat semoga bisa tukar menukar informasi di dunia maya terima kasih ... datang ke blog sederhanaku yaw tq
ReplyDeleteartikel disini keren2,sy betah bc2 disini :)
ReplyDeleteaku praktekin
ReplyDeleteTHANK INFGNYA :)
ReplyDeletethanks infonya ya bos...
ReplyDeleteanaa snang dgn tab viue ini bs mnghemat t4, prnah buat ini diblog, awal2x brfungsi, skrg klu diklik tdk brfungsi lg, jd anaa hapus? apa krn scriptx digeocitis yg dah dihapus yahoo?
ReplyDeletelangsung ke tkp bos
ReplyDeletebro, gw masih newbie neh bikin blog.. gimana caranya kalo kita mau buat di header ada : home, contact, about us, FAQ. Tolong di jelasin detail ya bro ke email aja : nailzone_leo@yahoo.com
ReplyDeletebtw ini blog gw : http://jasaimport.blogspot.com
help me.. thanks
di coba
ReplyDeletekok punya saya gag bisa ya....
ReplyDeletemantab bgt.... aku soba dulu ya bos ^_^ nanti kalo gak bisa balik lagi....
ReplyDeletemskasih tutorialnya
ReplyDeletethanks sob info nya
ReplyDeletePosting ini ' cara membuat tabview di blog anda' sungguh membantu, terima kasih sudah berbagi. salam
ReplyDeleteThnkZ gan ,, [ www.deevro.co.cc ],,
ReplyDeletevisit back Plese ,,, ^_^
terima kasih atas infonya
ReplyDelete