Cara Membuat Menu Tabview Accordion Di Blog

Cara Membuat Menu Tabview Accordion Di Blogspot

Widget ini hampir mirip dengan widget tab view atau tabber, salah satu fungsi dari widget accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tab view, jadi blog sobat akan kelihatan lebih ringkas dan rapi dan menarik. Anda bisa letakkan menu accordion ini pada sidebar blog atau dimanapun anda suka. Bagi sobat-sobat blogger yang mau mencoba, berikut ini kode scriptnya dan tutorial singkatnya :

• Login ke Blogger anda.
• Masuk ke Layout, Add A Gadget pilih HTML/Javascript.
• Kemudian tambah widget dan masukkan kode di bawah ini ke kolom yg tersedia.
  <br /> <style type="text/css"> #accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGnrl6T7h7Otm6nu1sGJY91PgUdIhuRtxS1fBW_XMXgrOsInan9cNHhc52rdJ90U1bRP-bSSVq0qtCNyQl0uqa1JtbvGD1l7MggCq80-H0vTyO4tZrquW071U-sOtxvsYyX8sItLPjnmI/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;} #accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;} #accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;} #accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;} #accordion .content li a:hover {text-decoration:none;color:#000;} #accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfPDgTgB6M4x1rVu-o6Kuk_muF-ZyoTS4JXfXOJZo6HEZ8qGQeBa1ZmaN91320WrVbsPyBibeBkrTZA0GbrrGOHOEowtIJuSyLmuj4fwwdRI3lxTUWUPeg7LzwdD3gpXptzNyW4eOzvMk/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;} </style><br /> <script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br /> <script type='text/javascript'> $(function() { $('#accordion .content').hide(); $('#accordion h2:first').addClass('active').next().slideDown('slow'); $('#accordion h2').click(function() { if($(this).next().is(':hidden')) { $('#accordion h2').removeClass('active').next().slideUp('slow'); $(this).toggleClass('active').next().slideDown('slow'); } }); }); </script><br /> <div id="accordion"> <h2> Title 1</h2> <div class="content"> Isi konten 1<br /> </div> <div id="accordion"> <h2> Title 2</h2> <div class="content"> Isi konten 2<br /> </div> <div id="accordion"> <h2> Title 3</h2> <div class="content"> Isi konten 3<br /> </div> <div id="accordion"> <h2> Title 4</h2> <div class="content"> Isi konten 4<br /> </div> <div id="accordion"> <h2> Title 5</h2> <div class="content"> Isi konten 5<br /> </div> </div> </div> </div> </div> </div>
  
• Terakhir simpan dan lihat hasil menu accordion pasti akan lebih menarik dari sebelumnya.

Untuk "Title 1 sampai dengan 5" isi sesuai dengan nama script atau link yang sobat masukkan. Misalnya di title 1 sobat ingin membuat Buku Tamu, maka title 1 di ganti dengan nama Buku Tamu atau c-box, dan di isi konten 1 sobat masukkan kode script dari c-box atau buku tamu tersebut, dan seterusnya untuk title dan isi konten berikutnya terserah sobat mau memasukkan script atau link apa di dalamnya, apakah recent post, coment post atau link iklan semua terserah selera sobat blogger. Untuk warna dan desain background sobat juga bisa mengeditnya sesaui selera sobat.

Menu accordion diatas untuk blog yang mempunyai background warna terang. Bagi sobat yang mempunyai blog warna gelap atau hitam, tinggal diganti kode css-nya. Lebih lengkapnya seperti kode di bawah ini :

          <br /> <style type="text/css"> #accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjERPfNX066215v-LM-ggOGeOmbn0oA5wXSlSjRV2Xrl347L7DVfaeCgqZI95q-IdsYb7etEKki3tQQa0aPz_Bhi8I0kXkHUUphUZU5_hg6gfGC2T1Ln1USnHJ8vvbjBgbX5pwougELwHo/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAiSBgWwNlY89xQH8Uk1sW_V-Iko8m8HgzK_FmltjFvuO2qIykQNxPvAFmec788Dm3-2DwkQ1tmMvhLtY4zgbhP0V05130hwevCHaUd3Edz1IV8-Pwkti7a_LyVInyaOVHwhYstFkBVyc/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style><br /> <script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br /> <script type='text/javascript'> $(function() { $('#accordion .content').hide(); $('#accordion h2:first').addClass('active').next().slideDown('slow'); $('#accordion h2').click(function() { if($(this).next().is(':hidden')) { $('#accordion h2').removeClass('active').next().slideUp('slow'); $(this).toggleClass('active').next().slideDown('slow'); } }); }); </script><br /> <div id="accordion"> <h2> Title 1</h2> <div class="content"> Isi konten 1<br /> </div> <div id="accordion"> <h2> Title 2</h2> <div class="content"> Isi konten 2<br /> </div> <div id="accordion"> <h2> Title 3</h2> <div class="content"> Isi konten 3<br /> </div> <div id="accordion"> <h2> Title 4</h2> <div class="content"> Isi konten 4<br /> </div> <div id="accordion"> <h2> Title 5</h2> <div class="content"> Isi konten 5<br /> </div> </div> </div> </div> </div> </div>
Semoga bermanfaat...

Terima kasih http://www.maskolis.com atas kode scriptnya.

Cara Memasang Widget Geovisite Visitor Keren di Blog

Ada cara lain untuk memasang Gadget Untuk mengetahui Visitor berdasarkan negara. Gadget ini sangat berbeda dengan Flag Counter, yang meyediakan Jenis Gadget yang itu-itu saja. Namun dengan adanya Geovisite anda bisa memilih Gadget yang anda sukai. Jumlah Gadget ada 10, yang akan saya jelaskan satu persatu.

Jika anda penasaran silahkan cek di Geovisite.com

1. Pertama anda harus daftar terlebih dahulu, klik Register di tab atas.
2. Isi Sesuai perintah
3. Pilih Gadget Statsitic yang menarik, (pilihan ada di samping kiri)

Macam macam Tool Gadget nya adalah..

1. Geopeel
Efeck keren seperti lekukan Kertas, yag terletak pada kanan atas Blogg.

2. Geotube
Menampilkan Video Youtube, yang dibawahnya terdapat Statistic Pengunjung berdasarkan negara.

3. Geochat
Menampilkan Pengunjung Online Berdasarkan Negara, sekaligus ada layanan Chating.

4. Geotoolbar
Gadget yang menampilkan Jumlah Visitor Online berdasarkan negara, tampilanya seperti Headline News berjalan.

5. Geowheater
Menampilkan Statistic dan Suhu Udara di berbagai Negara

6. Geoclock 
Menampilkan Statsitic pengunjung berdasarkan Kota dan Negara , ada Jam nya juga.

7. Geomap
Menampilkan Pengunjung Online berdasarkan Peta Dunia

8. Geoglobe
menampilkan Pengunjung Online, dengan Globe berputar

9. Geocounter
Sama seperti Geoglobe, tapi ada tambahan Statistic lain

10. Geouser
Menampilkan Statistic pengunjung Online dengan menampilkan Ip Addres dan Browser yang digunakan.


Bagaimaa menurut anda ?, gadget nya bagus bukan ?.
Selamat Mencoba