Dalam perjumpaan kita kali ini saya akan berbagi tentang Menu dan kali ini kita akan membahas Menu Rocking & Rolling.
Menu Navigasi ala Rokstar ini cocok untuk sobat yang suka dengan yang berjiwa Rock atau yang suka dengan Menu Navigasi keren.
Untuk demo Sobat bisa lihat dengan menekan tombol di bawah ini :


Sekarang mari kita bahas Cara memasang Menu Rocking & Rolling di blog sobat :

1. Masuk ke akun blogger sobat.

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 sobat cari kode ]]></b:skin> atau <style> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang sobat copy kode CSS di bawah ini dan paste atau letakkan di atas kode tadi.

/* Sliding Ang Rolling */


.menu{
width:800px;
height:52px;
position:relative;
top:200px;
left:100px;
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
.item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
.link{
left:2px;
top:2px;
position:absolute;
width:48px;
height:48px;
}
.icon_home{
background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_help.png) no-repeat top left;
}
.icon_find{
background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_photos.png) no-repeat top left;
}
.item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px;
background:transparent;
display:none;
}
.item_content h2{
color:#aaa;
text-shadow: 1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}
.item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow: 1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}
.item_content a:hover{
color:#0b965b;
}
.item_content p {
background-color:transparent;
display:none;
}
.item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px;
float:left;
margin-right:5px;
}

6. Masih dalam Edit Template, sekarang sobat cari kode </body> lalu letakkan kode berikut ini di atas kode tersebut.

<!-- Sliding And Rolling -->


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://otowebsite.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>
<script src='http://otowebsite.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>
<script>
$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'268px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content').stop(true,true).fadeOut()
.find('p').stop(true,true).fadeOut();
}


</script>

7. Simpan template.

8. Sekarang adalah langkah untuk meletakkan Menu Rocking & Rolling ini, sobat bisa meletakkan Menu Rocking & Rolling ini di elemen HTML/Java Script.

9. Pada Dasbor klick Rancangan ➨ Tambah Gadget ➨ Pilih elemen HTML/Java Script.

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

<div class="menu">
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Contact us</h2>
<p>
<a href="#">eMail</a>
<a href="#">Twitter</a>
<a href="#">Facebook</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Help</h2>
<p>
<a href="#">FAQ</a>
<a href="#">Live Support</a>
<a href="#">Tickets</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Search</h2>
<p>
<input type="text"></input>
<a href="">Go</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Image Gallery</h2>
<p>
<a href="#">Categories</a>
<a href="#">Archives</a>
<a href="#">Featured</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Start from here</h2>
<p>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Pricing</a>
</p>
</div>
</div>
</div>

11. Simpan.

NB : Ganti tanda pagar (#) dengan url tujuan.

Nah saya rasa cukup untuk kali ini, silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas.

Poskan Komentar Blogger Disqus

  1. terimakasih, setelah saya baca dan saya coba diblog saya ternyata tidak berhasil.....

    BalasHapus
  2. @Rizal Yuliandi Hahaha . . . kok aneh.
    semua di post ini udh d cba smua gan.
    demonya jga ada.

    BalasHapus
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