Dhafiq Sagara

Membuat drop down menu memanglah suatu hal yang penting untuk mendeklarasikan kategori suatu website atau blog. Karena dengan adanya drop down menu, pengunjung bisa mengetahu subkategori/submenu dari menu utama.
Kali ini saya akan membahas mengenai bagaimana membuat drop down menu dengan menggunakan JQuery MenuMatic.

Pada tahap pertama, buatlah CSS untuk menu. Pada blogspot, anda letakkan code berikut setelah tag <b:skin><![CDATA[ atau letakkan setelah tag </title>

/*menu tengah*/
#navcontainer{
width:857px;
height:38px;
display:block;
overflow:hidden;
padding-left:15px;
background:#E0E0E0 left top repeat-x;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;
border-radius:5px;
margin-left:54px
}

#navcontainer .current-cat a{
background:#1A76B5 left top repeat-x;
color:#FFF
}

#nav a,#subMenusContainer a{
text-decoration:none;
display:block
}

#nav a{
margin:0;
float:left;
background:none;
padding:13px 14px;
color:#1E1E1E;
text-transform:uppercase;
font-weight:bold;
font-size:12px
}

#nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{
background:#1A76B5 left top repeat-x;
color:#fff
}

#subMenusContainer a,#nav li li a{
color:#fff;
font-size:12px;
text-align:left;
background-color:#0F6FB1;
padding:6px 24px;
text-shadow:none
}

#subMenusContainer a:hover,#subMenusContainer a:focus,#subMenusContainer a.subMenuParentBtnFocused{
background:#2092E1;
color:#fff;
text-shadow:none
}

.subMenuParentBtn{
background:url(../img/arrow_right.gif) right center no-repeat
}

.subMenuParentBtnFocused{
background:url(../img/arrow_right_over.gif) right center no-repeat
}

.mainMenuParentBtn{}

.mainMenuParentBtnFocused{}

.smOW{
display:none;
position:absolute;
overflow:hidden;
padding:0 2px;
margin:0 0 0 -2px
}

#nav,#nav ul,#nav ol,#subMenusContainer ul,#subMenusContainer ol{
padding:0;
margin:0;
list-style:none;
line-height:1em
}

#nav ol,#nav ul,#subMenusContainer ul,#subMenusContainer ol{
background:none;left:0
}

#nav li{
background-image:url(../img/mainnav-sep.gif);
background-repeat:no-repeat;
background-position:100% 5px;
cursor:pointer;
float:left;
margin:0 2px 0 0;
padding:0 2px 0 0;
height:38px;
display:inline
}

#subMenusContainer li{
list-style:none
}

#nav{
width:950px;
margin:0 auto;
clear:both;
overflow:hidden;
font-size:12px;
display:block
}

#nav .children{
display:none
}

#subMenusContainer{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:0;
overflow:visible;
z-index:1000000000
}
/*end of menu tengah*/

Pada #navcontainer ada yang perlu disesuaikan aturan:

width untuk panjang menu.
height untuk lebar menu.
padding-left untuk pengaturan posisi tulisan menu yang pertama terhadap posisi paling kiri.
margin-left pengaturan untuk posisi menu dilihat dari sisi kiri.

Pasangkan plugin jQuery MenuMatic pada blog atau website anda. Letakkan code berikut sebelum tag <body> atau setelah tag </head>

<script src='http://www.google.com/jsapi'/><script>google.load('mootools', '1.2.1');</script>


<script src='http://sagaraproject.googlecode.com/files/MenuMatic_0.68.3.js' type='text/javascript'/>


<script type='text/javascript'>
    window.addEvent('domready', function() {
        var myMenu = new MenuMatic();
    });
</script>

Kemudian isikan menu beserta submenunya pada posisi/letak yang anda inginkan (akan tetapi wajib diletakkan di antara tag <body> </body>). Berikut contoh isi menunya:

<div id='navcontainer'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='/search/label/News'>NEWS</a></li>

