Cara membuat menu dropdown (acordion) pada blogspot

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>

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">
<li><a href="http://wawunx.blogspot.com">isi</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

Comments :

12 comments to “Cara membuat menu dropdown (acordion) pada blogspot”
Si Kurochan said...
on 

Dropdown accordion itu apa yah? lihat contohnya donk! Thanks yah

wawunx said...
on 

menu drpdown dengan sentuhan animasi.....
contohnya da disidebar sebelah kanan diatas tags cloud

info resep said...
on 

apa itu dropdown acordion???

wawunx said...
on 

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

Anonymous said...
on 

waw....
pengen mencoba trick nya nih..
tapi bingung...

wawunx said...
on 

bingung kekmana mas ahmad........
mudah kok buktinya blog ini bisa.......

Dre said...
on 

Salam merdeka & salam kenal. Makasih banget tipsnya. Dapet juga menu view yang unik-unik.

Hitsuke said...
on 

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 

TANJAB BARAT Today said...
on 

menu acordionnya kok mati???

Link Tea said...
on 

thanks atas tipsnya sobat.. kebetulan lagi butuh nih.. gimana kalau tukar link juga yah..

komunitas sukses said...
on 

maksih bozz :D

Faf said...
on 

hasilnya tidak sesuai yang ku inginkan... (trik ini bisa dikatakan bukan dropdown menu)

Post a Comment

Artikel Terkait

 
Blogger Indonesia
eXTReMe Tracker

Followers