Trik Menjadikan Blog Ranking 1 di Google | Google Ping

Bosan ahhhh…posting tentang software terus, kali ini Tim Kreativ Java Creativity akan berbagi trik sederhana namun Dahsyat untuk menjadikan Blog/Situs anda menjadi nomer 1 di Google.

Untuk menjadi rangking 1 di Google memang sesuatu yang sangat misteri, ada banyak hal yang biasanya digunakan para pemilik blog atau website untuk menjadikan blognya nomer 1 di Google dan tak jarang pula yang sampai berani membayar jasa SEO dalam melakukannya. Tapi apakah Java Creativity juga melakukan hal yang seperti itu?? Ohhh tentu tidak, karena kami sudah mempunyai beberapa jurus sendiri agar situs Java Creativity ini jadi Nomer 1 di Google dan tentunya semua trik yang kami gunakan sangatlah sederhana dan Gratis..tis ^_^

Berikut ini beberapa Screenshoot artikel Java Creativity yang menjadi nomer 1 di Google dan ada di halaman pertama Google.

Coba gunakan kata kunci “Craagle 4” pada kolom pencarian Google, dan lihatlah hasilnya Java Creativity yang nomer 1 kan dengan 505.000 saingan ^_^


Pada kata kunci "pc prank" Java Creativity juga ada di halaman pertama Google dengan saingan 8.900.000 hahaha mantap nggak tuuuh ^_^



Dan yang paling parah ini, artikel ini kami buat (posting) sekitar 8 jam sebelum Screenshot ini kami ambil. Jadi hanya membutuhkan waktu 8 jam dan sudah menempati halaman pertama di Google…..Al…hamdu….lillah ^_^


Sebenarnya masih buuuaannnyak artikel Java Creativity yang ada di rangking 1 Google tapi sengaja tidak kami tunjukkan karena kami khawatir nanti bisa-bisa anda pingsan kalau melihatnya hahahahahaha.

Dan perlu Mas Gan ketahui bahwa ada banyak sekali trik yang kami gunakan untuk membuat menjadi nomer 1 di Google dan kami janji akan membahasnya satu persatu nantinya. Trik pertama (Part One) yang biasanya kami lakukan adalah menggunakan Google Ping.

Apa itu Google Ping?? Intinya, ada cara mudah untuk Optimasi Postingan Blog yang lebih efisien supaya Search engine Google cepat mengindex Halaman artikel yang baru kita Update di blog. cara tersebut adalah menggunakan jasa Google Ping. dengan "Google Ping" kita dapat memberitahukan Search Engine Gogle adanya URL postingan terbaru di blog kita.

Java Creativity selalu melakukan trik optimasi postingan blog ini sehabis mengupadate Postingan terbaru. terbukti setelah melakukan ping menggunakan Google Ping dalam waktu paling lambat 24 jam artikel sudah terindex search engine Google. Ping dalam artian sebenarnya adalah Bersiul, namun dalam pengertian di dunia Website/Blog ping dapat diartikan suatu cara memanggil Search Engine untuk datang menjelajahi blog kita.

Udah nggak sabar pengen melakukan Ping? Berikut ini caranya :

• Buka halaman Google Ping alamatnya www.googleping.com

• Setelah Halaman Google Ping terbuka isi kolom "Blog Details" seperti ini:Keterangan :

Blog Name: Bl4ckCyber
Blog Home Page: http://bl4ck-cyber.blogspot.com/
RSS URL (optional): http://bl4ck-cyber.blogspot.com/feeds/posts/default
Email (required for some): cahkwayangan@gmail.com


Catatan :
Bl4ckCyber ganti dengan Nama Blog atau situs anda
http://bl4ck-cyber.blogspot.com/ ganti dengan URL Home Page Blog anda
cahkwayangan@gmail.com ganti dengan Email anda

• Setelah mengisi Blog Details, anda tinggal mencentang "Service To Ping". klik tulisan "Cek All" untuk mencentang semuanya.

• Setelah semuanya selesai dicentang, klik tulisan "Send Pings" yang letaknya paling bawah.

Catatan : Ingat yah…lakukan Ping setelah selesai mengupdate blog/membuat postingan baru.

---

Created: diie | source: blinkz-xp

IDM ver.6.07 Build7 Portable

