Demonya bisa dilihat disini
selanjutnya simpan script berikut tepat diatas kode </body> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://kangdadang.googlecode.com/files/jquery-css-transform.js" type="text/javascript"></script>
<script src="http://kangdadang.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>
- Cara membuatnya :
- Login blogger
- Rancangan (desain), Template, Edit Html, Cari kode ]]></b:skin> (catatan : agar lebih cepat dalam pencarian kode, gunakan Ctrl+F)
- Dan Simpan kode berikut diatasnya :
/* -------------------------
Rocking Rolling Rounded Menu with jQuery and CSS3
----------------------------------------------- */
.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/AVvXsEgebkDxCRrZs-ekfVEEfP2MgkQ4bC3pGNfc3RIjHhgc_uPGzfbpux15PRx5JD5eqjzck8QXgvV-zZPXKxKdrW_8pYTEBT0oXQeRi9yuH-ekU66xIfqGqdOrNF2sa0ujU-VI0sbN3Jrjeck/s1600/home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTJBUuE4NTEyrLeQ0U7YcYARCJUG8aBFWgJe-B5YZ2ScDqt3EZ42r-VNthfdpHbovvqZqc19V5KsfvZboVz-b_AisrzSDZggEIyd1_Z_v5xI9V5geTf_eGDFPMK1dZG1Ed1BnJjdj8rg/s1600/mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2pblvigL54xipftgU9RiivDgfaNK0Fdi1dAgn1Iuwd3eUvxYP-2vzbbBqEKWpg9WUmfFZmeiLdojmBuCVvKFCqL2N_CR0S4R1EWt7K8_TpX3Z7l3OEPDrQac8DvzNVs5nqMmaBob_cA/s1600/help.png) no-repeat top left;
}
.icon_find{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo-KBXg3DPCGyRdTTEEUCbRhzP0_dzMxG70s8a20ZXZUmab6V89-WqnGQQc2HLKxu1b9PA_1_oJscgMYQCXrII-ggaE9KKQ-M-na56Tq3iKNQvp4tuguxzbCzHHSQ6qzYqd7t5DPjMTxo/s1600/find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWnFAo67z-FVA_B35eBVxuynbED7QpdO-MM5WwSAjhURBhdAt2WtwatWlfSgV5MeoVcKdnjxNnIIE_mlOsgABCpqmwyZA9kFCrRnopEmtxa-eoCJLy2ddVXv-6p6aVwvLJ_Qf2utkS2eE/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;
}
Rocking Rolling Rounded Menu with jQuery and CSS3
----------------------------------------------- */
.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/AVvXsEgebkDxCRrZs-ekfVEEfP2MgkQ4bC3pGNfc3RIjHhgc_uPGzfbpux15PRx5JD5eqjzck8QXgvV-zZPXKxKdrW_8pYTEBT0oXQeRi9yuH-ekU66xIfqGqdOrNF2sa0ujU-VI0sbN3Jrjeck/s1600/home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTJBUuE4NTEyrLeQ0U7YcYARCJUG8aBFWgJe-B5YZ2ScDqt3EZ42r-VNthfdpHbovvqZqc19V5KsfvZboVz-b_AisrzSDZggEIyd1_Z_v5xI9V5geTf_eGDFPMK1dZG1Ed1BnJjdj8rg/s1600/mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2pblvigL54xipftgU9RiivDgfaNK0Fdi1dAgn1Iuwd3eUvxYP-2vzbbBqEKWpg9WUmfFZmeiLdojmBuCVvKFCqL2N_CR0S4R1EWt7K8_TpX3Z7l3OEPDrQac8DvzNVs5nqMmaBob_cA/s1600/help.png) no-repeat top left;
}
.icon_find{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo-KBXg3DPCGyRdTTEEUCbRhzP0_dzMxG70s8a20ZXZUmab6V89-WqnGQQc2HLKxu1b9PA_1_oJscgMYQCXrII-ggaE9KKQ-M-na56Tq3iKNQvp4tuguxzbCzHHSQ6qzYqd7t5DPjMTxo/s1600/find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWnFAo67z-FVA_B35eBVxuynbED7QpdO-MM5WwSAjhURBhdAt2WtwatWlfSgV5MeoVcKdnjxNnIIE_mlOsgABCpqmwyZA9kFCrRnopEmtxa-eoCJLy2ddVXv-6p6aVwvLJ_Qf2utkS2eE/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;
}
selanjutnya simpan script berikut tepat diatas kode </body> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://kangdadang.googlecode.com/files/jquery-css-transform.js" type="text/javascript"></script>
<script src="http://kangdadang.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>
terakhir cara pemanggilannya pada HTML, klik Tata Letak cari Tambah Gadget, lalu copy kan kode nya (catatan : tata letaknya sesuaikan dengan template dan keinginan) :
<
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
>
catatan : untuk langkah ke-3, huruf yg berwarna MERAH di isi dengan link yg kita mau. dan huruf yg berwarna ORANGE bisa di ganti dengan nama link yg kita mau.
Tidak ada komentar:
Posting Komentar