Pada Postingan Kali ini Saya Kembali Ke Tutorial Blogger Yakni Cara Membuat Animation Icon & Text Menu With JQuery Untuk Blog. Munkin Sobat Belum Paham Dengan Tutorial Kali ini Hanya Dengan Melihat Judul Dan Gambar Diatas Tapi Sobat Jangan Khawatir Karena Saya Sudah Sediakan Demonya yang Bisa Sobat lihat Dengan Klick Gambar dibawah.
Nah Bila Sobat Blogger Sudah Memantau Demonya Mungkin Diantara Sobat Semua Ada Yang Tertarik Untuk memasangnya Bisa Menyimak Tutorial Dibawah ini.
Nah Bila Sobat Blogger Sudah Memantau Demonya Mungkin Diantara Sobat Semua Ada Yang Tertarik Untuk memasangnya Bisa Menyimak Tutorial Dibawah ini.
- Pertama Login Dulu Ke Akun Blogger Sobat.
- Silahkan Masuk Rancangan Lalu Pilih Edit HTML Dan Centang Expand Template Widget
- Selanjutnya Carilah Kode ]]></b:skin> Dan Taruhlah Kode Dibawah ini Tepat Diatasnya.
/*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/AVvXsEhPZSpJ6lbmywb2YmNYqkuP-KLzm485bTxps32pwNbkcGSKOdK-Y97ZsS3k3Sj7VSpfUQXN78T8bD0JoHuj8rFzDhyrQVgpVOwWtuRlbdf4clmi-odjR_NUTJHSsmY2zHD0cV0zE4LR1HSB/s1600/home.png);
}
.sti-icon-album{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkYYuCx6UVam8I0tfmJk_eH_J_KZgcUwTrvxvVf5Zl3fyfVImAk3vSN52aZSs8kl-o6Pz1bPopFHABFxXBbZsaGlD9x8scXncNx9wc7MFbtup9fFTgK71rtd_4Ka5U7ziY4oJNYpRI5nTZ/s1600/Photo.png);
}
.sti-icon-mail{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_yVaIquTnOEjOS2RRw6pwI-N7Nji2biwt_zE66IBbDFBYy8ckiNOh2IyUg0IKvNsOHHtA4azi6g8thZ3K1_i02s26H2JTYSd7gOeoJbf58I1O97uFyz-oG8QWqJ109lDxM3tmAzynL36d/s1600/MAIL.png);
}
.sti-icon-info{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEham-XN085rf4vLiZ1NXRrTeVd4u-59XO5lAlBOYYmeg7nU-lAyi6fUkUTMGjsnxy2hihomvfvDZqb07oDduf97giWzLfXTsx6lb31L0OwZQa0h7yaFQ7LdxE3jMCCFUSZxTtN5h9Ep5eYU/s1600/Contak.png);
}
.sti-icon-rss{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTW8C8-PzktdZuKdcQnjK1ziMQZ8-x_kxNYPNxUr-auUL0seHfhzCiImohsA8MQkp6jQvtiwTr7yZ5K1CS2O9vE14vZ7JZhD40_tTioNTcYTlNOsvyIxbzD7EuacJj5sIMEgq4RvWLKoRF/s1600/RSS.png);
}
- Bila Langkah Diatas Sudah Selesai Selanjutnya Silahkan Cari Kode </head> Dan Taruh Kode Dibawah ini Tepat Diatasnya.
<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://filiex.googlecode.com/files/jquery.iconmenu.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('#sti-menu').iconmenu();});
</script>
- Kemudian Simpan Template.
- Untuk Tahap Akhir Silahkan Sobat Masuk Ke Elemen Laman Kemudian Click Tambah Gedget Lalu Pilih HTML/JavaScript.
- Silahkan Sobat Copy Kode Dibawah ini Dan Masukkan Pada Kolom Kosong HTML/JavaScript Yang Tadi Sobat Buka Dan Simpan.
<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>
- Selesai Lihat Hasilnya.
- Untuk Mengubah Icon Gambar Sobat Bisa Lihat Pada Langkah 3 Dan Silahkan Ubah Kode Yang Berwarna Merah Dengan URL Gambar Sobat.
- Untuk Langkah 7 Silahkan Sobat Ubah Kode Pagar Yang Berwarna Biru Dengan Link URL yang Sobat Inginkan.
Cukup Sekian Dan Terima Kasih
om, hasilnya kok beda ya antara hasilnya sma yang ada di demo??
ReplyDelete