ah kali ini saya akan memberikan IDM yang lain, yang lebih kecil dan ringkas.
Yaitu IDM Ver.6.07 Build 7 Portable.
Fungsinya sama seperti IDM versi Installer, tapi yang ini adalah versi Portablenya. Tinggal di simpan di FlashDisk dan jalankan. Tidak perlu meng-install.

Jika anda berminat silahkan di download.
IDM Version 6.07 Build 7 Portable

Pass RAR : imherry
Untuk meng-integrasikan Firefox Mozilla dengan IDM Portable caranya adalah :
Menu Download –> Option —> General –> di bagian Capture Download from the following browsers Centang Mozilla dan Mozilla Firefox lalu klik OK.
Selamat Mencoba….

---

created: diie | source: Imherry

Cara mengkompress gambar

Kehadiran image/gambar dalam sebuah situs memang sangat dibutuhkan. Selain memperindah, sebuah gambar juga mampu berkata lebih banyak ketimbang teks yang berjibun di situs kita. Terlebih jika sebuah situs berfokus kepada konten mengenai tutorial, gambar adalah sebuah konten wajib yang harus ada didalam postingannya.
Tapi permasalahannya menjadi berbeda ketika sebuah situs akhirnya menjadi berat, lantaran gambar-gambarnya yang berukuran besar. Ini bisa dilihat pada situs-situs mengenai tutorial photoshop, seperti psdtuts, photoshoplady, dsb.

Adakah cara mengatasinya?

Untuk yang mempunyai program Photoshop pada komputernya, kalian bisa menggunakan pilihan Save For Web Devices (CTRL+SHIFT+ALT+S) yang sudah ada. Tools yang disediakan ini mampu mengecilkan ukuran file gambar, dengan menurunkan kualitas gambar ke kualitas yang paling mendekati gambar asli.
Berikut adalah contoh hasil gambar yang dikompress menggunakan Save for Web Devices :

  

Gambar disebelah kiri berukuran 30kb, dan setelah dikompress, ukurannya menjadi hanya 14kb saja. Hasilnya tidak terlalu jauh berbeda kan dengan yang aslinya?
Lalu bagaimana dengan yang ngga punya sotosop ? kalian bisa memakai software Image Resizer sebagai alternatif.
Dari hasil uji coba, software yang satu ini bisa menghasilkan kualitas gambar yang ngga jauh beda dengan yang dihasilkan oleh tools Save for Web Devices nya photoshop. Cara pakainya pun mudah koq.
1. Download dulu softwarenya melalui link ini :
http://www.ziddu.com/download/12644093/ImageResizer_Portable_4.0.1.5_Multilingual.paf.exe.html (7mb)
2. Jalankan file installernya.
3. Kalo udah, jalankan deh programnya.

4. Dimenu utama, masukkan file gambar yang ingin kalian perkecil, kemudian tekan tombol next untuk masuk ke pengaturan selanjutnya.

Pada menu pengaturan, pilihan resize yang di berikan sangat lengkap. Kalian bisa merubah ukurannya sesuai dengan standar profile ataupun dengan resolusi yang kalian inginkan sendiri. Kemudian, juga ada pilihan preview untuk melihat bagaimana hasil gambar yang akan dihasilkan nantinya.
Pengen berimprovisasi lebih dengan gambar yang kalian resize tersebut?, kalian bisa memasukkan efek ke dalamnya, dan masih banyak lagi fitur-fitur lainnya. Pokoke, software ini bisa dibilang software wajib untuk kalian yang ingin blognnya tetap ringan walaupun memakai image yang lumayan banyak.

---

created: diie | source: Daw-xp

Cara buat footer 3 kolom

Assalamu'alaikum Wr. Wb. Oke, pada kesempatan kali ini Fullka Dot akan menulis posting mengenai blog nih.. Akhirnya Share lagi di seputar blogger/blogspot. Yap, sebetulnya postingan ini telah lama di Request oleh sobat-sobat Blogger Pradisz. Namun, karena banyak faktor saya + malas saya untuk share tentang kode-kodean. Hehe..

Klik Untuk Memperbesar Gambar

