Sobat Blogger setelah sebelumnya kumpulan tutorial modifikasi blog membuat
menu accordion top banget ,sebagai alternatif pilihan jika sobat ingin menggunakan nya berikut akan saya buat satu lagi menu accordion yang saya kira tidak kalah kece seperti menu accordin sebelumnya.oke buat sobat yang penasaran pingin lihat demonya silahkan
disini
Setelah melihat Demo dan contoh screenshot di atas berikut adalah cara membuatnya :
- Loggin ke blogger
- setelah masuk ke dasboard pilih Edit Html (jangan lupa download lengkap template )
- Cari kode ]]></b:skin> taruh kode Css di bawah tepat di atas kode ]]></b:skin> berikut kode nya
.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://mahfidzmayanto.googlecode.com/files/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://mahfidzmayanto.googlecode.com/files/titlebar-active.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
- selanjutnya cari kode </body> lalu taruh kode Jquery di bawah ini tepat di atas kode </body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://mahfidzmayanto.googlecode.com/files/ddaccordion.js"></script>
<script type="text/javascript" src=" http://mahfidzmayanto.googlecode.com/files/accordionkecebgt.js"> </script>
- Untuk yang terakhir silahkan sobat Taruh kode HTML berikut di mana sobat ingin tempatkan di postingan atau sidebar.
<div class="arrowlistmenu">
<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Image CSS</a></li>
<li><a href="#">Form CSS</a></li>
<li><a href="#">DIVs and containers</a></li>
<li><a href="#">Links & Buttons</a></li>
<li><a href="#">Other</a></li>
<li><a href="#">Browse All</a></li>
</ul>
<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="#">CSS Gallery</a></li>
<li><a href="#">Menu Gallery</a></li>
<li><a href="#">Web Design News</a></li>
<li><a href="#">CSS Examples</a></li>
<li><a href="#">CSS Compressor</a></li>
<li><a href="#">CSS Forums</a></li>
</ul>
<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="#" >Free JavaScripts</a></li>
<li><a href="#">JavaScript tutorials</a></li>
<li><a href="#">JavaScript Reference</a></li>
<li><a href="#">DOM Reference</a></li>
<li><a href="#">DHTML & CSS</a></li>
</ul>
<h3 class="menuheader" style="cursor: default">FeedBack</h3>
Semoga tutorial tentang cara membuat
menu accordion kece banget di atas menjadi menu alternatif yang bisa sobat gunakan di blog semoga bermanfaat
