Skip to main content

Membuat Urban Gray Accordion Menu

Menu dengan gaya accordion..apa ya artinya??Aku sendiri gak tau pasti tapi kalo sobat lihat langsung demonya, sobat akan tau. Script ini aku dapat dari Dynamicdrive. Mungkin langsung aja.


1. Masuk ke Tab Add Page Element
2. Pilih Add Gadget
3. Pilik Edit HTML/JavaScript
4. Terus..copy n paste kode di bawah ini
5. Tempatkan Menu Accordion ini mau di bagian mana
6. Simpan
7. Liat hasilnya
8. no 5, 6, dan 7 gak penting,hhehehehe....

Berikut ini adalah kode Urban Gray Accordion Menu :


<!doctype 1.0 strict//en http://www.w3.org/tr/xhtml2/dtd/xhtml1-strict.dtd -//w3c//dtd public html xhtml>


<script src="http://atozet18.googlepages.com/jquery-1.2.6.pack.js" type="text/javascript"></script>

<script src="http://atozet18.googlepages.com/ddaccordion.js" type="text/javascript">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script type="text/javascript">

ddaccordion.init({
headerclass: "headerbar", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>

<style type="text/css">

.urbangreymenu{
width: 140px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #c1c1c1 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu .headerbar a{
text-decoration: none;
color: black;
display: block;
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

</style>



<div class="urbangreymenu">

<h3 class="headerbar">
<a href="httpblogcenti.blogspot.com">Just a Blog</a></h3>
<ul class="submenu">
<li><a href="http=blogcenti.blogspot.com">Berita Basi</a></li>
<li><a href="http=blogcenti.blogspot.com">Cerita hari ini</a></li>
<li><a href="http=blogcenti.blogspot.com">Basa basi</a></li>

</ul>

<h3 class="headerbar">
<a href="http://dhe-gallery.blogspot.com" target="_blank">Template Gallery</a></h3>
<ul class="submenu">
<li><a href="http://dhe-gallery.blogspot.com" target="_blank">Free Blogger Template</a></li>
<li><a href="http://dhe-gallery.blogspot.com" target="_blank">Free WordPress Theme</a></li>
<li><a href="http://dhe-gallery.blogspot.com" target="_blank">Free Site Template</a></li>

</ul>


<h3 class="headerbar">
<a href="http://azthemes.blogspot.com">Premium Template</a></h3>
<ul class="submenu">
<li><a href="http://azthemes.blogspot.com" target="_blank">WordPress Theme</a></li>
<li><a href="http://azthemes.blogspot.com" target="_blank">Site Template</a></li>

</ul>

<h3 class="headerbar">
<a href="http=moneylocker.blogspot.com">Free Money</a></h3>
<ul class="submenu">
<li><a href="http=moneylocker.blogspot.com">Pay per click</a></li>
<li><a href="http=moneylocker.blogspot.com">Pay per sale</a></li>
<li><a href="http=moneylocker.blogspot.com">Pay per lead</a></li>

</ul>
</div>


</!doctype>



Keterangan :
- warna biru : lebar Accordion Menu. Sobat bisa ganti sesuai keinginan sobat
- warna merah : ganti link n judul link dengan link sobat
- sobat bisa sesuaikan sendiri color,background,jenis font,ukuran font dll
- jika ingin menambahkan Menu, tinggal tambahin kode serti contoh di bawah ini

<h3 class="headerbar">
<a href="http=moneylocker.blogspot.com">Free Money</a></h3>
<ul class="submenu">
<li><a href="http=moneylocker.blogspot.com">Pay per click</a></li>
<li><a href="http=moneylocker.blogspot.com">Pay per sale</a></li>
<li><a href="http=moneylocker.blogspot.com">Pay per lead</a></li>

</ul>

Akan kurang sreg kalo tanpa demo langsung. Untuk demo, sobat bisa liat di
dhe-gallery.blogspot, azthemes.blogspot atau di blogfordemo.blogspot

* hhehehe..sekalian titip link..

Popular posts from this blog

Jangan pernah takut dibenci orang lain

Perkataan,perbuatan,penampilan,tingkah laku kita,dll entah itu secara sadar ato tidak sadar bisa membuat orang lain benci,marah,tidak suka atau apalah itu yg sejenis, haiah..kaya homo ae..upss... Cara ngungkapinnya juga bisa secara langsung, "Aku benci kamu.." atau mungkin cukup dalam hati aja,kaya judul lagu???

Keadaan tersebut sadar atau tidak kita sadari sering kali terjadi disekitar kita,baik itu ma temen sendiri atau mungkin ma orang lain yg gak kita kenal sekalipun. Jika hal tersebut terjadi pada diri sobat?? Gimana dan bagaimana perasaan sobat?? Stay cool kah?? marah2 kah?? Balik benci ma orang itu kah?? atau kah..kah..yg lain?? halah..opooo..kuii..

Jangan pernah takut dibenci orang lain

Setiap orang punya karakter sendiri2 yang mencerminkan dirinya,baik itu dari segi penampilan,sikap,tingkah laku dll. Kasarannya, INILAH AKU.. Urusan orang suka atau gak suka ma apa yg ada dalam diri kita,emang aku pikirin,haiah..

Cara orang menilai orang lain beda2. Kalopun ada orang yang…

Axorys : Responsive Blogger Template - 8 Pilihan Style

Beberapa hari lalu, rilis Axorys Blogger template tapi itu adalah Versi Gratis. Dan sekarang, saya merilis Versi Premium. Secara umum, fiturnya sama dengan yang versi gratis tapi saya tambahkan beberapa fitur baru.

Fitur Axorys Blogger Template Versi Premium8 predefined styles : Axorys Blogger templtae premium versi tersedia dalam 8 varian styles. Anda bisa pilih yang sesuai.

List of styles :
Big Header
Big Header Small ThumbnailBig Header Big ThumbnailBig Header Masonry StyleBig Header Default Style (support jump-link)Shrink Header
Shrink Header Small ThumbnailShrink Header Big ThumbnailShrink Header Masonry StyleShrink Header Default Style (support jump-link)Fully responsive Blogger template : Semua styles Axorys Blogger template sudah responsive.
Template Designer : hampir semua variable mendukung Template Designer. Anda bisa mengganti gambar latar, warna latar, warna link, tipe font, ukuran font, warna font, dll dengan mudah.
Featured posts : Penambahan featured posts untuk postingan yan…

Ini Konser Iwan Fals dan Slank !!

Sebuah konser musik tidak afdol apabila tidak ada penontonnya. Segala macam cara kadang dilakukan hanya untuk melihat artisnya beraksi dipanggung. Entah itu dengan manjat, nunggu jebolan, ato jika di pinggiran tempat konser ada pohon tinggi, rela naek itu pohon walopun anginnya gak lagi sepoi-sepoi.

Ada yang menarik jika saya mengamati konser2 musik, terutama konser musik diluar (outdoor) entah itu dari berita di tipi, atau lihat langsung. Bukan pada artisnya yang lagi manggung. Bukan pada tampilan panggungnya. Bukan pada tata panggungnya. Bukan pula pada tata suaranya tetapi pada penonton yang melihat konser tersebut.

Hampir sebagian besar konser musik outdoor, bendera OI (Orang Indonesia - Iwan Fals) dan Slank berkibar mewarnai konser padahal konser yang berlangsung bukan konser Iwan Fals ataupun konser Slank !! Gak peduli itu konser dangdut, konsernya Padi, Dewa, atau band lain atau konser kompilasi band2. Bendera OI dan Slank selalu berkibar ditengah2 para penonton.

Sebuah pertanyaa…