Ya, untuk tutorial kali ini memang agak sedikit aneh sama title postnya. Memang ini mungkin model footer yang akan kita bahas sering sobat temukan pada blog ini. Saya mengambil dari berbagai inspirasi dari berbagai blog. Untuk hover pada navigasinya pun saya terinpirasi dari blognya o-om. Untuk warna abu-abu kegelapan itu merupakan warna kesukaan saya. Karena mungkin memang cocok aja..

Oke, langsung aja ya tanpa basa-basi untuk Cara Membuat Footer 3 Kolom Pada Blog. Caranya, mudah ikuti langkah-langkah dibawah ini.

1. Login ke Akun Blogger anda pastinya.
2. Kemudian, masuk ke "Template", lalu klik & Pilih "Edit HTML".
3. Pada tahap ini, anda cukup copypaste css dibawah ini tepat diatas kode ]]></b:skin> 

#footer {width:840px;position:relative;clear:both;margin:0;float:center;padding:5px 0 10px 0;text-align:left;color:#fff;background:#3b3b3b;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;}
#credits-footer {width:840px;float:center;margin:0 auto;padding:0px;clear:both;line-height:1.3em;letter-spacing:.0em;border-top:2px solid #fff;overflow:hidden;clear:both;padding:10px 0px 0px 0px;line-height: 1.6em;text-align:center;font-family: Verdana;font-size:12px;color:#fff;font-weight:bold;}
#footer a:link {color:#fff;text-decoration:none;}
#footer a:visited {color:#fff;text-decoration:none;}
#footer a:hover {color:#fff;text-decoration:underline;}
#footer h6 {color:#fff;font-family:Verdana;font-size:14px;font-weight:normal;line-height:1em;text-transform:uppercase;margin-top:20px;margin-right:10px;padding:0 0 5px;color:#fff;border-bottom:2px solid #fff;}
#footer ul {padding:0; margin:0; color:#fff;}
#footer ul li {list-style-type:square;padding-left:2px; margin:3px 0 0 22px;}
#footer-left {width:290px; float:left; margin-left:20px;margin-bottom:20px;}
#footer-center {width:185px; float:left; margin-left:20px;margin-bottom:20px;}
#footer-right {width:300px; float:left; padding:0 5px 0 20px;margin-bottom:20px;}

4. Setelah itu, copypaste kode html dibawah ini tepat diatas kode </body>

<div id='footer'>
<b:section class='footer' id='footer-left' preferred='yes' showaddelement='yes'/>
<b:section class='footer' id='footer-center' preferred='yes' showaddelement='yes' style='text-decoration:none;'/>
<b:section class='footer' id='footer-right' preferred='yes' showaddelement='yes'/>
<br/>
<div id='credits-footer'> Copyright &#169; 2011 - <a href='#' title='#'>Your Title Blog Here !</a> All Rights Reserved
</div>
</div>

5. Save Template/Simpan.

Selesai, Semoga berhasil.

Catatan : Silahkan sobat ubah sesuaikan dengan blognya, dan kreasikan dengan lebih baik lagi.

Semoga bermanfaat.
Wassalamu'alaikum Wr. Wb.

---

created by: diie | source: Fullkadot

Template Hacker Untuk Blog

Wah ga kerasa udah akhir bulan ya gan... ok deh langsung aja, Sobat masih ingetkan sama postingan saya yang ini Template Hacker Untuk Blogspot? nah kali ini saya akan men-share template hacker untuk blogspot part 2.

Tema templatenya hampir sama seperti Template Hacker Untuk Blogspot yaitu mengusung "Injector Themes", hanya tampilan warna dan menunya saja yang sedikit berbeda.

Screenshot:

Demo | Download | Mirror

Nama template ini adalah VB - (Vio b374k) b374k 2.1 style,
Sekian postingan dari saya, semoga templatenya bisa berguna ^_^

---

created by: diie Source: Outbreak

Cara Mengganti Older/Newer Post dan Home Blogger[teks] Menjadi gambar[icon]

Hai sobat blogger apakabar?moga aja baik ya... Ini adalah artikel pembuka saya yaitu: cara mengganti older/newer post blogger[texts] menjadi incon/gambar....

Jika kita melihat dan mengamati tulisan older post, newer post, dan home dalam tampilan template Blogger/Blogspot, tampak kurang menarik, terkesan jadul, dan tidak profesional, bukan? Sebagai alat navigasi, tentunya anda perlu memperhatikan tampilannya agar lebih menarik pengunjung untuk meng-klik-nya.

