KAZUMA
 

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.

Cara membutanya:

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://lh5.googleusercontent.com/-3rjsGSoM964/TYsAw6fmgvI/AAAAAAAAAdw/uIr9pqqpzx8/s1600/home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(https://lh5.googleusercontent.com/-aaa9u4n8fYE/TYsAzCP9bbI/AAAAAAAAAd0/KHkbT86nmjM/s1600/mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(https://lh4.googleusercontent.com/-u1Pc8I7rC7w/TYsAu4gNsaI/AAAAAAAAAds/t9PNUir0hqM/s1600/help.png) no-repeat top left;
}
.icon_find{
background:transparent url(https://lh6.googleusercontent.com/-AUB8DVZ5Q_U/TYsAsOvSOPI/AAAAAAAAAdo/coDokuSbShg/s1600/find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(https://lh5.googleusercontent.com/-7x18QdcE7zs/TYsA1_ge63I/AAAAAAAAAd4/z30tslGH7-A/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 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" ></script>
<script src="http://amcied.googlecode.com/files/jquery-animate-css-rotate-scale.js" ></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 >
<a ></a>
<div >
<h2>Search</h2>
<p>
<input />
<a href="">Go</a>
</p>
</div>
</div>
<div >
<a ></a>
<div >
<h2>Contact us</h2>
<p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
</p>
</div>
</div>
<div >
<a ></a>
<div >
<h2>Help</h2>
<p>
<a href="#">FAQ</a>
<a href="#">Live Support</a>
<a href="#">About Us</a>
</p>
</div>
</div>
<div >
<a ></a>
<div >
<h2>Image Gallery</h2>
<p>
<a href="#">Photo Profil</a>
<a href="#">Images Archives</a>
</p>
</div></div>
<div >
<a ></a>
<div >
<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.