Cara Mengatasi Hosting Javascript di Blogger

Sangat menyebalkan sekali saat file javascript yang kita simpan di host lain mulai kehabisan bandwidth. Blog yang semula terlihat interaktif malah jadi kacau balau tampilanya. Yah, inilah salah satu keleman blogger karena tidak memberikan kita kapasitas ruang simpan, terutama yang berurusan dengan file javascript. Sebagai alternatif biasanya kita bisa saja meminjam web hosting gratis dari pihak ketiga, sayangnya tawaran yang diberikan ternyata tidak selalu memuaskan. kapasitas simpan yang ditawarkan sih besar, tapi jadi percuma bila kapasitas bandwidth yang diberikan sangat tidak sebanding hehehe. Terus, gmana solusinya? tenang saja sob, karena kali ini saya akan mencoba berikan tips untuk mengatasi masalah-masalah seperti itu... ya.. mudah-mudahan tips ini cukup membantu permasalahan yang anda alami... OK.. lamsum saja ke pokok masalahnya..

Mengubah format ekstensi file dari  .js ke .txt

Ingat, tidak semua javascript dipanggil dengan akhiran .js, ini sebuah keuntungan dimana kita dapat menyimpan dan memanggil file javascript dalam format text yang tersimpan dalam format .txt 

Tidak semua layanan free web hosting memberikan keleluasaan bagi kita untuk menyimpan file berformat .js pada hosting mereka, jadi kita dapat mengakalinya dengan cara mengubah extensinya saja, dari .js ke .txt

Cara memanggil javascript berformat .txt pada host lain:

<script type="text/javascript" src="alamat-url-namafile.js" />

Pemanggilan bisa diganti dengan

<script type="text/javascript" src="alamat-url-namafile.txt" />

Simpan Javascript pada element halaman HTML/Blogger Gadget

Tidak semua kode javascript harus di simpan di host lain atau hanya dalam halaman Edit HTML, kita sebenarnya bisa saja memasang kode JS ini langsung pada element halaman blogger "HTML/Javascript". Namun sangat disayangkan cara ini tidak selalu 100% berhasil, karena tidak semua file javascript bisa support dengan penyimpanan pada widget ini. Mungkin hanya berhasil jika code javascript tersebut hanya berdiri sendiri, dalam artian file JS tersebut tidak saling berhubungan dengan memanggil kode yang satu dan kode lainnya. 

Simpan code javascript langsung pada halaman EDIT HTML

Platform blogger sebenarnya membebaskan kita untuk meletakan langsung kode javascipt pada halaman Edit HTML. Cara ini selalu berhasil saya terapkan, namun kadang tidak terlalu efektif juga bila code javascript yang kita gunakan terlalu panjang code scriptnya. Cara yang terakhir ini menurut saya merupakan salah satu terbaik yang harus dicoba.

Sebelum mencoba cara dibawah, pastikan kita sudah mempunyai code JS yang akan disimpan. Jika rekan masih bingung, kode JS bisa ditemukan langsung dengan mengambil melalui alamat URL. lihat contoh pemanggilan kode dibawah yang tercetak tebal. disitulah biasanya kode JS disimpan.

<script type="text/javascript" src="alamat-url-namafile.js" />

Coba dengan masukan langsung urlnya di browser, kalo sudah ketemu tinggal copy saja kodenya. 

Agar kode JS yang sebelumnya di host dialamat lain bisa langsung digunakan diblogger, kita bisa langsung menggunakan kode dibawah ini. 

<script type='text/javascript'>

//<![CDATA[

Isi_Script_Disini

//]]>

</script>

Semoga saja cara diatas bisa mengatasi masalah kehabisan bandwidth, kalo masih bermasalah ya tinggal gunakan saja Hosting berbayar..beres heheheh

Cara Menampilkan Kode HTML/Javascript pada postingan kita

Mungkin anda sudah pernah ingin menulis kode javascript/HTML ke postingan tetapi hasilnya kode tersebut hilang/tidak tampak. Pasti kamu ingin menampilkan kode HTML/javascript pada postingan kamu itu. Untuk mengatasinya, kamu dapat meng-convert kode tersebut(dalam kata lain mengubah kode tersebut berformat postingan). Initipsnya: kamu harus mengubah kode tersebut ke format khusus untuk postingan. hal ini bisa dilakukan secara manual tapi akan memakan waktu yang lama jika kode javascript yang kamu masukkan mempunyai panjang yang tak terbayangkan.

