Laman

  • HOME
  • LOMBA BLOG
  • ARTIKEL
  • TUTORIAL
  • ORDER DESIGN
  • ABOUT ME
  • JUAL KEFIR
JASA DESIGN BLOG KHUSUS BLOGSPOT & JUAL PRODUK KEFIR

Cara Membuat Menu Tab View

Agustinadian Susanti | Minggu, September 15, 2013 |
Widget yang ada di sidebar seringkali memakan banyak tempat di blog sehingga menyebabkan loading blog menjadi berat. Nah untuk mengantisipasi hal tersebut selain menghapus widget yang tidak diperlukan bisa juga dengan merapikan tampilan widget di sidebar dengan membuat menu tab view. Contohnya seperti ini :

Tab view adalah widget yang berbentuk tab.

Adapun cara membuatnya yaitu sebagai berikut : 
1. Log in ke www.blogger.com 
2. Klik Tata Letak 
3. Klik Tambah Gadget 
4. Klik HTML/ Java Script 

5. Copy dan Paste (Ctrl+C→Ctrl+V) kode script berikut ini ke dalam kotak HTML

Kode Script:
<style type="text/css"> .tabber { padding: 0px !important; border: 0 solid #bbb; } .tabber h2 { float: left; margin: 0 1px 0 0; font-size: 12px; padding: 3px 5px; border: 1px solid #fff; margin-bottom: -1px; overflow: hidden; position: relative; background: #CD853F; cursor:pointer; -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } html .tabber h2.active { background: #E7D4AD; border-bottom: 1px solid #fff; } .tabber .widget-content { border: 1px solid #fff; padding: 10px; background: #E7D4AD; clear:both; margin:0; } .codewidget, #codeholder { display:none; { </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#codeholder').bloggerTabber ({ tabCount :3 }); }); </script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>
6. Simpan tanpa memberi judul lain di atasnya (biarkan saja judulnya HTML/Java Script), seperti ini: 


7. Letakkan widget-widget yang ingin dimasukkan ke dalam menu tab view (dibawah gadget HTML/ Java Script tersebut), misalnya popular post, blog archive, dan label.

NB: Anda dapat memilih sendiri widget yang ingin anda masukkan ke dalam menu tab view. Tidak harus sama persis dengan contoh saya diatas.

25 komentar:

  1. Untuk hasilnya kaya gimana mbak? itu maksudnya satu tempat bisa berbagi widget kah?

    BalasHapus
    Balasan
    1. oh ya, lupa blm kasih gambar, coba lihat disamping sidebar saya mbak yang kotak dikelompokin itu

      Hapus
    2. coba dicoba dulu mbak, iya satu tempat bisa banyak widget :) nanti kalau udah dicoba kasih tau saya hasilnya ya bisa enggaknya...

      Hapus
  2. Mntap gan...
    inilah yang ane cari2 sejak lama...
    Brmamfaat bnged...
    mksih bnyak infonya gan...

    BalasHapus
  3. thanks gan, ane baru belajar ngeblog, jadi tips dari agan sangat membantu sekali

    BalasHapus
  4. mantap dah artikelnya kawan

    BalasHapus
  5. thanks gan untuk informasinya, sangat membantu :)

    BalasHapus
  6. ini dia yang sedang saya cari-cari
    thank gan infonya

    BalasHapus
  7. Thank Gan infonya sangat membantu sekali

    http://jamutradisionalmujarab.com/

    BalasHapus
  8. Makasih gan untuk informasinya, sangat membantu :)

    BalasHapus
  9. Terimakasih atas informasinya sangat bermanfaat :)

    http://kedaijellygamatgoldg.com/

    BalasHapus
  10. Mantaap gan infonya :)
    Ditunggu info yang bermanfaat lainnya
    Izin share ya
    http://obattradisional22.com/obat-tradisional-tbc/
    http://obattradisional22.com/

    BalasHapus
  11. Terimakasih infonya Gan (y)
    Ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/

    BalasHapus
  12. terimakasih informasinya sangat bermanfaat :)
    http://kedaijellygamatgoldg.com/
    http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/

    BalasHapus
  13. terimakasih infonya sob, sukses terus

    BalasHapus
  14. makasih banyak buat infonya gan,, nice post..

    BalasHapus
  15. Manteep sob untuk informasi artikelnya :)

    BalasHapus

Terima kasih sudah berkunjung. Silakan tuliskan komentar Anda di bawah ini. Komentar Anda sangat bermanfaat dan sangat saya hargai atau jika ada pertanyaan silakan tinggalkan pesan di livechat saya (sidebar kiri bawah)
Perhatian: saya akan menghapus otomatis komentar yang ada link hidupnya :D

Categories

Komentar

Blog Archive

Related Posts Plugin for WordPress, Blogger...