http://picasion.com

rss

Cari Sepatu Keren??

Membuat Menu Tab View Pada Blogger

Menu Tab View bisa menghemat tempat di sidebar karena dalam satu widget bisa menyimpan beberapa menu sesuai kehendak kita , bukan itu saja tampilannyapun tampak cantik dan terkesan profesional, seperti tampilan di pada blog saya yang lain, klik di sini.
Cara Membuat Menu Tab View ini adalah sbb. :

  • Masuk ke Dashboard , Pilih Layout , lalu klik Edit HTML
  • Backup template dulu dengan  Download Full Template
  • Kemudian cari kode ini ]]></b:skin>
  • Untuk memudahkan pencarian , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next. 
  • Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>
        /* Menu Tab View
        ----------------------------------------------- */
        div.TabView div.Tabs {widht:100%;
        padding-top: 0px;
        height: 24px;
        overflow: hidden;
        }
        /* Menu Utama */
        div.TabView div.Tabs a {
        float: left;
        display: block;
        width: 110px; /* ukuran lebar menu */
        text-align: center;
        height: 30px; /* ukuran tinggi menu */
        padding-top: 7px;
        margin-right:4px; /* jarak antar menu */
        vertical-align: middle;
        border: 1px solid #ccc; /* warna border menu */
        border-bottom-width: 0;
        margin:0px;
        padding: 5px 0;
        font-family:Arial,Helvetica,sans-serif;
        font-size:12px;
        font-weight:bold;; /* besar hurup menu */
        background-color: #4c4c4c; /* warna latar menu */
        color: #FFFFFF; /* warna hurup menu */
        -moz-border-radius-topleft:15px;
        -moz-border-radius-topright:15px;
        -webkit-border-top-left-radius:15px;
        -webkit-border-top-right-radius:15px;
        }
        div.TabView div.Tabs a.Active {
        background-color: #FFFFFF; /* warna background menu aktif */
        color: #000000;
        }
        div.TabView div.Tabs a:hover {
        background-color: #999999; /* warna background menu hover */
        color: #FFFFCC;
        font-weight: bold;
        }
        /* Kotak Utama */
        div.TabView div.Pages {
        clear: both;
        border: 1px solid #CCC; /* warna border kotak utama */
        overflow: hidden;
        background:#FFFFFF; /* background kotak utama */
        }
        div.TabView div.Pages div.Page {
        height: 100%;
        padding: 7px;
        overflow: hidden;
        }
        div.TabView div.Pages div.Page div.Pad {
        padding: 5px 0px;
        font-size: 12px; /* besar hurup kotak utama */
        }

        /* tabview css end */ 
    • Perhatikan text-text yang berwarna merah, silahkan disesuaikan ya. 
    • Selanjutnya pasang kode berikut ini sebelum kode </head>
    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>

    • Jika sudah tinggal Save Templates
    • Selesai …  untuk langkah pertama,
    • Langkah ke dua Silahkan masuk kemenu "Page Elements"
    • Klik  "Add a Gadget" ,  pilih "HTML/Javascript"  ,
    • Kemudian copy paste kode dibawah ini :
        <form action="tabview.html" method="get">
        <div class="TabView" id="TabView">
        <div class="Tabs" style="width: 260px;">

        <a>Menu 1</a>
        <a>Menu 2</a>
        <a>Menu 3</a>

        </div>
        <div class="Pages" style="width: 256px; height: 270px;">
        <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>


    Catatan :
    • Angka warna pink adalah tinggi dan lebar tab view, silahkan disesuaikan
    • Kode yang berwarna Biru Adalah text Menu utama
    • Kode yang berwarna merah adalah isi dari tab view tsb.
    • Saya juga pernah posting Membuat Dropdown Navigation Menu atau Tutorial Blog lainnya .

    Nah bagaimana ??, apakah sobat juga mau Tampil Cantik Dengan Menu Tab View ??.

    .::Related Posts:

    10 comments:

    Unknown on Wednesday, June 30, 2010 11:33:00 AM said... Reply

    tes komen

    Akusendang on Wednesday, September 08, 2010 6:53:00 PM said... Reply

    assallamu'allaikum wr. wb. nama saya arifadie, aku mau menbuat menu2 seperti yang di atas(home, freedonwload, page, dll) itu lo pak tapi kok gak bisa2 ya! caranya gimana?

    hamz/blogpakdani on Wednesday, September 08, 2010 9:19:00 PM said... Reply

    Wa alaikum salam sobat arif. Untuk membuat menu2 seperti di atas mudah saja. Saya lihat blog sobat sudah ada menu 'Beranda'. Nah untuk membuat menu yang lain seperti free download sobat tinggal masuk ke Design > Edit HTML > cari kode menu 'Branda' kemudian sobat tinggal kopi dan pastekan kode terebut di bawahnya. Hanya tinggal ganti nama 'Beranda' menjadi 'free download' liaht contoh berikut.
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

    kopi dan pastekan di bawahnya
    <li><a expr:href='data:blog.homepageUrl'>Free Download</a></li>

    kemudian save.

    Jika sobat belum faham silahkan tanya lagi di komentar.

    Blogerdin on Thursday, January 20, 2011 4:43:00 AM said... Reply

    asalamualaikum...
    Mas aku pake template magazine 2.apa cara diatas dapat dipake pada template saya mas?

    Terima kasih !

    pakdani on Sunday, January 23, 2011 10:22:00 AM said... Reply

    @Dinwahyu
    bisa sob..silahkan dicoba

    MA'HAD RAUDHATUL QUR'AN on Saturday, July 16, 2011 4:56:00 PM said... Reply

    assalamu'alaikum.
    mas aku uda coba n berhasil, terimakasih banyak, tapi tampilannya ko ga seperti yang mas punya? selalu nampil menunya gak tersembunyi... kenapa y? mohon bimbingannya...

    pak dani on Saturday, July 16, 2011 11:35:00 PM said... Reply

    @Pondok Pesantrenan Tahfidhzul Qur'an Assafi'iyah
    Kalo tmplatenya beda ya hasilnya juga akan beda sobat.

    obat herbal sinusitis on Monday, February 06, 2012 10:51:00 AM said... Reply

    mantap dech infonya pak...

    obat herbal jantung koroner on Monday, February 06, 2012 10:55:00 AM said... Reply

    wahh panjang juga yach triknya,,,tp gax apa dech yang pentingkan hasinya sesuai dengan apa yang kita harapkan..

    ringkasanbukugeografi.blogspot.com on Wednesday, December 23, 2015 8:27:00 PM said... Reply

    Asslm..
    Gan.. bantu buat kotak untuk kolom blog archive yaa..
    ni alamat blog saya yang lagi belajar http://ringkasanbukugeografi.blogspot.co.id/2015/12/blog-post_20.html
    makasih.


    Post a Comment

    Silahkan tulis komentar sebagai umpan balik dari artikel ini. Tidak diperkenankan untuk komentar yang berunsur spamming, porno, dll.

    http://picasion.com/i/1TFa9/

    Sub Menu

  1. 1. Membuat Teks Berkedip
  2. 2. Menambah Elemen di Atas dan Bawah Posting
  3. 3. Menambah Dua Elemen di Bawah Sidebar
  4. 4. Kotak Komentar Blogger Bermasalah
  5. 5. Membuat Teks Bergerak Pada Blogger
  6. 6. Membuat Tabel Pada Blogger
  7. 7. Cara Membuat Scrollbox pada Blogger
  8. 8. Fungsi New Pages Pada Blogspot
  9. 9. Cara Menampilkan Tanggal Post (Post Date) Blogger di Waktu Yang Sama
  10. 10. Membagi 2 Kolom Sidebar Blog
  11. 11. Cara Memperlebar Halaman Blog
  12. 12. Mengatur Perataan Posting Artikel
  13. 13. Membuat Menu Dropdown Pada Arsip
  14. 14. Blogger Sudah Support Fungsi Readmore
  15. 15. Menambahkan Web Counter
  16. 16. Cara Mendaftar dalam Blogspot
  17. 17. Membuat Emotion Pada Blogger
  18. 18. Memasang Yahoo Messenger Emotion
  19. 19. Membuat Background Posting
  20. 20. Membuat Menu Tab View Pada Blogger
  21. 21. Cara Mengganti Icon Pada Address Bar
  22. 22. Cara Memasang Gambar Berbingkai
  23. 23. Cara Membuat Tombol Facebook Like di Blogger
  24. 24. Cara Membuat Related Post Dengan Fungsi Scroll
  25. 25. Membuat Border dan Kotak Pada Postingan
  26. 26. Cara Membuat Buku Tamu Melayang
  27. 27. Membuat Iklan Melayang dengan Tombol Close
  28. 28. Membuat Kata Sambutan, Penutup dan Pertanyaan Pada Blogger
  29. 29. Memasang Widget Recent Post dengan Thumblnails
  30. 30. Evolusi Blogger dari Tahun 1999 - 2009
  31. 31. Tips Agar Blog Anda Mudah Diakses di HP
  32. 32. Cara Memasang Retweet Button Pada Blogger
  33. 33. Cara Memperbesar Image/Gambar Pada Postingan Blog
  34. 34. Menambah Font dari Google Custom Pada Blogger
  35. 35. Membackup Komentar di Blogger
  36. 36. Koleksi Gratis RSS Feed Icon dan RSS Feed Vector Graphics
  37. 37. Tips Menjadikan Blogger Unlimited Bandwidht/Loading Page Super Cepat
  38. 38. Daftar 'Keyboard Shortcut' Untuk Posting di Blogger
  39. 39. Mengganti Font Blogger dari Kernest.com
  40. 40. Tips Seni Dalam Menulis Artikel di Blog Kita
  41. 41. 8 Tips Menulis Artikel Blog Dalam Waktu 20 Menit
  42. 42. 5 Tips Efektif dalam Menulis di Blog
  43. 43. Mengenal Lebih Dekat Tentang SEO dengan SEO Dictionary
  44. 44. 4 Situs Terbaik Bekapasitas 10GB Untuk Menyimpan Data Secara Online
  45. 45. SEO adalah Kerangka, Konten adalah Otot, Sosial Media adalah Fisik
  46. 46. Bagaimana Cara Kerja Google?
  47. 47. Perbaharui Posting Lama Anda
  48. 48. Mengapa Page Rank Blog/Web Jatuh?
  49. 49. Share Buttons Milik Blogger
  50. 50. Integrasi Antara Blogger dan Zemanta Gadget
  51. 51. Gambaran Frekuensi Posting Blog kita
  52. 52. Cara Mengatasi Blog Post dari Copy Paste
  53. 53. Batas/Limit Kapasitas Akun Blogger
  54. 54. Posting Blog Menggunakan Word 2010
  55. 55. 6 Situs Foto Gratis untuk Blog Anda
  56. 56. Cara Menampilkan Tanggal Post (Post Date) Blogger di Waktu Yang Sama
  57. 57. 5 Alasan Mengapa Anda Harus Menjawab Setiap Komentar
  58. 58. Cara Memodifikasi Bullet List dan Numbered List di Blogger Post
  59. 59. Generasi Blogger Masih Didominasi Oleh Kawula Muda
  60. 60. Blogger Perkenalkan Pendeteksi Otomatis Komentar Spam
  61. 61. Blogger Belajar Dari Harry Potter
  62. 62. Trik Menampilkan Total Post, Comment, dan Online User
  63. 63. 38 Jawaban SEO
  64. 64. Trik Menampilkan Total Post, Comment, dan Online User
  65. 65. Cara Mentransfer Akun Blog ke Akun Blog yang Lain
  66. 66. Mengenal Fungsi Navbar di Blogger
  67. 67. Cara Pasang Recent Posts Thumbnails Dengan Mudah
  68. 68. Cara Memasang File Flash Di Blog Post
  69. Popular Posts

    Shout it!