Tutorial Bagaimana Cara Membuat Menu TabView

Kali ini saya mencoba menjelaskan akan pertanyaan-pertanyaan yang muncul dari rekan saya yang menanyakan tentang bagaimana cara membuat TabView.

Apa itu TabView?
Seperti apa bentuknya?
Bagaimana cara membuatnya?

Tab View sangat berguna untuk blog karena dapat menghemat ruang pada blog dan bisa menampung begitu banyak link serta konten blog di dalamnya.
Contoh bentuk bisa diliat seperti berikut ini:

Cara Buat TabView

Kemudian, bagaimana cara membuatnya?
Ikuti langkah-langkah berikut ini:

  1. Login ke akun blog
  2. Pilih menu Layout » masuk ke Edit HTML
  3. Cari kode ini ]]></b:skin>
  4. Copy lalu paste kode berikut ini sebelum 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 #000000; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Times New Roman, Serif; /* Font Menu Utama Atas */
    font-weight: 900;
    color: #000080; /* Warna Font Menu Utama Atas */
    }

    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #BDBDBD; /* Warna background Menu Utama Atas */
    }

    div.TabView div.Pages
    {
    clear: both;
    background-color: #FFFFFF; /* Warna background Kotak Utama */
    border: 1px solid #000000; /* Warna border Kotak Utama */
    overflow: hidden;
    }

    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }

    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    Teks yang berwarna merah adalah keterangan untuk mengatur tab view. Seperti ukuran tebal border, tinggi dan lebar tab view serta warna background.
  5. Kemudian pasang script berikut sebelum kode </head>
    <script src='http://eganesha.com/blog/tabview.js' type='text/javascript'/>
  6. Kemudian klik Save Template
  7. Lalu masuk ke menu Page Elements
  8. Pilih Add a Gadget » Pilih menu HTML/Javascript, Copy lalu paste kode berikut di dalamnya.
    <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>
  9. Lalu klik Save dan tempatkan widget tabview agar sesuai dengan template anda.
  10. Berhasil

Sebagai catatan:
  • Angka yang berwarna merah adalah ukuran lebar dan tinggi widget tab view.
  • Kode yang berwarna hijau adalah teks pada menu utama di bagian atas.
  • Kode yang berwarna biru adalah teks yang berada di halaman tab view yang bisa Anda isi dengan link apa saja, gambar, banner dan script lainnya.
  • Untuk menambahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. Tambahkan menu berikutnya di bawahnya.

Contoh pengaturan teks :
  • Teks "Tab 1" dapat diganti dengan teks lain seperti "FAMILY", "MALE" “FEMALE” atau teks lainnya.
  • Sedangkan pada bagian isi menu di bawahnya yang berwarna biru Tab 1.1 bisa diganti dengan link posting blog seperti ini :
    <ul>
    <li><a href="http://ganesha-system.com/?id=admin">Bisnis Pulsa</a>
    </li>

Mudah-mudahan tutorial membuat TabView ini dapat bermanfaat.

Bagaimana menurut Anda?
Beritahu bila mengalami kesulitan dalam memahami tutorial ini.

Kategori Posting Terkait



Comments :

8 komentar to “Tutorial Bagaimana Cara Membuat Menu TabView”

Yuril mengatakan... on 

My smiling in a very I read this article.

Aldi mengatakan... on 

ruwet bnget ya bro,,
aku tidak bisa??

main ke bog aku ya
http://untuoke.blogspot.com/

Just Me mengatakan... on 

bro, aku udah buat dan jadi, btw cara menggunakanya gimana ya .. ?? Aku bloger pemula banget neh. inputnya dong tentang blog saya, http://handphonecomputer-hans.blogspot.com/. thx

aji mengatakan... on 

wah makasih bro infonya sangat membantu saya

ndi mengatakan... on 

keren bro, mesti gw coba neh.

d7sukses mengatakan... on 

Trims Artikelnya Top lah...and Tambah artikel yang lainnya.

koerniawan mengatakan... on 

nice post gan.... visit n follback blog ane ya... thanks,...

Rudy Hartono mengatakan... on 

mantab sob

  • Update Terbaru
  • Info Menarik
  • Networking



Poskan Komentar

 

IP Technorati => RNUGGKZFF7CR

About Me - Administrator

Admin Netpreneur Blog Indonesia - Ukafahrurosid.com
UKA FAHRUROSID
a 25 years old. I've completed college degree from Education University of Indonesia (UPI)-Bandung, West java, Indonesia in 2011.
Learn on this blog since 10th of November 2008. Now, just to innovate to make Netpreneur Blog Indonesia has many visitors, so my main goal in blogging can be achieved is to optimize blogs as a means of promotion, income and relationships. [ Read More ]

PageRank
SEO Stats powered by 

MyPagerank.Net
Google PageRank Checker Powered by  

MyPagerank.Net
free search engine submission
W3 Directory - the World 

Wide Web Directory
Online Marketing Blogarama - The Blog 

Directory
Site Meter
Top Marketing Sites
Uka Fahrurosid - Find me on Bloggers.com PlanetBlog - Komunitas Blog Indonesia
Fav This With Technorati Business Blogs - Blog Rankings
Blog Directory for the Philippines Business blogs
Real Time Web Analytics Clicky Blog Directory & 

Search engine
Globe of 

Blog
Kostenlose Backlinks bei http://www.backlink-clever.de Active 

Search Results
blog-

indonesia.com
what is my ip address?
Business
Business & Finance - Top Blogs Philippines

Free Directory List



Powered by 

Mysiterank






Ping your blog, website, or RSS 

feed for Free
Text Back Link Exchange.com
free search engine submission
RNUGGKZFF7CR