Skip to main content

Urban Gray Accordion Menu Versi II

Jika pada postingan pertama Membuat Urban Gray Accordion Menu, kita tinggal copas kode script ke Add Elemen HTML, untuk yang versi II ini, kita masuk ke edit HTML pada template. Perbedaan yang akan diperoleh adalah pada versi II ini, hasil Accordion Menu akan sesuai dengan kode script. Beda dengan copas langsung ke Elemen HTML karena hasilnya menyesuaikan dengan template yg dipakai.

Langsung aja :
1. Login blog,pilih Layout/tata letak

2. Edit HTML (sobat gak perlu mencentang Expand Widget Template)

3. Cari kode </head>

4. Masukkan script ini diatas/sebelum kode </head>


<script src='http://atozet18.googlepages.com/urbanjquery-1.2.6.pack.js' type='text/javascript'/>
<script src='http://atozet18.googlepages.com/urbanddaccordion.js' type='text/javascript'/>
<script src='http://atozet18.googlepages.com/urbanmenu.js' type='text/javascript'/>


5. Cari kode ini ]]></b:skin>

6. Kemudian copy dan paste kode berikut di atas kode ]]></b:skin>


/*accordion urban gray menu
-------------------------------*/

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

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(http://atozet18.googlepages.com/urbanarrowstop.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: white;
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;
}

7. Save

Keterangan :

- warna merah pada kode script = lebar accordion menu. Sobat bisa ganti sesuai keinginan sobat


Setelah itu sobat masuk lagi ke Layout/tata letak lagi

1. Masuk ke Tab Add Page Element

2. Pilih Add Gadget

3. Pilih HTML/JavaScript

4. Copy dan paste kode berikut


<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">Fre Template</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 Theme</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>


5. Save

Keterangan :
- warna biru = link. Sobat ganti dengan link punya sobat.
- jika ingin menampilkan teks, hapus semua kode
dibawah <ul class="submenu">, kemuadian masukkan teks
- untuk menambahkan Menu, cukup tambahkan kode
seperti berikut :

<h3 class="headerbar">
<a href="http=moneylocker.blogspot.com">Free Money</a></h3>
<ul class="submenu">

dan masukkan teks atau link sobat.


Lihat demo

Membuat Urba Gray Accordion Menu lebih simple disini

Terimaksih untuk Dynamicdrive untuk script nya

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…