Cara Membuat Menu Accordion Tanpa Edit HTML

Kali ini saya akan memberikan tutorial membuat menu accordion yang saya pasang tanpa harus masuk ke Edit HTML. Tak perlu panjang lebar saya menulis Artikel ini Langsung aja lihat yang dibawah :

Pilih HTML/Javascript, letakkan kodenya disitu

1.  ini Gambar pertama dalam kode yang kalian simpan di HTML/Javascript kalian bisa menambah yang  kalian inginkan  di kode itu
   

 

      2.   gambar ke dua ini menunjukan Bahwa yang kalian Simpan itu Akan seperti ini

Salah satu fungsi dari accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tabber atau tab view, jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah agak lama, saya hanya memperbaharui tampilan menunya saja. Anda bisa letakkan menu accordion ini pada sidebar blog. Bagi teman-teman yang mau mencoba, berikut ini cara membuatnya 

(wah bahasanya jadul banget ya) :

1. Login ke Blogger dengan akun Anda
2. Masuk ke Layout, pilih HTML/Javascript
3. Kemudian masukkan kode berikut ini ke dalamnya

<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/AVvXsEjNqQNih0wPNsfPLMzLNx8lcr_NNXXGQmYmma95D2cklWEmiWOnW0Pm3__QHo0HiqlGr0YQdYarX7XJ9sx9SqCY_fOBqIFcqorHG5-P2tlXNtdnFJPTBwtYhzyt5HzL228cTn31vFm3yhU/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/AVvXsEjjrSkMxh_mhR5bxwu1F14qRNQes94zOcwVMfbNiNWXlFrX8Cd7AJ0yAQPz7K4m0VwjZyKCn8lRwHtqhpAH6KX_-ZhUQjh9EyKtCZgRQQNEJO_Wju0aMzczFNesMHsk34Dh_v8m6xoT0M4/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<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>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

1. Terakhir Save, lihat hasilnya

Keterangan : 

Title            : Judul heading menu accordion  
Isi konten   : Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun
                      script widget)

Sekian Artikel yang saya sampaikan untuk info lebih lanjut klik disini

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll

Sobat sedang membaca artikel tentang Cara Membuat Menu Accordion Tanpa Edit HTML. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://hasil2.blogspot.com/2013/07/cara-membuat-menu-accordion-tanpa-edit.html" target="_blank">Cara Membuat Menu Accordion Tanpa Edit HTML</a>

:: Get this widget ! ::

Related Posts

Related Posts with thumbnails and summary post for blogger

• Blog Kesayangan Mbah Google Blog Kesayangan Mbah Google - Devilz Adrian adalah salah satu blog kesayangan saya , kalo Kesayangan Mbah Google sih kayaknya nggak. Tapi ane akan slalu berusaha supaya blog ane jadi salah sat ... [readmore]
• Cara menghapus link pada komentar blog secara otomatis    kali ini Batardelrey akan mengesharenya, apa kegunaannya? adanya link hidup pada komentar blog sobat akan mempengaruhi reputasi sebuah blogger, dan turunnya Alexa blog sobat, se ... [readmore]
• Cara Membuat Artikel Terkait (Related Post) Kali ini saya akan berbagi informasi mengenai Cara Membuat Artikel Terkait (Related Post).Pasti banyak yang bertanya-tanya, "apa sih untungnya buat Artikel terkait di blog ?"Nah ... [readmore]
• Cara Membuat Dua Kolom Posting Homepage BlogspotCara Membuat Dua Kolom Posting Homepage Blogspot  ini sebenarnya sudah ada di mesin pencari Google namun sedikit ada tambahan yang perlu saya benahi dari beberapa artikel tentang cara membuat ... [readmore]
• Membuat 3 Kolom di Bawah Header Blogspot Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di bawah header. Widget 3 kolom dibawah header ini sebe ... [readmore]