• Home
  • Tutorial Keamanan
  • Tutorial Blogging
  • Tips Kesehatan
  • Unik
  • Template Blogspot
  • Contact
  • Technology Tower
    Home » tutorial blog » Membuat Tab View / Multi Tab di Blog

    Membuat Tab View / Multi Tab di Blog

    Posted by Unknown Posted on Rabu, Juli 25, 2012 with 5 comments
    Bagi kamu yang mempunyai pertanyaan 'bagaimana cara menyatukan 3 widget atau lebih menjadi satu?' disini Andi Techno akan membahas cara membuatnya, sebenarnya namanya adalah Tab View, dengan membuat tab view kita dapat menghemat banyak ruang pada sidebar kita karena beberapa widget dapat kita satukan pada tab view, buat kamu yang masih bingung apa dan bagaimana itu Tab View silahkan lihat contohnya: Klik Disini nah lihat disana saya menyatukan widget 'recent post' 'entri populer' dan juga 'label' menjadi satu. Oke, langsung aja yuk sob belajar cara membuat tab view / multi tab di blog.
    1. Masuk ke Dashboard blogger (saat artikel ini dibuat saya masih menggunakan tampilan blogger lama / lawas) , klik rancangan, klik edit HTML.
    2. Cari kode ]]></b:skin> dengan bantuan CTRL+F, kemudian letakkan / copas kode berikut dibawah kode ]]></b:skin> tadi

    div.TabView div.Tabs{height: 24px;overflow: hidden;}div.TabView div.Tabs a{float: left;display: block;width: 84px; text-align: center;height: 24px; 
    padding-top: 3px;vertical-align: middle;border: 1px solid #999999; 
    border-bottom-width: 0;text-decoration: none;font-family: "Times New Roman", Serif; 
    font-weight: 900;color: #1E62B6; 
    }div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #FFFFFF;
    }div.TabView div.Pages{clear: both;border: 1px solid #999999;
    overflow: hidden;background-color: #FFFFFF; }div.TabView div.Pages div.Page{height: 100%;padding: 0px;overflow: hidden;}div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}
    keterangan, kamu bisa mengatur desainnya dengan memperhatikan kode berikut:
    - 84 untuk mengatur lebar menu utama atas
    - 24 untuk mengatur tinggi menu utama atas
    - 999999 adalah kode warna border pada menu atas
    - 1E62B6 adalah kode warna font menu utama atas
    - FFFFFF adalah kode warna background menu utama atas
    - 999999 adalah kode warna border kotak utama
    - FFFFFF adalah kode warna background kotak utama


    3. cari kode </head>, lalu letakkan kode berikut ini sebelum kode </head> tadi


    <script type='text/javascript'>function tabview_aux(TabViewId, id){var TabView = document.getElementById(TabViewId);
    // ----- Tabs -----
    var Tabs = TabView.firstChild;while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
    var Tab = Tabs.firstChild;var i = 0;
    do{if (Tab.tagName == &quot;A&quot;){i++;Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;Tab.blur();}}while (Tab = Tab.nextSibling);
    // ----- Pages -----
    var Pages = TabView.firstChild;while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
    var Page = Pages.firstChild;var i = 0;
    do{if (Page.className == &#39;Page&#39;){i++;if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;Page.style.overflow = &quot;auto&quot;;Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;}}while (Page = Page.nextSibling);}
    // ----- Functions -------------------------------------------------------------
    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
    function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }</script>
    4. Klik simpan template, lalu kembali ke page element / edit tata letak, klik add gadget atau tambah gadget lalu pilih HTML / Javascript, kemudian masukkan kode berikut didalamnya:


    <form action="tabview.html" method="get"><div class="TabView" id="TabView"><div class="Tabs" style="width: 230px;"><a>Menu 1</a><a>Menu 2</a><a>Menu 3</a></div><div class="Pages" style="width: 240px; height: 265px;">
    <div class="Page"><div class="Pad">Menu 1.1 <br />Menu 1.2 <br />Menu 1.3 <br /></div></div>
    <div class="Page"><div class="Pad">Menu 2.1 <br />Menu 2.2 <br />Menu 2.3 <br /></div></div>
    <div class="Page"><div class="Pad">Menu 3.1 <br />Menu 3.2 <br />Menu 3.3 <br /></div></div>
    </div></div></form>
    <script type="text/javascript">tabview_initialize('TabView');</script>

    Keterangan:
    - kode berwarna hijau untuk mengatur tinggi dan lebar tab view
    - kode berwarna orange ganti dengan judul tabview (contoh: recent, arsip, label)
    - kode berwarna biru ganti dengan widget yang mau diisi di tabview (contoh: gambar, link blogroll, script, dll)

    5. Klik simpan lalu lihat hasilnya
    baca juga artikel berikut: Membuat Judul Artikel dengan Efek Glow Keren

    keyword: cara membuat tab view di blog, membuat multi tab di blog, membuat kolom tab di blog, membuat tab menu di blog, membuat tab di blog, menyatukan beberapa widget menjadi satu, trik menghemat ruang di blog
    Share To :
    FACEBOOK DIGG TWITTER GOOGLE+ LINTASKAN STUMBLEUPON

    5 comments

    avatar
    Balas
    Unknown Admin delete 11 Agustus 2012 pukul 15.01

    makasih banyak

    avatar
    Balas
    Unknown Admin delete 12 Agustus 2012 pukul 20.48

    Tono sama-sama sob :D sering mampir ya

    avatar
    Balas
    Unknown Admin delete 11 November 2012 pukul 02.56

    blog nya lumayan

    avatar
    Balas
    Unknown Admin delete 11 November 2012 pukul 10.58

    Cebe lumayan apa dulu nih sob? :D

    avatar
    Balas
    Rizal Uye delete 25 Desember 2012 pukul 19.24

    aku bingung di kode biru kan di ganti dengan kode yang mau di pasng tapi disitu ada mne 1 samapi 3 jadi jumlah nya 9 , bingung disitu bang, mohon pengarahan, keren posting nya, minta templete green nya dong yang dipake buat demo diatas

    Hargai penulis dengan cara memberikan komentar di artikel ini ya sobat.
    Dan berkomentarlah dengan kata-kata yang sopan.

    "Jangan Menggunakan Link Aktif di Komentar" (akan dihapus)

    Untuk menyisipkan gambar dalam komentar : <i rel="image">URL GAMBAR</i>

    Posting Lebih Baru Posting Lama

    Pengikut

    Arsip Blog

    • ►  2015 (24)
      • ►  Mei (13)
      • ►  April (10)
      • ►  Februari (1)
    • ►  2013 (352)
      • ►  Agustus (6)
      • ►  Juli (14)
      • ►  Juni (24)
      • ►  Mei (63)
      • ►  April (59)
      • ►  Maret (63)
      • ►  Februari (56)
      • ►  Januari (67)
    • ▼  2012 (1309)
      • ►  Desember (61)
      • ►  November (83)
      • ►  Oktober (66)
      • ►  September (91)
      • ►  Agustus (123)
      • ▼  Juli (151)
        • Membuat Gambar Pada Posting Bergerak Saat di Sentu...
        • Ini cara menyalakan api dari bongkahan es
        • Sosial media membuat kita jadi anti sosial?
        • Kocak!! 5 Hal yang Membatalkan Puasa
        • 10 Cara olah raga otak
        • 8 Penulis fenomenal dengan pendapatan terkaya di I...
        • Publikasi super spektakuler ala Samsung
        • Find Friends Nearby, fitur Facebook untuk melacak ...
        • 7 Perilaku Aneh Dan Tahayul Yang Dipercaya Tokoh B...
        • Kumpulan Cerita Lucu Klinik Tong Fang
        • Lakukan lima hal ini setelah membuat blog
        • ASUS PadFone, tiga perangkat menjadi satu
        • 7 Apartemen Terunik Di Dunia
        • 7 Jalan Terunik Di Dunia
        • 100 tahun lagi, Florida Selatan akan ditelan lautan
        • 3 Hewan jantan dengan kemaluan teraneh di dunia
        • 10 Kelakuan Paling Nyentrik Yang Dilakukan Para Mi...
        • 5 Game Yang Wajib Dimiliki iPad
        • Membuat Link Pada Gambar Terbuka Otomatis Saat di ...
        • Apple dan Facebook menjadi satu team?
        • Reebok luncurkan sensor pendeteksi kebugaran
        • 16 Mitos Tentang Tol Cipularang
        • Hal-hal yang Bisa Kamu Lakukan Kalau Ada Dangdutan...
        • Zerg Rush, 'alien' bulat pemakan tulisan di laman ...
        • Mau tahu sosial media apa saja yang populer selain...
        • 100 Film Paling Laris Sepanjang Masa
        • 6 Jenis Semut Yang Langka
        • Bukti nyata, efek buruk sinar UV pada wajah!
        • Pengguna Android di tahun 2012 meningkat 4x lipat
        • Membuat Tab View / Multi Tab di Blog
        • Jalan raya terlebar didunia
        • 9 Tempat Bulan Madu Terbaik Di Dunia
        • Android 4.1 Jelly Bean punya fitur mirip Apple Siri
        • Membuat Accordion Menu dengan Efek Transisi Keren
        • Nexus Q, bola Cloud pertama dari Google
        • Persimpangan Paling Rumit Di Dunia
        • Helikopter Terbesar Di Dunia
        • Arkeolog Korea temukan sawah purba berusia 5600 tahun
        • Facebook bantah mengganti email tanpa izin
        • Membuat Link Terbuka Otomatis Saat di Sentuh Mouse
        • 7 Keajaiban Kuno Di Dunia
        • 10 Sayuran Dan Buah Terbesar Di Dunia
        • Pengguna Chrome meningkat dua kali lipat dari tahu...
        • Google Glass baru akan dinikmati konsumen tahun 2014?
        • 7 Tentara Wanita Terbaik Di Dunia
        • 10 Perjalanan Manusia Terekstrim Di Dunia
        • Mesin penjual otomatis aneh yang hanya ada di Jepang
        • Jurnalis dan situs jejaring sosial
        • 7 Taman Nasional Tercantik Di Dunia
        • 5 Hacker Wanita Paling Eksis Di Dunia
        • Membuat Judul Posting dengan Efek Glow Keren
        • Kini Chrome tersedia untuk iPhone dan iPad
        • Jadwal peluncuran BlackBerry 10 mundur sampai tahu...
        • 5 Blogger Wanita Paling Ngetop Di Dunia
        • Mengatasi Grup Facebook Blank / Error
        • 5 Pernikahan Paling Tidak Masuk Akal Di Dunia
        • Militer Amerika bangun proyek senjata laser
        • Cara Membuat Daftar Isi / Sitemap Blogger
        • Hootsuite tambahkan Instagram dalam dashboardnya
        • 10 Foto Langka Dari Jenis Hewan Yang Sudah Punah D...
        • Orang dengan Mulut Terluas Di Dunia
        • Indosat, Operator paling peduli lingkungan hidup
        • Alasan kenapa Microsoft membuang tombol start di W...
        • Kilas balik kesuksesan Apple iPhone
        • Bentuk Uang Rp1000 Dari Tahun Ke Tahun
        • Foto-Foto Adegan Seks di Luar Ruangan yang Terekam...
        • 10 Teknologi Asli Dari Jerman
        • 21 Desember 2012 bukan akhir dunia?
        • Peneliti temukan bukti air laut di satelit Saturnus
        • Tips Tidur Nyaman Dan Terasa Nyenyak
        • 20 Hal Yang Bisa Menghancurkan Diri Sendiri
        • Popchilla: Robot imut, teman belajar anak autis
        • Twitter tendang LinkedIn
        • Cara Dan Tips Mengecilkan Perut Buncit
        • 7 Tempat Yang Belum Terjamah di Dunia
        • Perbandingan antara Apple TV dan Google Nexus Q
        • Lho, cat semprot kok jadi baterai?
        • 10 Selebriti dengan Tindak Kriminal Paling Konyol
        • Cara Agar Tidak Hamil Setelah ML
        • 3 Mesin penjual otomatis canggih di Jepang
        • BlackBerry Messenger (BBM) lumpuh?
        • Jawaban ilmuwan atas beberapa pertanyaan imajinasi
        • Kumpulan foto lucu gokil dan unik
        • Stonehenge simbol perdamaian dunia?
        • Suhu dunia teknologi semakin memanas
        • Penemuan benda-benda sederhana yang sangat berguna
        • Bahaya Tidur Telentang
        • BlackBerry juga punya aplikasi seperti Apple Siri ...
        • Arkeolog menguak situs terpendam suku Ychsma di Peru
        • 5 Jenis Orang Gila Berdasarkan Penyebab Kegilaannya
        • Kenapa Einstein Melet Waktu difoto
        • Google bagi ilmu gratis secara online
        • Program pemutar video VLC kini berekspansi ke Android
        • Jenis-Jenis Phobia Di Dunia
        • Cyrus One, Smartphone Android 4.3 Inci yang Bisa M...
        • 7 Penemuan Yang Diharapkan Tidak Ditemukan
        • Motorola Defy Mini dan Motorola Defy XT, Dua Smart...
        • 10 Kota dengan Internet Tercepat di Dunia
        • Ilustrasi Neraka Yang Mengerikan Oleh Mark Powell
        • GSmart M1420, GSmart M1320 dan GSmart G1362, 3 Sma...
      • ►  Juni (149)
      • ►  Mei (157)
      • ►  April (83)
      • ►  Maret (46)
      • ►  Februari (75)
      • ►  Januari (224)
    • ►  2011 (203)
      • ►  Desember (161)
      • ►  November (20)
      • ►  Oktober (8)
      • ►  September (1)
      • ►  Agustus (4)
      • ►  Juli (4)
      • ►  Juni (1)
      • ►  April (1)
      • ►  Maret (3)

    Label

    • anti virus
    • artikel
    • berita
    • bisnis
    • blackberry
    • blogger
    • cerita
    • dunia
    • dunia hewan
    • facebook
    • Fakta
    • free serial number
    • Full Version
    • fun
    • gadget
    • game
    • gombal
    • google
    • Hacker News
    • Hacking
    • harga handphone
    • health
    • ilmu
    • indonesia
    • internet marketing
    • kisah
    • komputer internet
    • Kuliner
    • laptop
    • legenda
    • love
    • manusia
    • misteri
    • mobile
    • movie
    • news
    • other
    • otomotif
    • PC performance
    • pedang
    • Pengetahuan
    • phone
    • punk rock
    • Root Android
    • sains
    • scaning
    • sejarah
    • Serial Number
    • social media
    • software
    • source code
    • sport
    • teknologi
    • template
    • tips dan trik
    • tool
    • trik desain grafis
    • trik facebook
    • trik internet
    • tutorial blog
    • tutorial hack
    • tweaking
    • unik
    • video
    • web internet

    Tutorial Blogging

    • Apa itu PA dan DA ?
    • Cara Cek PA dan DA Massal
    • Daftar Social Bookmark High PR
    • Cara Menghilangkan Readmore
    • Tips Blogging Lainnya ...
    | Security | Multimedia | System Tuning | Developer | Games | Tools | Converted | Browser | Messanging | File Sharing | Desktop | Office | Compress |
    Copyright © 2013. Technology Tower - All Rights Reserved
    Designed By ZuLThinK
    Proudly Powered By Blogger