Anda dapat dengan mudah mengganti older/newer post menjadi icon dengan cara sebagai berikut:

1. Masuk ke dashboard > design/rancangan > edit HTML, klik "Expand Widget Templates".

2. Cari kode yang berwarna merah sebagai berikut:

Wujud barisnya biasanya seperti ini, kopi kode yang berwarna merah dan masukkan ke kotak pencarian browser (Ctrl+F).

expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>
expr:title=’data:olderPageTitle’> <data:olderPageTitle/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’> <data:homeMsg/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’> <data:homeMsg/></a>

(yang terakhir adalah Home/Beranda, biasanya ada dua, jadi cari satu lagi).

3. Perhatikan poin-poin berikut:

a. Jika ingin mengganti dengan tulisan lain:

<data:newerPageTitle/> adalah newer post, hapus dan ganti dengan "Previous" atau kata-kata sejenisnya yang diinginkan.

<data:olderPageTitle/> adalah older post, hapus dan ganti dengan "Next" atau kata-kata sejenisnya yang diinginkan.

<data:homeMsg/>adalah home/beranda (biasanya ada dua, jadi jika ingin mengganti, maka ganti keduanya), biarkan begitu saja atau ganti dengan "Home" atau kata-kata sejenisnya yang diinginkan.

Contoh:

expr:title=’data:newerPageTitle’>Next</a>
expr:title=’data:olderPageTitle’> Previous</a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’> Home</a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’> Home</a>

b. Jika ingin mengganti dengan gambar (icon):

Masukkan script image source sebagai pengganti dari tulisan: <img src="url gambar icon"/>

contoh:

expr:title=’data:newerPageTitle’><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRT0UlFlBrt6oreplG9zvvUoEX-4a1ZKjqaLYnbZ03vq5_JOsEENY_bz1jJ5oqEcGmKfFyj7I5aYYx1y4MwrioMuBgt40WLku2_Y0L3n4rn6Cg8LWVKlPhqakx3DQvSePvoEuZX4rbPjCd/s1600/next.png"/></a>
dan seterusnya......

Anda dapat menggunakan gambar berikut, seperti yang dipakai blog ini, namun upload dan host sendiri ya. Klik kanan di atas gambar dan klik "save image as", atau bisa cari di internet. Lalu upload gambar dan ambil direct link-nya, masukkan seperti contoh diatas.

4. Langkah terakhir, preview terlebih dahulu, atau langsung save. 

Enjoy..!!

---

created by: diie | source: Fullkadot

Cara Mendeface Situs Web

jaman kayak gini men-Deface suatu Web bukan hal yang sulit.. bahkan anak anak kecil aja udah pada bisa!!  karna sesungguhnya terdapat banyk cara untuk men-Deface Situs . Namun disini saya akanmembahas cara yang paling mudah terlebih dahulu,dan termasuk carayang paling banyak digunakan oleh Hacker Brazil, Arab, USA, dan UK serta negara lainnya.. dan INI BUKAN JOKE, TAPI INI BUKTI KONSEP !

Contoh Web :

• http://www.arabiandawn.com/
• http://patent-tour.com/
• http://hoeppner-schumann.de/catalog/images/waw.htm
• http://style.indoasia.us/images/waw.htm
• http://sdnbjs2bdg.sch.id/merdeka.html
• http://www.pusatk3hiperkes.com/indonesia.htm

Sudah cukup banyak situs yang Di-Hack karena BUG ini,termasuk situs NASA !!!


BUG.

