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

Oslanis Blogger Template

Salam.. Setelah kemarin rilis Axorys Blogger template, berikut ini template Blogger terbaru dari saya. Saya beri nama Oslanis Blogger Template. Secara khsusus, Oslanis Blogger template cocok untuk blog bertema fashion tapi bisa juga untuk semua tema.

Fitur Oslanis Blogger TemplateFully responsive Blogger templateMendukung Template Designer warna latar, gambar latar dan juga warna latar widget sidebar. Untuk variabel lainnya, bisa diedit via Edit HTMLMendukung browser yang umum dipakai oleh user.Mendukung konten slider.Responsive dropdown menu.Responsive video.Mendukung font icon from Font Awesome.WidgetableRelated posts dengan thumbnail.3 column footerAuto crop thumbnail dengan ukuran yang proporsional tidak ditarik/diregangkanRecent post and komen dengan thumbnailMendukung iklandan lainnya
Lihat juga :
Axorys Blogger Template. A Blogger template dengan 8 predefined styles.

Untuk setting dan download, silahkan menuju ke postingan Oslanis Blogger template ini.

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…

Ganti Desain Template (Lagi)

Salam..

Sudah lama gak update Blog Ireng ini. Berhubung pengen coba jualan premium Blogger template, sekalian saja redesain blog ini. Premium templatenya sendiri hampir selesai. Semoga ajah bisa rilis bulan ini.

Desain template baru ini sebenarnya desain lama yang diambil dari blog Main Blogger dengan sedikit ubahan.

Oya, blog ini masih blog DoFollow tapi tetep saya moderasi. Keyword bisa digunakan di Nama Author karena Link Live tidak diperkenankan.

Sekedar kenang2an desain lama