Minggu, 20 Mei 2012
Cara Membuat Menu Tab View
Sobat blogger pastinya sudah tau yang dinamakan
tabview, banyak sekali web page dan blog yang sudah menggunakan tabview/
tabmenu dalam blognya. Fungsi utamanya adalah untuk menghemat space
yang ada di halaman web kita, dan membuat blog/web lebih terlihat rapi.
Tab view itu contohnya seperti ini, seperti yang saya gunakan pada blog saya :
Tab view itu contohnya seperti ini, seperti yang saya gunakan pada blog saya :
Banyak Sekali kegunaan Tab view ini,bentuknya yang mungil nan imut ini bisa menampung berbagai contents yang yang sangat di perlukan dalam blog kita. Contohnya seperti punyaku yang ada disamping kanan itu,bisa dilihat sendiri.
Langsung Saja...
Beginilah cara untuk membuat menu tab view tersebut
1. PErtama anda harus Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode berikut ( gunakan CTRL+F untuk mempermudah pencarian) ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.
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;
}
4. Yang perlu di perhatikan adalah text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script type='text/javascript'> function tabview_auxundefinedTabViewId, id) { var TabView = document.getElementByIdundefinedTabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while undefinedTabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if undefinedTab.tagName == "A") { i++; Tab.href = "javascript:tabview_switchundefined'"+TabViewId+"', "+i+");"; Tab.className = undefinedi == id) ? "Active" : ""; Tab.blurundefined); } } while undefinedTab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while undefinedPages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if undefinedPage.className == 'Page') { i++; if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = undefinedi == id) ? 'block' : 'none'; } } while undefinedPage = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); } function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId, 1); } </script> <script type='text/javascript'>tabview_initializeundefined'TabView'); </script>
6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :
<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'); </script>
Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.
Label:
Tips Blogging
Langganan:
Posting Komentar (Atom)
Music
Quotes
" Selagi kau bisa merasakan kebahagian , senyum , itulah dimana kau merasa sempurna . tidak lupa juga ditemani dengan Ibadah dan Senyuman " - Zikry Maoelana
Blog Archive
- 2013 (14)
-
2012
(82)
- Oktober(20)
- Juli(11)
- Juni(1)
-
Mei(20)
- Cheat E&A "Cara membuat Pasukan secara Gratis"
- Kata Kata Cinta
- -Wallhack,1 hIt,hollow,Damage,invicible,magnet,++ddl
- Cara Membuat Teks Area
- Cara Membuat Menu Tab View
- Cara Membuat Search Engine
- I LOVE THE WAY YOU LIE - 9a SMPN 14 Pontianak
- Step Up Revolution
- Biodata L (Ryuzaki)
- Cara Mendaftarkan Blog Ke Mesin Pencari
- Kata - Kata Bijak Hari Ini
- Cara Menaikan Followers , Tanpa Follow Orang
- Cara Membuat Efek Refresh/Reload di Blog
- Menampilkan status YM di blog
- Cara membuat Spoiler di Blog
- Cara membuat thread comment reply seperti di wordp...
- Cara Pasang Read More Animasi
- Cara Merubah Domain Blogspot menjadi .CO.CC
- Cara Pasang Tombol Share ke Social Bookmarking
- Cara Mudah Mengganti Favicon Blogger Tanpa Mengedi...
- April(12)
- Maret(17)
- Januari(1)
- 2011 (19)
About Me
Entri Populer
-
Sebelumnya : Fairy Tail Chapter 302 Lima Juli, sehari hari sebelum hari terakhir Daimatou Enbu, di tempat kediaman Fairy Tail ... "...
-
"Mari kita jelaskan lagi peraturannya, kapoh. Ketika para peserta saling bertemu di Kota, mereka bertarung. Satu poin untuk tim yang...
-
1. Ayah ingin anak-anaknya punya lebih banyak kesempatan daripada dirinya, menghadapi lebih sedikit kesulitan, lebih tidak tergantung pa...
Labels
- 10B (1)
- 9a (2)
- Anime (9)
- Cheat (4)
- Death Note (1)
- Digimon (1)
- Fairy Tail (5)
- Game (4)
- Info (12)
- Kata-Kata (7)
- Lyrics (1)
- Meme Comic (2)
- Naruto (3)
- News (1)
- Tips Blogging (13)
- Tugas (3)
Member
Like Box
Archivo del blog
-
▼
2012
(82)
-
▼
Mei
(20)
- Cheat E&A "Cara membuat Pasukan secara Gratis"
- Kata Kata Cinta
- -Wallhack,1 hIt,hollow,Damage,invicible,magnet,++ddl
- Cara Membuat Teks Area
- Cara Membuat Menu Tab View
- Cara Membuat Search Engine
- I LOVE THE WAY YOU LIE - 9a SMPN 14 Pontianak
- Step Up Revolution
- Biodata L (Ryuzaki)
- Cara Mendaftarkan Blog Ke Mesin Pencari
- Kata - Kata Bijak Hari Ini
- Cara Menaikan Followers , Tanpa Follow Orang
- Cara Membuat Efek Refresh/Reload di Blog
- Menampilkan status YM di blog
- Cara membuat Spoiler di Blog
- Cara membuat thread comment reply seperti di wordp...
- Cara Pasang Read More Animasi
- Cara Merubah Domain Blogspot menjadi .CO.CC
- Cara Pasang Tombol Share ke Social Bookmarking
- Cara Mudah Mengganti Favicon Blogger Tanpa Mengedi...
-
▼
Mei
(20)
0 komentar:
Posting Komentar