1. buka halaman http://centricle.com/tools/html-entities/

2. Masukan kode HTML/javascript 

3. Lalu klik encode

4. Copy semua kode hasil encode tersebut

5. Lalu paste ke dalam postingan kamu

6. Selesai
 

Pasti kodenya berbeda dengan kode javascript yang ingin kamu masukkan kedalam postingan kamu. tetapi setelah diterbitkan, kode akan berubah seperti kode yang ingin kamu masukkan sebelumnya.

 

Nb : Jangan lupa klik menu “HTML” di kotak posting atas-kanan sebelum memasukkan kode html yang sudah di-encode tadi.

Tips Cara Mengatasi Kesulitan Memasang Javascript di Template BlogSPOT

Pasang javascript memang gampang-gampang susah, Jo! Kadang sekali tempel langsung lewat begitu saja. Uh …. nyes …! Perasaan senang nggak karuan. Apa yang di harap muncul begitu javacript terpasang, langsung … jlep … nongol di blog. Kita tinggal sedikit menata ulang halaman atau tampilan sambil menyiulkan seratus lagu dang dhut. Suit sit sit … suit sit sot sit sit …. suiiiiii….iiit. Shot sit sit … sot sit sit sot sit sooooooooot … ot ….. Jrot …. Terus nafas megap-megap karena siulnya jadi kepanjangan! Iya, toh, Jo?! He …. Si Bejo nyang lagi ndelosor tiduran di samping tempat aku ndelosor cuma’ cengar-cengir persis kerbau tolol di cocok pantatnya pakai batang kayu! He …. Untung saja si bejo dan bukan kerbau! Biar pantat di cocok besi paling juga cengar-cengir persis Tarzan yang suka street-walking (he..eh dia nggak kenal blog walking, je!).

Yah … emang begitu kasus yang sering kita alami dengan javascript. Kalau kebetulan kode javascriptnya cocok di blog, wus …. langsung bisa jalan tanpa perlu coba-sini coba-sana, semua bagai kentut tanpa dihalangi. Pasang javascript memang nggak banyak kendala bila dilakukan terhadap javascript yang sebelumnya telah diupload. Begitu juga pemasangan javascript melalui penambahan widget. Hampir bisa dikatakan 100% tak akan menemui kendala sama sekali. Permasalahan yang muncul biasanya hanya terjadi pada masalah ke-kompatibelan javascript tersebut terhadap browser atau blog yang kita kelola.

Permasalahan pemasangan javascript yang akan kita bicarakan di sini adalah ketika sebuah javascript akan kita pasang di antara tag <body> dan </body> atau di antara tag <head> dan </head> di dalam template (nggak lewat penambahan widget). Beberapa javascript sama sekali tak dapat disimpan dengan pernyataan penolakan yang disampaikan blogger karena berbagai alasan. Bagaimana cara mengatasi masalah seperti ini? Ada satu cara termudah yang dapat kita lakukan untuk menetralisir penolakan blogger tersebut. Tambahkan seikit kode baru seperti di bawah ini, maka slap ….. tanpa ba … bi … bu …. dan banyak cincong yang lain si javascript akan amblas menyatu dengan template dan blog sampeyan.

Cara Mengatasi Pemasangan Javascript yang Bandel di Template Blog

Di bawah ini adalah contoh bentuk kode javascript yang akan di pasang di blog :

<script type="text/javascript">
if(
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = '';
this.value = 'Close !;
}
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '';
this.value = 'Please ..., Open!';
}
</script>

Jadikan bentuk javascript menjadi seperti ini :

<script type="text/javascript">
//<![CDATA[

Di sini Javascript di tuliskan!

//]]>
</script>

Sehingga apabila diterapkan pada javascript di atas bentuknya menjadi seperti di bawah ini :

<script type="text/javascript">
//<![CDATA[
if(
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = '';
this.value = 'Close !;
}
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '';
this.value = 'Please ..., Open!';
}
//]]>
</script>

