Membuat Simple Accordions

Setelah mencoba mengikuti kontes SEO bertema Aku Cuma Seorang Blogger Yang Cinta SEO. kini HAPIA Mesir ingin berbagi tip membuat simple accordion. secara tidak sengaja tip ini HAPIA Mesir temukan diSimplex Design.

Sudah lama HAPIA Mesir ingin postingkan, tapi baru sekarang terlaksana. whatever, Simple Accordions contohnya adalah seperti berikut, atau cek disini:

Berikut caranya :

- Login keBlogger.
- Langsung menuju "Tata Letak" - "Edit HTML".
- Cari code </head> .
- Copy Paste code berikut dibawah code </head>.

<script type="text/javascript" src="http://raezen.fileave.com/accordion%20sidebar.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<style type="text/css">
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>

- Simpan Template.

Langkah Kedua :

- Masuk "Elemen Laman".
- Tambah gadget dan pilih HTML/JavaScript.
- Copy paste code berikut :

<div class='accordion'>

<h3>judul kamu 1</h3>

<p>
code content 1
</p>

<h3>judul kamu 2</h3>

<p>
code content 2
</p>

<h3>judul kamu 3</h3>

<p>
code content 3
</p>

<h3>judul kamu 4</h3>

<p>
code content 4
</p>

</div>

- Simpan.

Happy blogging.