Cara Buat 3D Efek Hove "Follow Me" di Blogger

Tweet

D-Copy Blog's | Berikut ini dirancang dengan setting indah yaitu tombol "Follow Me" di blogger. Desain adalah suatu animasitiga dimensi persegi yang naik atau memanjang ke atas dan perubahan dari abu-abu menjadi berwarna setelah Anda arahkan kursor mouse Anda di atasnya.

Cukup ikuti set instruksi di bawah ini :

1. Buka akun blogger Anda
2. Masuk ke menu Layout > Add gadget > edit HTML/Javascript
3. Patekan script dibawah ini dan save Template Anda :

<style>
.blogtoolz-flt-wdt
{
position:fixed;
right:10px;
top:36% ;
}
.blogtoolz-flt-wdt img
{
float:right; clear:right; margin:1px;
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.blogtoolz-flt-wdt img:hover
{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
 -o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
 }
</style>
<div>
<style>
.BlogToolz1 {
 display: block;
 width: 64px;
 height: 64px;
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_rollout_64x64.png') bottom;
 text-indent: -99999px;
}
.BlogToolz1:hover {
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_color_64x64.png') bottom;
height: 64px;
}
</style>
<a href="URL Facebook Anda disini"></a>
<style>
.BlogToolz2 {
 display: block;
 width: 64px;
 height: 64px;
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitterl_rollout_64x64.png') bottom;
 text-indent: -99999px;
}
.BlogToolz2:hover {
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitter_color_64x64.png') bottom;
height: 64px;
}
</style>
<a href="URL Twiteer Anda disini"></a>
<style>
.BlogToolz3 {
 display: block;
 width: 64px;
 height: 64px;
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_rollout_64x64.png') bottom;
 text-indent: -99999px;
}
.BlogToolz3:hover {
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_color_64x64.png') bottom;
height: 64px;
}
</style>
<a href="URL Rss Feed Anda disini"></a>
<style>
.BlogToolz4 {
 display: block;
 width: 64px;
 height: 64px;
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_rollout_64x64.png') bottom;
 text-indent: -99999px;
}
.BlogToolz4:hover {
 background: url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_color_64x64.png') bottom;
height: 64px;
}
</style>
<a href="URL Google+ Anda disini"></a>
</div>
<!-- End -->

Keterangan :

• Ganti URL ID Anda pada HTML yang diwarnai.