Membuat Rocking And Rolling Menu Di Blog

Membuat Rocking And Rolling Menu Di Blog , Menu Navigasi Horizontal Dengan Rocking and Rolling,Merupakan salah satu alternatif bagi para blogger untuk mempercantik blog anda. Dengan Menu Navigasi Horizontal Rocking and Rolling dapat menambah kecantikan dan keindahan blog anda. sebelum anda Tau Cara Membuat Rocking And Rolling Menu Di Blog mari kita lihat demonya terlebih dahulu :

Demo Rocking And Rolling Menu

Ingat : menunya yang berwarna hijau paling atas.
Setelah melihat Demo Rocking And Rolling Menu mari kita membuatnya :

Login Blogger
Klik Rancangan + Edit Html + expand widget template
Jangan lupa back up template anda.
Kemudian taruh kode berikut diatas kode ]]></b:skin>

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm1_CQJune-Bd4y2Qpp9vriohcLitlgyW95yZjgoKNcnmJ2yw-ll3Ruk7G5bi-2dcMDmufgxEEog3MMayZv1rcKIe8aevm7QikCbo5RVPv73zK37RsVR066mxJI0fLvgs8tleFgrsAZS8/s1600/home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUynCiRQAW_uSO4FJZt-THqQydP8fjL3Yn5JHTtn5MJu0ixxL0y10ODf8zGTDvaSFW7HO8PjmvDL_1xKbKiP38NJOehOT41oYmDDEhT1ev4LEnUM8qTDh9GgFyuWCWvtsYoWgFPyUJoJY/s1600/mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg65t8AQ6ceo783yrYWmkoNodokA430xKJUgN1XgfnjlMGzWPDyO-oVVrLo8PptYsXnHFpzSy8CMjtBtQ48P14vDxwZKK-lGHOQVHxjM03FQTfMORbx2g_Gm3PBQnfy3_ADOHZGN0yp56E/s1600/help.png) no-repeat top left;
}
.icon_find{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1mwQ96cFGh2pYwaMaqt2ZPomfIxFO71ApKF7Kt1QJEIAoVjSG9LCspsagKgJiHphu4eo5r2pB_MPI1rJWOE3GYGelopP_CuaPHj2_toMdV53uGRoeefYQVsRQJsregO8l5CvgYu-fR0M/s1600/find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhupq98_eJ5XMFDmPSBsSaUKppAGfCOo-Xc9RW8oiPALiNVbTZuUbphT2IN5oXtfM-i6V52fUe2_vu-L0YUsVEUsGNM58cvrHvuL53n55J86zCBqY1M7Fpkg02rxFu5wmgYMm17KgCqE/s1600/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;
}

• Kemudian Cari kode </body> dan letakkan kode berikut diatasnya :

<script type="text/javascript" src="http://cayun-code.googlecode.com/files/jquery-css-transform.js"></script>
<script src="http://cayun-code.googlecode.com/files/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script src="http://amcied.googlecode.com/files/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<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>

Kemudian Save Template.
Langkah selanjutnya meletakkan Script pada Widget anda.
Masuk ke Tata Letak -- Add Widget -- Html/Javascript -- pastekan kode berikut :

<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Search</h2>
<p>
<input type="text" />
<a href="">Go</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Contact us</h2>
<p>
<a href="#">Facebook</a>
<a href="#">Twitter</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="#">About Us</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Image Gallery</h2>
<p>
<a href="#">Photo Profil</a>
<a href="#">Images Archives</a>
</p>
</div></div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Home</h2>
<p>
<a href="#">Kategori</a>
</p>
</div></div>

Nb :
[+]Ganti tanda # dengan link tujuan anda.

Kemudian Save Widget.
Dan Lihatlah hasilnya, Cara Membuat Rocking And Rolling Menu Di Blog semoga bermanfaat.

Posted in: Tutorial Blog