Yap … hanya seperti itu saja! nggak ada lagi yang lain. Tapi mengapa bisa jadi bisa di simpan, ya? Hoo … hooo … Tanya saja sama si Bejo nyang misih ndilosor atau datanglah ke ladang pak Sakimin kemudian tanya pada jagung yang bergoyang, … he …. he …

Cara Mengupload File JavaScript

File-file JavaScript agar bisa dibaca oleh browser terlebih dahulu harus kita upload. Banyak tempat hosting file JavaScipt dari yang berbayar sampai yang gratis. Untuk tutorial ini saya menjelaskan dan merekomendasikan untuk menyimpan file JavaScript anda di RipWay karena sangat mudah dan gratis untuk digunakan.

1. Bagi yang belum punya akun di RipWay silahkan daftar dulu di http://www.ripway.com.
2. Setelah login. Pada halaman utama Klik menu MyFiles

3. Klik Upload, untuk menuju halaman upload file.


4. Klik tombol browse untuk memilih file yang akan di upload.

Kemudian klik Upload untuk mulai menguplaod file.

5. Klik lagi menu My Files untuk mengambil URL file JavaScript anda.


6. Copy URL JavaScript anda agar dapat langsung digunakan.

Cara memanggil file javascript atau js ke halaman blog

cara memanggil file js nya ke halaman blog: 

<script type="text/javascript" src="alamat url atau link javascript sobat"></script>

Cara Edit File Java Script - Trik Mudah Edit File JS

Mungkin istilah "file Java Script" atau JS ini sudah tidak asing lagi bagi teman-teman Blogger. Beberapa pernak-pernik maupun hiasan yang ada di blog biasanya tidak terlepas dari file yang berformatkan JS ini. Namun, walau istilah yang satu ini sudah menjadi makanan sehari-hari bagi para Blogger ada sesuatu yang sering dipertanyakan antara seorang Blogger yang satu dengan blogger lainnya, "Bagaimana sih cara mengedit file Java Script ini?". Pertanyaan ini mungkin muncul dikarenakan adanya beberapa tampilan gadget yang berbeda namun pada intinya memiliki fungsi yang sama, sehingga masalah ini lah yang memunculkan tanda tanya besar. Lalu bagaimana kah cara ngeditnya? Kok tampilan widgetmu dengan widgetku berbeda?

"Beberapa kali saya pernah ditanya oleh teman2 Blogger mengenai hal ini. Dan karena saya ditanya, tidak menjawabnya maka itu menjadi sesuatu yang tidak baik bagi saya, semoga dengan hadirnya postingan ini bisa menjawab pertanyaan tersebut.

Sebelumnya, "apa itu file JS?" singkatnya file JS adalah file yang berisikan kode Java script yang kemudian formatnya terdiri dari dua huruf, yaitu "JS" yang tidak lain merupakan singkatan dari "Java Script" (contoh bentuk file: namafile.js). Lalu mengenai fungsinya, sama saja dengan fungsi kode java script pada umumnya, namun ini dijadikan sebagai file JS agar lebih mudah digunakan atau mudah untuk di-sharing/berbagi dengan teman-teman lainnya, pasalnya dengan dijadikannya berupa file, maka ini akan mempersingkat kode script yang ada, sehingga dengan tampilan jumlah kode yang diminimalisirkan menjadi satu file akan lebih kelihatan simpel, mudah, dan enak dipandang.

Nah, itulah sekilas mengenai JS. Sebagai contoh, berikut adalah contoh kode HTML yang fungsinya didukung oleh file .JS

<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/zoom.js' type='text/javascript'/>

Di atas itu adalah sebagian dari kode script pembentuk Efek Zoom pada gambar. Nah, yang ditandai dengan warna biru itu lah (URL) "file JS".

Berikut langkah-langkah mengedit file JS

1. Silahkan download dulu file JS yang anda inginkan (sebagai contoh, silahkan di-download file JS yang tertera di contoh kode di atas - caranya kopi URL yang ditandai dengan warna biru ke kolom browser anda, klik enter => maka akan muncul popup "save file" => Klik Save file!!!)

