Mengatur Kode CSS Dan JavaScript Untuk Mempercepat Loading Blog

Banyak cara untuk mempercepat loading blog. Pada postingan saya sebelumnya tentang mempercepat loading blog dengan menggunakan eksternal link kode CSS, sekarang bagaimana mempercepat loading blog dengan mengatur tampilan kode CSS dan JavaScript. Sebelumnya, saya berharap sobat membaca postingan jenis dan fungsi kode untuk mengatur tampilan widget blog karena berkaitan dengan postingan ini.

Secara umum, susunan kode template blog seperti berikut :

<b:skin><![CDATA[/*

CSS code

]]></b:skin>

</head>

Kode HTML

</body>
</html>


Untuk mempercantik blog, kemudian ditambahkan widget baru. Saya contohkan misalnya sobat ingin menambahkan widget Feature Content image slideshow.

Biasanya kode Feature Content tersebut terdiri dari 2 kode yaitu kode CSS dan kode JavaScript.
Untuk kode CSS, penempatan kodenya diatas kode

]]></b:skin>

dan untuk kode JavaScript biasanya ditempatkan di bawah kode

]]></b:skin> alias diatas kode

</head>


Struktur kode HTML untuk Feature Content biasanya seperti berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='feature-content'>
<b:section class='feature' id='feature' preferred='yes'>
<b:widget id='HTML30' locked='false' title='Feature Content='HTML'/>
</b:section>
</div>
</b:if>

* Perhatikan yang berwarna merah
* Saya menggunakan kode <b:if cond='data:blog.pageType != &quot;item&quot;'> sebagai contoh salah satu kode untuk menampilkan widget blog hanya pada main post dan label post saja. Beberapa widget Feature Content yang saya temui di template2 modifikasi menggunakan kode <b:if cond='data:blog.pageType == &quot;index&quot;'>. Untuk jenis dan fungsi kode yang lain bisa diliat pada postingan saya yang ini


Widget Feature Content sendiri biasanya hanya muncul pada main post dan label post saja dan akan hilang pada single post tetapi jika sobat melihat dari View Page Source (pada single post) kode CSS dan JavaScript Feature Content tersebut masih akan terlihat dan ini akan dianggap sebagai kode yang tetap ada didalam template blog. Bukankah itu akan mempengaruhi berat dan loading blog?? Terlebih lagi jika kode CSS dan JavaScript (terutama kode JavaScript) Feature Content tersebut besar.

Untuk mengakalinya, sobat bisa menggunakan trik sederhana ini.

1. Kode CSS.
Seperti yang saya tulis diatas, kode CSS Feature Content biasanya diletakkan diatas kode

]]></b:skin>

Sekarang, pindahkan kode tersebut menjadi dibawah kode

]]></b:skin>

dengan susunan kode seperti berikut :

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

Kode CSS Feature Content disini

</b:if>
</style>

2. Kode JavaScript
Untuk kode JavaScript, tambahkan kode yang berwarna merah pada kode JavaScript tersebut sehingga susunannya akan seperti berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script src='URL-JAVASCRIPT-CODE' type='text/javascript'/>
</b:if>

Save.

Sekarang sobat baca salah satu postingan sobat (single post) dan liat dari View Page Source. Kode CSS dan JavaScript untuk Feature Content tidak akan terbaca dan itu berarti mengurangi berat blog yang tentunya juga berpengaruh pada loading blog sobat.


Note :
- Perhatikan yang berwarna merah.
- Penggunaan kode <b:if cond='data:blog.pageType != &quot;item&quot;'> antara kode CSS, kode JavaScript dan untuk kode HTML harus sama.


Cara ini juga bisa digunakan untuk kode Auto Readmore. Auto Readmore biasanya juga hanya tampil pada main post dan label post saja. Jadi, tinggal tambahkan kode yang berwarna merah dibawah ini sehingga menjadi menjadi

<b:if cond='data:blog.pageType != &quot;item&quot;'>

Kode Auto Readmore

</b:if>


Untuk widget yang lain pun juga bisa. Yang penting dalam penggunaan cara ini adalah tau jenis dan fungsi kode untuk mengatur tampilan widget blog. Disamping itu juga, ada kode ato widget blog yang tadinya muncul tapi kemudian menghilang atau dari menghilang, kemudian baru muncul.

Semoga bermanfaat.

Tutorial Lanjutan Pilihan Kode Untuk Membuat Widget Blog Dari Muncul Menjadi Menghilang

Ada yang terlupa dari postinganku kemarin tentang membuat widget dari muncul menjadi menghilang. Seumpama sobat ingin menambahkan widget yang bisa menghilang saat Kategori Post/Label diklik atau membaca artikel postingan secara keseluruhan, ada baeknya sobat memberi judul widget tersebut. Hal ini untuk memudahkan dalam hal mencari kode widget tersebut.

Berikut ini langkah2 menambahkan widget yang dapat menghilang.

1. Login ke blog sobat

2. Klik pada Layout, Page Element dan klik Add a Gadget

3. Pilih HTML/Script. Jangan lupa untuk memberi judul supaya mudah untuk mencari kode widgetnya.

4. Save


Langkah selanjutnya :

5. klik pada Edit HTML

6. Jangan lupa centang pada Expand Widget Templates

7. cari kode widget tadi. Untuk mempermudah, pencet tombol Ctrl + F atau F3 dan ketikkan judul widget tadi

8. berikut ini adalah contoh widget blog ku yang judulnya Blog Sobat-ku

<b:widget id='HTML5' locked='false' title='Blog Sobat-Ku' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h2 class='title'><data:title/></h2>

<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

** Perhatikan yang berwarna merah. Itu adalah judul widget yang sobat buat tadi.

9. Kalo sudah ketemu, klik disini untuk lebih lanjut.

Pilihan Kode Untuk Membuat Widget Blog Dari Muncul Menjadi Menghilang

Kepanjangan gak ya judulnya?? Bener gak ya judulnya??hehehhe..Lha aku bingung mau kasih judul apa ale gak tau definisi postingan ini intinya apa tapi kalo sobat baca mpe slese postingan ini, sobat akan mengerti apa maksutnya Pilihan Kode Untuk Membuat Widget Blog Dari Muncul Menjadi Menghilang

Seperti yang kita tau, sekarang banyak macam2 template untuk blog dan salah satunya adalah Magazine Style Template seperti Arthemia Template yang aku gunakan ini, Zinmag Remedy, dll. Ciri khusus pada Magazine Style Template adalah ada widget yang akan hilang apabila kita membaca artikel postingan secara keseluruhan atau hanya ketika Kategori Postingan/Label diklik. Sebagai contoh, template yang aku gunakan ini. Widget BROWSE CATEGORIES akan hilang apabila sobat mengklik Kategori Postingan/Label pada blog ini atau membaca artikel postingan secara keseluruhan.

Bagaimana widget tersebut bisa hilang?? Tentunya ada kode khusus. Nahh..Dari brosing2 mencari kode tersebut dan dari liat2 kode HTML pada template Magazine Style yang aku gunakan, ternyata ada dua jenis kode dan masing2 kode berbeda waktu kerjanya dalam menghilangkan suatu widget.

Terus..apa aja kodenya?? Katanya ada dua..

1. Kode pertama

<b:if cond='data:blog.pageType == &quot;index&quot;'>

widget yang akan dihilangkan

</b:if>


2. Kode ke dua

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Widget yang ingin di hilangkan

</b:if>


Bedanya dimana??

- beda penulisan kodenya,halah..wis jelas nek kui,wkekekekkeee...
- Pada kode pertama, widget baru akan menjadi hilang apabila sobat membaca artikel secara keseluruhan (READMORE..) dan belum hilang ketika sobat mengklik Kategori Postingan/Label. Sebagai contoh bisa bisa liat widget Blog Sobat-Ku di blog ini. Widget tersebut baru hilang ketika sobat membaca artikel postingan secara keseluruhan (mengklik Lanjutin bacanya..) dan belum hilang ketika Kategori Postingan/Label diklik.

- Pada kode ke dua, widget akan hilang WALAUPUN sobat atau pengunjung cuma mengklik Kategori Postingan blog. Sebagai contoh bisa diliat disini. Pada widget dengan judul Demo Tabview Versi I (ShadeTabs) saat tampilan URL awal (home), widget tersebut masih ada tetapi kalo sobat klik Kategori Postingan/Label, widget tersebut akan hilang.

So..beda cara kerja antara kedua kode tersebut terletak pada saat sobat/pengunjung blog mengklik Kategori Postingan/Label

Untuk penempatan kodenya sendiri, sama. Tinggal sobat tentukan sendiri apakah widget sudah hilang saat Kategori Postingan diklik atau berharap baru hilang saat membaca seluruh postingan (Readmore).

Caranya??

Aku gak tau secara persis kode sebuah widget diawali n diakhiri dengan kode apa, tapi biasanya seperti ini,hehehehehe..

Berikut ini adalah kode asli suatu widget (Add HTML/Script pada Page Element) :


<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>


** Perhatikan kode yg berwarna merah


1. Apabila sobat ingin memakai kode yang pertama, maka kode widget akan menjadi seperti berikut :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h2 class='title'><data:title/></h2>

<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>


Save

**Perhatikan kode yang berwarna merah


2. Apabila sobat ingin memakai kode yang ke dua, maka kode widget akan menjadi seperti berikut :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h2 class='title'><data:title/></h2>

<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>


Save

**Perhatikan kode yang berwarna merah


Tinggal diliat deh hasilnya..


Yupp..begitulah perbedaan cara kerja kedua kode tersebut dalam menghilangkan suatu widget. Ehmm..pilih salah satu atau mau mengkombinasikan keduanya??

(Akhirnya slese juga..huhh...capek juga ya ngetiknya..)

Terimakasih

Membuat Menu Tabview (Versi I : ShadeTabView)

Kadang, karena widget-widget pada blog banyak, blog terkesan penuh sesak. Oleh karena itu, alangkah baeknya sobat meringkasnya dalam 1 tempat dengan menggunakan Tabview. Dengan demikian, blog sobat lebih enak dipandang mata,halah...Kata pengantar urak mutu.. Karena jenis2 Tabview banyak, aku coba dengan Tabview yang ini dulu, ShadeTabview.

Langkah-langkahnya :
1. Login blog

2. Masuk ke Layout

3. Edit HTML (sobat gak perlu centang Expand Widget Templates)

4. Cari kode berikut ]]></b:skin>

5. Letakkan kode script berikut di bawah kode ]]></b:skin>


<link href='http://atozet18.googlepages.com/tabviewcontent.css' rel='stylesheet' type='text/css'/>

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


6. Save

7. Sekarang sobat klik Page Element pada Layout

8. Add a Gadget dan pilih HTML/Javascript

9. Masukkan kode berikut


<ul id="countrytabs" class="shadetabs">
<li><a href="#" class="selected" rel="country1">Demo 1</a></li>
<li><a href="#" rel="country2">Demo 2</a></li>
<li><a href="#" rel="country3">Demo 3</a></li>
<li><a href="#" rel="country4">Demo 4</a></li>
<li><a href="http://www.dynamicdrive.com" target="_blank">Dynamic Drive</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Just a Demo..Just a Demo
<a href="http=blogcenti.blogspot.com">Berita Basi</a>
<a href="http=blogcenti.blogspot.com">Cerita hari ini</a>
<a href="http=blogcenti.blogspot.com">Basa basi</a>

</div>

<div id="country2" class="tabcontent">
Just a Demo..Just a Demo
<a href="http://dhe-gallery.blogspot.com" target="_blank">Free Blogger Template</a>
<a href="http://dhe-gallery.blogspot.com" target="_blank">Free WordPress Theme</a>
<a href="http://dhe-gallery.blogspot.com" target="_blank">Free Site Template</a>
</div>

<div id="country3" class="tabcontent">
Just a Demo..Just a Demo
<a href="http://azthemes.blogspot.com" target="_blank">WordPress Theme</a>
<a href="http://azthemes.blogspot.com" target="_blank">Site Template</a>

</div>

<div id="country4" class="tabcontent">
Just a Demo..Just a Demo
<a href="http=moneylocker.blogspot.com">Pay per click</a>
<a href="http=moneylocker.blogspot.com">Pay per sale</a>
<a href="http=moneylocker.blogspot.com">Pay per lead</a>
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>
<a href="http://blogcenti.blogspot.com/" target="_blank">Just a Blog</a>


10. Save

Lihat demo

Keterangan :

- warna biru = judul kategori Tab
- warna hijau = lebar Tabview. Sesuaikan dengan keinginan sobat
- warna merah = Area teks atau link. Ganti dengan punya sobat
- untuk menambahkan atau mengurangi Tabs, sobat tinggal tambahkan kode seperti berikut :

<li><a href="#" rel="country4">Demo 4</a></li>

dan

<div id="country4" class="tabcontent">
Just a Demo..Just a Demo
</div>

Sumber

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

Highlighter Scroller Sebagai Mini Post

Highlighter Scroller ?? Gak tau juga gimana neranginnya. Pokok nya itu lah.. Highlighter Scroller bisa dijadikan sebagai mini post, menu blog, atau mungkin sebagai blogroll. Aku dapat script ini dari Javascriptkit. Dari keterangan, script ini tinggal masukin dimana sobat mau nempatin Highlighter Scroller nya. Mudah bukan??
Sebelumnya sih aku coba utak-utik lewat Edit HTML tapi berhubung aku gak paham dengan yg namanya kode-kode, jadinya aku gak tau harus ditaruh dimana,heheheheee...

Langkah-langkah membuat Highlighter Scroller :

1. Masuk ke Page Element
2. Add elemen HTML
3. Copat kode yg ada dibawah ini, dan SAVE

Berikut ini adalah kode script nya :


<script type="text/javascript">

//CONFIGURE MESSAGES AND VARIABLES
var tickercontents=new Array()
tickercontents[0]='Looking for template?? Visit <a href="http://dhe-gallery.blogspot.com" target="_blank">Dhe-Gallery</a>!'
tickercontents[1]='You can get <a href="http://moneylocker.blogspot.com" target="_blank">Free Money</a> from many programs here !'
tickercontents[2]='Get your <a href="http://azthemes.blogspot.com" target="_blank">Professional Theme</a>,high quality and SEO Support'
tickercontents[3]='<a href="http://blogcenti.blogspot.com">Just a Blog</a>Apa ayng ku lihat, ku dengar, dan ku rasa !'

var tickerwidth="160px"
var tickerheight="80px"
var fontcss="font: bold 14px Verdana; color:black"
var tickdelay=3000 //delay btw messages
var highlightspeed=2 //2 pixels at a time.
var highlightcolor="#9ff9ff"
var backdroptextcolor="#1e0e0e"

////Do not edit pass this line////////////////

document.write('<style>#highlighterbg a{color:'+backdroptextcolor+'}</style>')
document.write('<div style="position:relative;left:0px;top:0px; width:'+tickerwidth+'; height:'+tickerheight+';'+fontcss+'">')
document.write('<span id="highlighterbg" style="position:absolute;left:0;top:0; width:'+tickerwidth+'; height:'+tickerheight+';padding: 4px"></span><span id="highlighter" style="position:absolute;left:0;top:0;clip:rect(auto auto auto 0px); background- width:'+tickerwidth+';height:'+tickerheight+';padding: 4px"></span>')
document.write('</div>')

var currentmessage=0
var clipbottom=1

function changetickercontent(){
msgheight=clipbottom=crosstick.offsetHeight
crosstick.style.clip="rect("+msgheight+"px auto auto 0px)"
crosstickbg.innerHTML=tickercontents[currentmessage]
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}

function highlightmsg(){
//var msgheight=crosstick.offsetHeight
if (clipbottom>0){
clipbottom-=highlightspeed
crosstick.style.clip="rect("+clipbottom+"px auto auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipbottom=msgheight
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}

function start_ticking(){
crosstickbg=document.getElementById? document.getElementById("highlighterbg") : document.all.highlighterbg
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}

if (document.all || document.getElementById)
window.onload=start_ticking

</script>

<a href="http://javascriptkit.com">JavaScript Kit</a> | <a href="http://blogcenti.blogspot.com">Just a blog</a>


Hasilnya akan seperti ini. Lihatdemo

Keterangan : Ganti sesuaikan dengan selera sobat
- warna merah = ganti dengan text atau link sobat
- warna biru = lebar dan tinggi Highlighter Scroller
- warna biru tua = jenis dan ukuran font
- warna hijau = warna background dan warna link url

Jika ingin menambahkan text atau link di Highlighter Scroller, sobat tinggal tambahkan seperti contoh berikut :

tickercontents[3]='<a href="http://blogcenti.blogspot.com">Just a Blog</a>Apa ayng ku lihat, ku dengar, dan ku rasa !'

Ket : angaka yg di cetak tebal,merupakan no urut text dan link sobat. Ganti sesuai dengan no urut.

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..