Pertama kali berbicara mengenai bug. OK, Bugnya ada pada ekstensi Frontpage yang ditemukan pada tahun 2000 namun masih aktif hingga hari ini !!! Ekstensi Frontpage menjadi ‘enabled’ pada Webserver yang barlainan sehingga admin dapat mengupload file ke server tersebut dari komputer manapun pada intranet! Saat ini ekstensi Frontpage menjadi ‘enabled’ pada berbagai server yang selanjutnya didefinisikan menjadi 3 file pada server IIS:
www.site.com/_vti_bin/shtml.dll
www.site.com/_vti_bin/_vti_adm/admin.dll
www.site.com/_vti_bin/_vti_aut/author.dll
Dan jika server tersebut bukan merupakan IIS tapi server jenis lain, seperti Apache maka file tersebut mempunyai ekstensi file .exe misalnya author.exe Scanning Sekarang pertanyaannya adalah bagaimana menemukan situs yang vulnerable! Atau situs yang memiliki ekstensi Frontpage yang ‘enabled’! OK, sangat mudah membuad suatu program yang dapat mencari situs yang memiliki author.dll atau author.exe dan jika file tersebut ditemukan maka server tersebut dikategorikan ‘vulnerable’. Baiklah, sebelumnya saya sudah membuat program scanner untuk keperluan pribadi tapi saat ini dapat didownload untuk publik. Anda dapat mendownload tool ini yang saya beri nama “Universal Bug Scanner” dan anda memerlukan Visual Studio yang terinstall pada computer anda agar dapat menggunakan tool ini. OK?


