Siapa bilang blogspot tidak bisa dioptimalkan n berpenampilan seperti web2 yang lain. n sapa juga yang bilang kalo menu dropdown acordion hanya bisa dipasang di joomla saja. diblogspot pun ternyata bisa kok.... Penasaran dengan adanya dropdown menu disebelah kanan blog ini. n ingin menerapkan diblogspot anda caranya cukup mudah kok.............
Berikut cara membuat dropdown menu (acordion) seperti yang di blog ini,
1. Kamu harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut setelah kode head
<script language='javascript' src='http://www.geocities.com/wawunx_5155/jquery.js' type='text/javascript'></script>
<script language='javascript' src='http://www.geocities.com/wawunx_5155/ddacordion.js' type='text/javascript'></script>
<script language='javascript' src='http://www.geocities.com/wawunx_5155/ddcordian2.js' type='text/javascript'></script>
kemudian klik save template
4. Lalu klik/centang Expand Widget Templates cari kode ]]> setelah ketemu copy kode CSS berikut....lalu paste diatas kode ]]>
.alert { background: #DDE4FF;
text-align: left;
padding: 10px 10px 10px 10px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}
.arrowlistmenu{
width: 320px; /*ukuran lebar dari menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://i302.photobucket.com/albums/nn120/wawunx/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://i302.photobucket.com/albums/nn120/wawunx/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(http://i302.photobucket.com/albums/nn120/wawunx/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;
}
Kemudian save template anda..
5. Masuk kedalam edit pageElement kemudian masukkan kode ini :
<div class="arrowlistmenu">
<h3 class="menuheader expandable">Judul Menu</h3>
<ul class="categoryitems">
<li><a href="http://wawunx.blogspot.com">Isi Menu</a></li>
<li><a href="http://wawunx.blogspot.com">Wawunx ngeblog</a></li>
</ul>
</div>
Coba sekarang lihat hasilnya .....
ps:
- Jumlah Menu bisa sebanyak yang anda suka..copy yang berwarna merah..kemudian paste diatas
- Menu ini berfungsi baik pada browser ini : FF1+ IE6+ Opr9+ Crome+Flock
Read More......