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>
<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..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;
}
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 .....<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>
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
Dropdown accordion itu apa yah? lihat contohnya donk! Thanks yah
menu drpdown dengan sentuhan animasi.....
contohnya da disidebar sebelah kanan diatas tags cloud
apa itu dropdown acordion???
dropdown acordion adalah menu dropdown yang mirip dengan menu tab tetapi menunya kebawah dan dapat dilipat....
pokoknya intinya seperti itu mas coz buat artiinnya sulit je
untuk lebih jelas contohnya ada di sidebar kanan paling atas :D
waw....
pengen mencoba trick nya nih..
tapi bingung...
bingung kekmana mas ahmad........
mudah kok buktinya blog ini bisa.......
Salam merdeka & salam kenal. Makasih banget tipsnya. Dapet juga menu view yang unik-unik.
wah...postingan kita sama cuma dengan explainatin yg beda..tetap kreative deh sob..thx for sharing...!!!
kunjung balik ya sobat di postingan baru q nieh
Membuat Read More Otomatis
Jangan lupa ngomentnya xeps...!??
________________________________________________________________________
Thanks.
Regard,
Hitsuke and NarutoFans
menu acordionnya kok mati???
thanks atas tipsnya sobat.. kebetulan lagi butuh nih.. gimana kalau tukar link juga yah..
maksih bozz :D
hasilnya tidak sesuai yang ku inginkan... (trik ini bisa dikatakan bukan dropdown menu)