Selanjutnya, kumpulkan daftar situs dengan menggunakan google/alltheweb/vivisimo/britanica (atau search engine lainnya, meski saya rekomendasikan agar menggunakan www.alltheweb.com, karena banyak sekali situs yang vulnerable disini J jika dibandingkan dengan google yang mengutamakan situs-situs yang tergolong secure seperti “asp” , “iis” atau sesuatu yang seperti itu! Kumpulkan daftar situs dan simpanlah dalam suatu file.


Sekarang bukalah Universal Bug Scanner, upload file tersebut dan mulailah proses scanning untuk mencari situs-situs yang vulnerable. Dan jika anda ingin menjadi seorang elite hacker, maka sebaiknya anda menggunakan program scanner buatan anda sendiri OK? Yeah, hal ini tidak hanya meningkatkan pengetahuan tentang pemrograman anda tapi mendorong anda untuk mengembangkan program scanner yang lebih powerful meliputi jenis web server, SMTP dan berbagai jenis bug !!!


Deface!!!

• Nah, sekarang bukalah window My Computer
• dan double click “Web Folders”!!!
• double click lagi “Add web folder” dan akan diminta nama situs.
• Ketiklah nama situs yang tergolong vulnerable
• click next
• Setelah request diterima, click Finished.

Tapi jika dikatakan bahwa Host not Found, silahkan sobat Cobalagi.tapi kalo tetap sama, waawww..haha, berarti ada yang salah dengan sistem windows anda. Install Ulang, Buddy J dan setelah suatu Web Folder dengan nama situs yang Vulnerabel dibuat

• Double click dan browse file-file target selayaknya anda menggunakan komputer sendiri!!! Rename index.html dalam server tersebut dengan nama lain, misalnya indexold.html
• Copylah index.html karya anda sendiri ke sistem korban. Hmm.. anda sebenarnya dapat mengcopy, menghapus atau menambahkan sesuatu ke server korban dengan menggunakan web folder sederhana yang anda buat saat ini dan memperlakukannya selayaknya komputer anda sendiri!!! Keren bukan?

Cracking Password.

eiiittthh..,, tunggu dulu!! tidak semua admin Bodoh dengan membiarkan situs mereka di Hack Begitu saja..!!! Kebanyakan Admin yang situsnya saya Hack Mereka Mem-Proteksi FrontPage nya dengan PassWord. Jadi Saat Anda Melakukan Double Click, WebFolderitu akan meminta UserName dan PassWord. baiklah, jika anda tidak ingin meng-CrackPassword maka cari saja situs Situs Lain. Tapi kalo kalianingin meneruskan Hacking ini, maka perlu perhatikan Langkah Berikut!!!

PassWord Ekstensi dalam FrontPage Ter-Simpan di File Services.pwd dengan format berikut:

Username:Password

Baiklah, password tersebut tersimpan dalam form yang terenkripsi menggunakan Algorithma DES

(jangan khawatir tutorial mengenai masalah enkripsi-dekripsi/kriptografi akan saya jelaskan nanti J. Ok, sekarang sama dengan algoritma yang digunakan untuk mengenkripsi password pada sistem operasi Linux.

Jadi kita dapat menggunakan linux passwd cracker untuk mengcrack file services.pwd. Arahkan browser anda ke situs www.openwall.com dan downloadlah John the Ripper cracker. Sekarang downloadlah file

services.pwd dari mesin korban dan ubahlah file services.pwd sebagaimana file passwd unix dengan tujuh field sebagai gantir dari dua yang memberikan data acak seperti:

username:password:123:123:something:/home/couldbe_myname:/bin/bash

Ok begitu kita telah memisahkan tujuh field yang terpisah dengan “:” sekarang gunakan JTR cracker untuk mengcrack password sebagaimana jika kita mengcrack file passwd linux. Dan setelah itu kita akan mendapatkan password yang sesungguhnya, masukkan dalam web folder dan lakukan proses deface !!

Hei, tunggu dulu ada hal yang berbeda dan harus diperhatikan dalam proses hacking ini!!

Menyembunyikan identitas anda saat hacking adalah seni tersendiri. Anda dapat menuliskan suatu script asp

yang akan menghapus log dan menguplad file asp tersebut ke sistem korban dan bukalah file yang sama dari

browser anda. File log untuk IIS (win2000 server) biasanya tersimpan dalam folder

C:\\\\\\\\WINNT\\\\\\\\SYSTEM32\\\\\\\\LOGFILES\\\\\\\\W3SVC32, dan jika anda tidak mengetahui format file log ini maka saya rekomendasikan untuk menghapus semua data dalam file ini. Dan jangan khawatir ada artikel yang membahas cara menghapus log, lengkap dengan source code akan segera kami rilis. Jadi saat ini saya menganggap anda melakukan deface web site melalui warung internet J keren khan!!! Ingat, sebaiknya jangan melakukan hal ini dari komputer teman anda yang akan menyeretnya dalam kesulitan yang anda timbulkan. Dan jika anda melakukannya dari komputer di rumah anda sebaiknya jangan menghapus segala

sesuatu dalam sistem tersebut, agar anda tidak dijerat oleh Undang-Undang Cyber yang berlaku.

Hmmm… deface pertama anda? Anda benar-benar beruntung. Tapi ingat hal ini tidak akan pernah menjadikan anda sebagai seorang elite hacker melainkan lamer (pengacau). Artikel ini hanya menjelaskan teknik populer yang digunakan untuk mendeface. Anda akan terkejut saat mengetahui ada banyak teknik deface yang ada di internet.

---

Created by: diie | Source: gold-xp

Cara membuat menu dropdown dengan efek Hover

Ada berbagai cara untuk membuat menu navigasi pada blog kita. Dari cara yang paling sederhana yaitu dengan dengan menggunakan fasilitas label, ataupun dengan tambahan script jsquery untuk lebih mempercantik tampilan menunya. Dilihat dari cara membuatnya bisa dengan cara instant dengan bantuan software tertentu semacam All-Web-Menus ataupun dengan langsung menggunakan Script JQuery yang dipadukan dengan CSS.







Menu Dropdown Hover ini bisa diartikan juga dengan sederetan menu yang apabila cursor mouse diarahkan dengan ke menu maka akan tampil sederet sub menu yang berada dibawah menu utama.

Berikut ini adalah cara yang digunakan oleh blog Iskaruji dot com untuk membuat menu:

• Cari kode ]]></b:skin> pada template kamu. Gunakan Ctrl+F untuk memudahkan pencarian. Setelah ketemu pastekan kode CSS berikut diatasnya.
  
  
  /*---MENU DROPDOWN HOVER---*/
  .sf-menu, .sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
  }
  .sf-menu {
  line-height: 1.0;
  }
  .sf-menu ul {
  position: absolute;
  top: -999em;
  width: 10em; /* left offset of submenus need to match (see below) */
  }
  .sf-menu ul li {
  width: 100%;
  }
  .sf-menu li:hover {
  visibility: inherit; /* fixes IE7 'sticky bug' */
  }
  .sf-menu li {
  float: left;
  position: relative;
  }
  .sf-menu a {
  display: block;
  position: relative;
  }
  .sf-menu li:hover ul,
  .sf-menu li.sfHover ul {
  left: 0;
  top: 2.3em; /* match top ul list item height */
  z-index: 99;
  }
  ul.sf-menu li:hover li ul,
  ul.sf-menu li.sfHover li ul {
  top: -999em;
  }
  ul.sf-menu li li:hover ul,
  ul.sf-menu li li.sfHover ul {
  left: 10em; /* match ul width */
  top: 0;
  }
  ul.sf-menu li li:hover li ul,
  ul.sf-menu li li.sfHover li ul {
  top: -999em;
  }
  ul.sf-menu li li li:hover ul,
  ul.sf-menu li li li.sfHover ul {
  left: 10em; /* match ul width */
  top: 0;
  }
  /*** DEMO SKIN ***/
  .sf-menu {
  float: left;
  margin-bottom: 1em;
  }
  .sf-menu a {
  border-left: 1px solid #2d99ae;
  border-top: 1px solid #1f2023;
  padding: .75em 1em;
  text-decoration:none;
  }
  .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
  color: #B3B3B3;
  font-weight: normal;
  font-size:12px;
  }
  .sf-menu li {
  background: #1f2023;
  }
  .sf-menu li li {
  background: #373B3E;
  }
  .sf-menu li li li {
  background: #43484C;
  }
  .sf-menu li:hover, .sf-menu li.sfHover,
  .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: #2d99ae;
  outline: 0;
  }
  /*** arrows **/
  .sf-menu a.sf-with-ul {
  padding-right: 2.25em;
  min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
  }
  .sf-sub-indicator {
  position: absolute;
  display: block;
  right: .75em;
  top: 1.05em; /* IE6 only */
  width: 10px;
  height: 10px;
  text-indent: -999em;
  overflow: hidden;
  background: url('http://users.tpg.com.au/j_birch/plugins/superfish/images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
  }
  a > .sf-sub-indicator { /* give all except IE6 the correct values */
  top: .8em;
  background-position: 0 -100px; /* use translucent arrow for modern browsers*/
  }
  /* apply hovers to modern browsers */
  a:focus > .sf-sub-indicator,
  a:hover > .sf-sub-indicator,
  a:active > .sf-sub-indicator,
  li:hover > a > .sf-sub-indicator,
  li.sfHover > a > .sf-sub-indicator {
  background-position: -10px -100px; /* arrow hovers for modern browsers*/
  }
  /* point right for anchors in subs */
  .sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
  .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
  /* apply hovers to modern browsers */
  .sf-menu ul a:focus > .sf-sub-indicator,
  .sf-menu ul a:hover > .sf-sub-indicator,
  .sf-menu ul a:active > .sf-sub-indicator,
  .sf-menu ul li:hover > a > .sf-sub-indicator,
  .sf-menu ul li.sfHover > a > .sf-sub-indicator {
  background-position: -10px 0; /* arrow hovers for modern browsers*/
  }
  /*** shadows for all but IE6 ***/
  .sf-shadow ul {
  background: url('../images/shadow.png') no-repeat bottom right;
  padding: 0 8px 9px 0;
  -moz-border-radius-bottomleft: 17px;
  -moz-border-radius-topright: 17px;
  -webkit-border-top-right-radius: 17px;
  -webkit-border-bottom-left-radius: 17px;
  }
  .sf-shadow ul.sf-shadow-off {
  background: transparent;
  }
  • Langkah kedua adalah letakkan kode berikut ini dibawah kode ]]></b:skin>

<script type='text/javascript' src='http://iskaruji.googlecode.com/files/iskaruji_hoverIntent.js'></script>
<script type='text/javascript' src='http://iskaruji.googlecode.com/files/iskaruji_superfish.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>

• Terakhir simpan hasil kerjaan kamu. Sampai langkah ini, kita sudah selesai meletakkan kode untuk menjalankan menu. Tahap selanjutnya adalah membuat menu itu sendiri.

Berikut ini adalah contoh tampilan menu seperti pada contoh diatas, yang bisa kamu pasang dimana saja kamu suka melalui Add Gadget.

<ul class='sf-menu'>
<li><a href='/'>Menu</a></li>
<li><a href='#'>Menu</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu </a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 1</a></li>
</ul>
</li>
<div class='clear'></div>
</ul>

Catatan: Untuk tampilan menu itu sendiri agar bisa sesuai dengan personalisasi kamu, silahkan bereksplorasi dengan kode CSS yang ada. Cobalah untuk mengganti warna latar maupun tulisannya agar lebih cocok dengan yang kamu inginkan. Selamat mencoba!