Animation Icon & Text Menu With jQuery

Mencoba Untuk Membahas Sesuatu Yang Berbeda.
Untuk kali ini saya akan share kembali di blog Oto Website dan kali ini saya ingin membahas sebuah Menu Navigasi dan kali ini lagi temanya adalah Animation Icon & Text Menu With jQuery. Menu ini bisa di sebut salah satu menu keren. Dalam pembuatan atau pemasangan Menu Navigasi ini kita menggunakan bantuan dari jQuery.
Mungkin Anda belum paham dengan Animation Icon & Text Menu With jQuery yang saya bahas kali ini dan mungkin gambar di atas juga tidak begitu Anda paham, untuk melihat seperti apa bentuk Menu kali ini, silahkan anda tekan tombol di bawah ini untuk melihat halaman demo yang telah telah saya buat tentang Animation Icon & Text Menu With jQuery.

Lihat Demo

Bila sudah jelas dan tertarik memasangnya pada blog Anda, Silahkan Anda ikuti langkah-langkah berikut.

---

Cara memasang Animation Icon & Text Menu With jQuery

---

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/AVvXsEiuOnozh0-bGrzV1_FeRk3SQmNPgjDgeDTDQFqFmliKPztprzQ5LRYOHEcHf1hhZaAry50TBaA8RqLPCBQJ9bB_bS1ycTr2TLjMTxKWzjhvdp7EUJ6vgdpeGNNfZx8wCKt4KXG8e5I-7BUz/s1600/home.png);
}
.sti-icon-album{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwHxU0n6V_N73v3VQLTa80-14obvSI6DQxDDsQiiSVe9vbd7uBIjWJ_DsLLNmirZd8usfMWO34PZmuL0KMjjv6pKduFxVEp8LKNM3YsTiC-gJiHp_VfJg678uwC3CVWvnruUUo3oS3EvwE/s1600/Photo.png);
}
.sti-icon-mail{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2YjnamiSReTAkm42UxBiBsn-LhyphenhyphenxjjvXSBTK0P1xt2yjl6leySBZdJVNZv-y503Vb70EYv4miOxDmbmGBKGmlTtaCJhY2vm-GeTU2omvl_O8SLmRsE2o7AQ2XE-GIdwWogsOyFeW95O_G/s1600/MAIL.png);
}
.sti-icon-info{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp8EwzAzSqr1du57opzoXJ8zv4ZRtyDKUkpCk2xZXFYM75Orx2QcXmlALx2OG9KaweX9sQknSzYQdfGudJwwTqMpaqXayzSZjCQXofH5IewGITBe7qRiQ56tqlc-GpEnr2fXDemtWccNC_/s1600/Contak.png);
}
.sti-icon-rss{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFqfK-EnPrCA4kpk1EWSLLnXh00THSpbpHjzTVcrMMHqog2eu-8p-QDbQ75Ns0LqsUQjNqHk52nCJTSxBll9hcYnkKJAnBuul_kgMjqVeKLj3HDzrf28-L0Ci8pKoqXCb3APDK60IVx6N4/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 hijau 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 untuk kali ini.

Bagaimana apakah Anda berhasil menerapkannya pada blog Anda? Silahkan tinggalkan tanggapan atau komentar Anda tentang postingan/article kali ini.