Cara Membuat Menu Icon Unik Dengan JQuery

Tips blog kali adalah cara membuat menu icon unik dengan Jquery. Menu unik ini saya dapat dari otowebsite.blogspot.com. Menu ini bisa di sebut salah satu menu keren. Dalam pembuatan atau pemasangan Menu Navigasi ini, kita menggunakan bantuan dari jQuery.

Mungkin sobat belum paham dengan Animation Icon & Text Menu With jQuery yang saya bahas kali ini dan mungkin gambar di atas juga tidak begitu sobat paham, untuk melihat seperti apa bentuk Menu kali ini, silahkan tekan tombol di bawah ini untuk melihat halaman demo yang telah telah saya buat tentang Animation Icon & Text Menu With jQuery.

DEMO

Cara Membuatnya :

1. Login ke akun blogger Anda.

2. Pada Dasbor klick ➨ Rancangan ➨ Edit HTML.

3. Centang Expand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template Anda cari kode ]]></b:skin> atau <style> Bila kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang Anda copy kode berikut dan paste atau letakkan di atas kode tadi.

/*Sliding Text and Icon Menu Style*/
.sti-menu{
width:950px;
position:relative;
margin:10px auto 0 auto;
}
.sti-menu li{
float:left;
width:120px;
height:170px;
margin:1px;
}
.sti-menu li a{
display:block;
overflow:hidden;
background:#fff;
text-align:center;
height:100%;
width:100%;
position:relative;
-moz-box-shadow:1px 1px 2px #ddd;
-webkit-box-shadow:1px 1px 2px #ddd;
box-shadow:1px 1px 2px #ddd;
}
.sti-menu li a h2{
color:#000;
font-family: 'Wire One', arial, serif;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
position:absolute;
padding:2px;
width:100px;
top:100px;
left:10px;
text-shadow: 0px 1px 1px black;
}
.sti-menu li a h3{
font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
font-size:12px;
font-style:italic;
color: #111;
position:absolute;
top:130px;
left:10px;
width:100px;
padding:2px;
}
.sti-icon{
width:100px;
height:100px;
position:absolute;
background-position:top left;
background-repeat:no-repeat;
background-color:transparent;
left:10px;
top:5px;
}
.sti-icon-home{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZJT4e3mqHGRu_30WLU9vVPpo14D4kmwMe07N2Lt3uaiunGrDSXQV7wa9oBehtk1iYVO5dOZAkzv5CP6I-QsLp7f7cqqqmAHqFY6jZYxqfWl9ftwSZmturu5PTubhjI3Lvpt76r7-oa-N/s1600/home.png);
}
.sti-icon-album{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeCIfFcvlqN1CFdlShG6YS7RQXFd-knJRIicU3WD96kmMwTk2U7I6a9tgmeghGyMOsJwGCQPLI41CIMoxdOJLEO7xDjTly6Pr7_t3BbB04ZmKW_iJVI7DqsYsQK5HlFDZ5vCgADwouywQk/s1600/Photo.png);
}
.sti-icon-mail{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG0azgGw3YFp94E_m_NtOhyT2MEsT62ZPITn5IXqPyAOdntrv_6jVRpIlw6d5d4Xk18rGiXrpub3ZzAPvfHS2C8Em9YKzUM9340mN1Js2ibd1qhuR0xebLisro9KZvQZLFkB0N9g8ISXXP/s1600/MAIL.png);
}
.sti-icon-info{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgryehpah_2TM3-sU6wTRH8DIXY5an3gKWtVoez9m_WQcMUyPwjdJYLFG_q5_rsHek2c1A3Zvo8IKj4wNMnquMTYlCqDTj8lk4eGlJlI2L2ixVT87Wta2PTMmaefa-RVLl3eLwtrly6Rwlr/s1600/Contak.png);
}
.sti-icon-rss{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCgHRt2lT-g4E6LTFN8fIqib5-rCcQ42PxWhhitSUVBpcOOpbq7yRcknusJYqkcHvSIjZ-yJiidxS45y6NB4zVEc5EJ-KEeVa86fLzuKKdxH6oniYt6HvJ0KbVSVFO83AyRtDzRmYTx82i/s1600/RSS.png);
}

6. Selanjutnya cari kode </head> dan letakkan kode berikut ini di atasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js' type='text/javascript'/>
<script src='http://filiex.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://otowebsite.googlecode.com/files/jquery.iconmenu.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('#sti-menu').iconmenu();});
</script>

7. Simpan Template.

8. Sekarang pergi ke Dasbor klick Rancangan ➨ Tambah gadget.

9. Pilih elemen HTML/Java Script.

10. Lalu copy kode berikut dan paste atau letakkan di dalam elemen HTML/Java Script tadi.

<ul id="sti-menu" class="sti-menu">
<li data-hovercolor="#37c5e9">
<a href="#">
<h2 data-type="mText" class="sti-item">My Home</h2>
<h3 data-type="sText" class="sti-item">Halaman Utama</h3>
<span data-type="icon" class="sti-icon sti-icon-home sti-item"></span></a>
</li>

<li data-hovercolor="#ff395e">
<a href="#">
<h2 data-type="mText" class="sti-item">My Album</h2>
<h3 data-type="sText" class="sti-item">Galery Photo</h3>
<span data-type="icon" class="sti-icon sti-icon-album sti-item"></span></a>
</li>

<li data-hovercolor="#57e676">
<a href="#">
<h2 data-type="mText" class="sti-item">Info Saya</h2>
<h3 data-type="sText" class="sti-item">My Prifille</h3>
<span data-type="icon" class="sti-icon sti-icon-info sti-item"></span></a>
</li>

<li data-hovercolor="#d869b2">
<a href="#">
<h2 data-type="mText" class="sti-item">My Email</h2>
<h3 data-type="sText" class="sti-item">Send Messenger</h3>
<span data-type="icon" class="sti-icon sti-icon-mail sti-item"></span></a>
</li>

<li data-hovercolor="#ffdd3f">
<a href="#">
<h2 data-type="mText" class="sti-item">Subcribe</h2>
<h3 data-type="sText" class="sti-item">Langgan RSS</h3>
<span data-type="icon" class="sti-icon sti-icon-rss sti-item"></span></a>
</li>
</ul>


11. Simpan.

Keterangan:

• Untuk Mengubah Icon Gambar silahkan Anda rubah url yang bewarna merah yang berada pada langkah 5.
• Untuk Langkah 10 Silahkan Anda rubah warna merah (tanda pagar) url/link tujuan menu Anda dan Ganti nama menu (warna orange) dengan menu yang Anda inginkan.

Sekian tips blog kali ini. Bagaimana apakah sobat berhasil menerapkannya pada blog sobat ?

Semoga berhasil..happy blogging


Source : otowebsite.blogspot.com

Share this post