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…

Axorys - Responsive Blogger Template (Versi Gratis)

Lama gak update Blogger template. Berikut ini adalah template terbaru dari saya. Saya kasih nama Axorys. Axory Blogger template ini adalah responsive blogger template dengan desain sederhana, warna putih dan bersih. Template ini cocok untuk semua topik blog.


Features Axorys Blogger templateFully responsive templateMendukung Template Designer untuk mengganti warna background dan gambar background.mendukung browser yang sering dipakai oleh user termasuk IE8.Ada featured slider.Shrink header.Responsive dropdown menu.Responsive video.Tidak ada error di Google Snippet. Silahkan cek here.Menggunakan font icon dari Font Awesome.Mendukung galeri poto dari Instagram dan Flickr.Widgetable, drag and drop.Mendukung related post dengan thumbnail (untuk tampilan desktop) dan link (untuk tampilan mobile).3 column footerCropping thumbnail dengan ukuran yang proporsional (tidak dipaksa direntangkan)Mendukung recent post and comment dengan thumbnailBreadcrumbsShare buttondll
Untuk download dan demo, sil…