2. Selanjutnya pergilah ke folder explorer, yaitu tempat di mana anda menyimpan file JS tadi.
3. File JS/Java Script tersebut berformat JS, contoh: namafile.JS, serta icon-nya seperti berikut

4. Selanjutnya, untuk memulai mengedit file tersebut, Klik kanan => pilih Edit

5. Maka akan terbuka suatu halaman Notepad, namun masih dalam format JS seperti berikut

Nah, sekarang silahkan untuk mengedit file JS-nya sesuka anda. Mungkin yang ingin anda edit adalah gayanya, gaya tulisannya, URL gambarnya, dll (ini hanya contoh, tiap file JS memiliki elemen yang berbeda-beda. Dan untuk contoh file JS di atas hanya menggunakan efek zoom). Dan jika proses pengeditan telah selesai, jangan lupa untuk menyimpannya: Klik menu File => Klik Save.

SELESAI!!!

Sekarang file JS baru anda telah jadi. Untuk mengetahui hasil kerjaan anda, maka anda harus memilki URL dari file editan anda tersebut. Caranya mudah, silahkan untuk menghostingnya di web hosting milik anda, setelah itu ambil alamat URL-nya dan pasanglah di script di mana anda mengambil file JS tersebut, contoh:

<script src='URL File JS hasil editan anda' type='text/javascript'/>

Belum memiliki web hosting, dan apa itu web hosting? Silahkan di baca di sini.

BAGAIMANA, EDIT FILE JS ITU GAMPANG DAN MENYENANGKAN BUKAAAAN?^

Semoga bermanfaat_

Tips Menggunakan Code Google

http://code.google.com/ merupakan salah satu layanan gratis dari google, asalkan kita sudah mempunyai account gmail tentunya.

Untuk kegunaanya, kita bisa menyimpan file-file external blog kita di http://code.google.com/, ya seperti file hosting gitu maksudnya, lumayankan daripada nyari hosting susah-susah.


Saya juga menggunakan http://code.google.com/ untuk menyimpan file css dan javascript yang terlalu panjang di halaman edit html, yang katanya dengan menggunakan file external bisa membuat loading blog menjadi cepet, tapi itu juga katanya..

Untuk bisa memanfaatkan layanan ini terlebih dahulu kita harus punya account gmail, jika sudah ikuti langkah berikut ini :

• Login di Gmail
• Masuk ke http://code.google.com/
• Geser kebawah dan klik Project Hosting
  
• Selanjutnya Klik Project Hosting on Google Code
  
• Langkah selanjutnya Klik Create a new project
  
• Isi kolom yang ada
  Project name: Isi terserah anda
  Project summary: Isi terserah anda
  Project description: Isi terserah anda
  Version control system: Mercurial
  Source code license: Mozilla Public License 1.1
  Use a separate content license: Kosongkan saja
  Project labels: Kosongkan saja
  
  lalu klik

Sekarang cara upload file di http://code.google.com/

• Klik Downloads
  
• Lalu klik New Download
  
• Silakan isi kolom yang ada dan pilih file yang akan di upload lalu klik
• Untuk melihat URL dari file yang diupload tadi silakan klik file yang tadi sudah diupload
  
• Lalu klik kanan pada nama filenya pilih copy link address
  
• Paste di notepad, nah itu adalah URL file yang tadi diupload

Untuk mengupload file yang lain silakan ulangi langkah-langkah diatas.

Semoga Tips ini bisa membantu.

Menyimpan File Java Script di Hosting Google Codes

Banyak sekali pertanyaan yang masuk, baik melalui komentar ataupun melalui email. Setelah saya pilah-pilah ternyata ada pertanyaan saya dan lumayan banyak yang menanyakan tentang cara menyimpan file .js ke dalam hosting google codes.

Memang terkadang kita sebagai blogger kebingunan untuk menyimpan beberapa file javascript atau .js yang digunakan untuk mempercantik tampilan blog kita. Mau ditaruh di hosting pribadi takutnya sewaktu hosting kita bermasalah atau habis lebih-lebih kita gak kuat membayar hehehehe. Tapi rupanya google mengerti dengan kita selaku pengguna blogger, yang gak punya hosting pribadi untuk menyimpan file-file penting dan dengan google codes kita sudah disediakan oleh google tempat untuk menaruh file pribadi kita terutama file javascript .js Nah bagaimana caranya ?

