Andhy Go Provide: Button Social Bookmark Efek 3D

Senin, 19 November 2012

Button Social Bookmark Efek 3D

Button Social Bookmark 3D Rohis Facebook

Bismillah...

Dua bulan lebih Blog Rohis Facebook tidak memposting tentang Tutorial Blogger, sekarang tiba saatnya untuk 'Balas Dendam', sekali memposting langsung 4 (empat) artikel hehehe....

Tidak perlu berbasa-basi lagi tentang apa itu Button Social Bookmark dan kegunaannya pada blog karena semua sudah pada tahu. Button Social Bookmark yang saya share kali ini adalah Button Social Bookmark yang berbentuk tiga dimensi (3D) bentuknya seperti kubus dan kubusnya akan terangkat saat disorot oleh mouse, pokoknya keren deh...!

Cara membuatnya.

1. Login ke Akun blogger

2. Klik Template
3. Klik Layout
4. Tambahkan gadget HTML/JavaScript Add
5. Masukkan kode dibawah ini

<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 class="blogtoolz-flt-wdt">
<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 class="BlogToolz1" href="Your Facebook Link Here"></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 class="BlogToolz2" href="Your Twitter Link Here"></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 class="BlogToolz3" href="Your Rss Feed Link Here"></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 class="BlogToolz4" href="Your Google Plus Link Here"></a>
</div>

6. Save dan lihat hasilnya.

Lihat Demonya (yang berada pada sebelah kanan) arahkan mouse pada Button Social Bookmark Efek 3D tersebut.

Sumber :
http://www.blog-toolz.blogspot.com/2012/07/3d-follow-me-buttons-with-hover-effect.html

By http://rohis-facebook.blogspot.com

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)