<li><a href='#'>TUTORIAL</a>
<ul class='children'>
<li><a href='/search/label/Programming'>PROGRAMMING</a>
<ul class='children'>
<li><a href='/search/label/Java'>Java</a></li>
<li><a href='/search/label/PHP'>PHP</a></li>
<li><a href='/search/label/HTML'>HTML</a></li>
<li><a href='/search/label/C/C++'>C/C++</a></li>
<li><a href='/search/label/JavaScript'>JavaScript</a></li>
<li><a href='/search/label/JQuery'>JQuery</a></li>
<li><a href='/search/label/Google API'>Google API</a></li>
<li><a href='/search/label/WAP'>WAP</a></li>
</ul>
</li>
<li><a href='/search/label/Programming'>DATABASE</a>
<ul class='children'>
<li><a href='/search/label/MySQL'>MySQL</a></li>
<li><a href='/search/label/Oracle'>Oracle</a></li>
<li><a href='/search/label/PostgreSQL'>PostgreSQL</a></li>
</ul>
</li>
<li><a href='/search/label/Programming'>SISTEM OPERASI</a>
<ul class='children'>
<li><a href='/search/label/Ubuntu'>Ubuntu</a></li>
<li><a href='/search/label/Tips Trik Windows'>Windows</a></li>
<li><a href='/search/label/Linux Mint'>Linux Mint</a></li>
<li><a href='/search/label/OpenSolaris'>OpenSolaris</a></li>
</ul>
</li>
<li><a href='/search/label/CMS'>CMS</a>
<ul class='children'>
<li><a href='/search/label/Joomla'>Joomla</a></li>
<li><a href='/search/label/Prestashop'>Prestashop</a></li>
<li><a href='/search/label/Mahara'>Mahara</a></li>
</ul>
</li>
</ul>
</li>

<li><a href='/search/label/Download'>DOWNLOAD</a>
<ul class='children'>
<li><a href='/search/label/Software'>Software</a></li>
<li><a href='/search/label/Antivirus'>Antivirus</a></li>
<li><a href='/search/label/Musik'>Musik</a>
<ul class='children'>
<li><a href='/search/label/Kartun'>Kartun</a></li>
<li><a href='/search/label/Jazz'>Jazz</a></li>
<li><a href='/search/label/Video Klip'>Video Klip</a></li>
</ul>
</li>
<li><a href='/search/label/E-Book'>E-Book</a>
<ul class='children'>
<li><a href='/search/label/Android'>Android</a></li>
</ul>
</li>
<li><a href='/search/label/Jurnal'>Jurnal</a></li>
</ul>
</li>

<li><a href='/search/label/Desain'>DESAIN</a>
<ul class='children'>
<li><a href='/search/label/Brosur'>Brosur</a></li>
<li><a href='/search/label/Piagam dan Sertifikat'>Piagam dan Sertifikat</a></li>
<li><a href='/search/label/Poster'>Poster</a></li>
<li><a href='#'>Spanduk</a></li>
</ul>
</li>

</ul>
</div>

SELAMAT MENCOBA. SEMOGA BERMANFAAT.

Trik ini digunakan untuk memproteksi gambar-gambar yang kita buat dan kita publikasikan diinternet agar tidak sembarangan diambil oleh orang lain. Agar hak cipta kita tidak sembarangan dipakai oleh orang lain. Bayangkan saja jika kita susah-susah membuat desain gambar kemudian orang lain tinggal download dan memakain gambar yang kita buat itu.

Lebih baik kita proteksi agar tidak sembarangan orang copy-paste gambar-gambar kita yang kita pasang di blog kita yang menggunakan blogger.

Langkah-langkahnya:

Masuk pada Edit HTML di blogger anda.
Cari tag berikut:
```
</head>
```

Kemudian tambahkan syntax berikut dan letakkan di atas tag </head>

Kemudian simpan template/save template.
Setelah setting di Edit HTML selesai, sekarang mengatur cara postingan gambar yang akan kita unggah di blog.
Tambahkan code berikut pada syntax gambar yang akan kita publis di blog:
```
class="protect"
```

Misal pada syntax gambar yang akan kita unggah adalah seperti berikut:

<a href="http://img39.imageshack.us/img39/8184/dhafiqsagara.png"><img src="http://img39.imageshack.us/img39/8184/dhafiqsagara.png"/></a>

Maka ubah syntax tersebut dengan menambahakan code dilangkah 6 sehingga menjadi seperti berikut:

<a href="http://img39.imageshack.us/img39/8184/dhafiqsagara.png"><img class="protect" src="http://img39.imageshack.us/img39/8184/dhafiqsagara.png"/></a>

Perhatikan pada syntax di atas, telah ditambahkan code class="protect" didalam tag <img ....>

Kemudian silahkan lakukan test untuk melihat gambar yang udah kita proteksi dengan cara:

Drag and drop gambar tersebut pada tab lain. Apa hasilnya? tidak akan menampilkan gambar aslinya, yang ditampilkan adalah gambar redirect yaitu blank.gif.
Lakukan Save Image As, maka yang tersimpan adalah gambar blank.gif (bukan gambar asli).

Silahkan download Contoh_jQuery_Image_Protector

(Resource: http://modification-blog.blogspot.com/)

Dhafiq Sagara

22 Mei 2011

Membuat Drop Down Menu Menggunakan Menu Matic

23 Jan 2011

Memproteksi Gambar Pada Blog Di Blogspot Menggunakan JQuery

7 Des 2010

Membuat Update Status Twitter Menggunakan JQuery

Jumlah Pengunjung

Contact Support

Email:

Subscribe via email

Random Post

Recent Post

Recent Comment

Link Ilmu Komputer

Link Sahabat