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:
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>.
- Login keBlogger.
- Langsung menuju "Tata Letak" - "Edit HTML".
- Cari code </head> .
- Copy Paste code berikut dibawah code </head>.
<script src='http://hapiajavascript.googlecode.com/files/accordion-sidebar.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".accordion h2:first").addClass("active");
$(".accordion div:not(:first)").hide();
$(".accordion h2").click(function(){
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h2").removeClass("active");
});
});
</script>
<style type='text/css'>
.accordion {width: 330px;border-bottom: solid 1px #C4C4C4;}
.accordion h2 {background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6_Wg1ljVBGB_VZ11dsYncIWHzJGK_RkavOhEXJLz3Fsoznq9jfaSc6cfzfq7gpszuFxqfEXNaD7wklb_88w-UuDwnp5I5Ie7TCnt0H8mfWJ-kuYB38HeX4wmZ_pTAGYJknGbbAOpgyQ/s320/arrow-square.gif) no-repeat right -51px;padding: 7px 15px;margin: 0;font: bold 120%/100% Arial, Helvetica, sans-serif;color:#fff;border: solid 1px #c4c4c4;border-bottom: none;cursor: pointer;}
.accordion h2:hover {background-color: #666;}
.accordion h2.active {background-position: right 5px;}
.accordion div {background: #fff;margin: 0;padding: 10px 10px 20px;border-left: solid 1px #c4c4c4;border-right: solid 1px #c4c4c4;}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$(".accordion h2:first").addClass("active");
$(".accordion div:not(:first)").hide();
$(".accordion h2").click(function(){
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h2").removeClass("active");
});
});
</script>
<style type='text/css'>
.accordion {width: 330px;border-bottom: solid 1px #C4C4C4;}
.accordion h2 {background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6_Wg1ljVBGB_VZ11dsYncIWHzJGK_RkavOhEXJLz3Fsoznq9jfaSc6cfzfq7gpszuFxqfEXNaD7wklb_88w-UuDwnp5I5Ie7TCnt0H8mfWJ-kuYB38HeX4wmZ_pTAGYJknGbbAOpgyQ/s320/arrow-square.gif) no-repeat right -51px;padding: 7px 15px;margin: 0;font: bold 120%/100% Arial, Helvetica, sans-serif;color:#fff;border: solid 1px #c4c4c4;border-bottom: none;cursor: pointer;}
.accordion h2:hover {background-color: #666;}
.accordion h2.active {background-position: right 5px;}
.accordion div {background: #fff;margin: 0;padding: 10px 10px 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 :
Langkah Kedua :
- Masuk "Elemen Laman".
- Tambah gadget dan pilih HTML/JavaScript.
- Copy paste code berikut :
<div class='accordion'>
<h2>JUDUL 1</h2>
<div>
ISI CONTENT 1
</div>
<h2>JUDUL 2</h2>
<div>
ISI CONTENT 2
</div>
<h2>JUDUL 3</h2>
<div>
ISI CONTENT 3
</div>
<h2>JUDUL 4</h2>
<div>
ISI CONTENT 4
</div>
</div>
<h2>JUDUL 1</h2>
<div>
ISI CONTENT 1
</div>
<h2>JUDUL 2</h2>
<div>
ISI CONTENT 2
</div>
<h2>JUDUL 3</h2>
<div>
ISI CONTENT 3
</div>
<h2>JUDUL 4</h2>
<div>
ISI CONTENT 4
</div>
</div>
- Simpan.
Happy blogging.
pertamax dah diamankan
yg jadi nilai lebih om abu tuh jika tab lain diklik yg lain minimize, kalau ini iya gak?
mas doy@ kl ni g sob...manual...
iya yg di kang abu farhan lebih enak...
Makasih sobat... langsung di coba...
maKasih infonya zob.
terimah kasih udah share infonya.
Mantabs nich...
makasih atas infonya ya sob
blog yang bagus,..terus semangat
bagus tapi terlalu simple...heheh
Thanks.
Regard,
Hitsuke
thank you, i have put smile too for you !
layak untuk dicoba
syukron infonya kawan :)
syukran tipsnya akhi.. jazakumullah khair..
Model accordions tuh contohnya spt apa ya...? Hehehe, penasaran nih.
kaya nya g ocok trik ini aq pasang di blog q