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.


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






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(http://1.bp.blogspot.com/-Oe4n4MD1lNE/Tqrx3qk6_JI/AAAAAAAAADI/NsIsAX7yrl4/s1600/home.png);
}
.sti-icon-album{
background-image:url(http://2.bp.blogspot.com/-JPWKs2i0umQ/Tqrx3_BSNKI/AAAAAAAAADo/aFEeJR9UTig/s1600/Photo.png);
}
.sti-icon-mail{
background-image:url(http://2.bp.blogspot.com/-bVtju4v5npQ/Tqrx36bmRlI/AAAAAAAAADY/5fxNvRFpdw8/s1600/MAIL.png);
}
.sti-icon-info{
background-image:url(http://3.bp.blogspot.com/-2Shix9TZxPs/Tqrx3yYf_cI/AAAAAAAAADQ/xcL6-AoQS4k/s1600/Contak.png);
}
.sti-icon-rss{
background-image:url(http://4.bp.blogspot.com/-JL_ijANmoY0/Tqrx4eYagCI/AAAAAAAAAD4/3Opy4G90N3g/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.

Posting Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top