Jika Anda pengguna Gmail, tentunya akan sangat mudah menggunakannya karena dengan gmail Anda sudah secara otomatis dapat menggunakan layanan hosting dari Google ini. Oke silahkan masuk ke http://code.google.com/hosting/ . Langkah selanjutnya klik new project seperti gambar di bawah ini.

Jika sudah masuk, Anda akan dihadapkan dengan form pengisian. Jangan kaget dan jangan bingung karena ini cukup mudah. Lihat gambar dibawah ini

Sudah terbuka ? oke langkah selanjutnya yang perlu Anda lakukan adalah mengisi  form tersebut dengan keterangan file project yang akan anda simpan,

• Project Name, isikan dengan nama halaman Anda
• Project Summary, isi dengan judul proyek Anda
• Project Description, berikan deskripsi/keterangan sesuka Anda
• Version Control System, pilih Mercurial
• Source Code Licenses, pilih GNU General Public License v3
• Centang Use a Separate Content License dan pilih salah satu, setelah itu, click: create project.

Sudah,mudah bukan ? kalau sudah lanjut ke langkah selanjutnya, yakni meng-upload file yang ingin Anda simpan, perhatikan gambar dibawah ini

Anda harus Click di tab : Download>New Download kemudian ;

• isi: summary, dengan nama file javascript anda ;
• browse file dari computer anda ;
• Submit file.

Kalau sudah di submit, berarti file Anda terlah tersimpan di hosting google codes. Dan daftar file yang telah Anda upload / simpan akan terlihat seperti gambar dibawah ini.

Lalau jika Anda ingin menggunakan dan memanggil file yang telah Anda simpan, caranya dengan meng Klik salah satu file yang telah Anda submit. Kalau sudah akan terlihat seperti gambar dibawah ini

Dan copy link file Anda yang ingin Anda gunakan dengan cara klik kanan pada nama file, lalu klik copy link location dan pastekan…

Oke mudah dan cepat bukan ? 

Cara Membuat Menu Drop Down Horizontal Dengan JavaScript

Pada postingan ini, saya akan memaparkan bagaimana membuat menu drop down horizontal pada blogspot. Menu drop down merupakan menu yang mempunyai sub-sub menu didalamnya. Prisipnya adalah ketika pointer menyorot sebuah main menu, maka akan muncul sub menu dari main menu tersebut. Kode-kode ini saya dapat dari www.dynamicdrive.com. Klik disini untuk melihat contohnya.

Bagaimana cara menambahkan menu drop down pada blog kita? Berikut langkah-langkahnya:

1. Silahkan login terlebih dahulu pada akun Blogspot pembaca
2. Klik link menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
   
3. Jangan lupa untuk membackup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Klik link Download Template Lengkap
4. Copy paste kode berikut di atas tag </head>
   <script type="text/javascript"
src="http://nestoriko.googlepages.com/chrome.js">
</script>
   
5. Cari kode ]]></b:skin> kemudian tambahkan struktur CSS dibawah ini dengan mengcopy paste diatas kode ]]></b:skin>
   
.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}
   
6. Cari struktur seperti dibawah ini pada template pembaca
   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
   
7. Jika sudah ketemu, copy paste struktur berikut ini tepat dibawah struktur yang Anda temukan pada langkah 6
   <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
8. Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna biru). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua". Sehingga strukturnya akan menjadi:
   <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
<li><a href="#" rel="dropmenu3">Menu3</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<!--menu drop down ketiga-->
<div id="dropmenu3" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
9. Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu3" yaitu "dropmenu3". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
10. "URL sub menu1" merupakan URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.
11. Bagi pembaca yang membuat web dengan menggunakan menggunakan software web design seperti dreamweaver, langkahnya hampir sama dengan yang diatas. Hanya saja struktur yang ada pada langkah 7 diletakkan pada bagian halaman web dimana pembaca ingin menambahkan menu drop down tersebut.
    

Selamat mencoba !!!