Home » Blogger Widget » Cara Buat 3D Efek Hove "Follow Me" di Blogger

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

Kali ini Blog Gado Gado akan menampilkan artikel berjudul Cara Buat 3D Efek Hove "Follow Me" di Blogger. Dengan artikel Cara Buat 3D Efek Hove "Follow Me" di Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Cara Buat 3D Efek Hove "Follow Me" di Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Cara Buat 3D Efek Hove "Follow Me" di Blogger selengkapnya:

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.
Add A 3D “Follow Me” Button With Hover Effect

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. 

Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Cara Buat 3D Efek Hove "Follow Me" di Blogger dengan keword yang masuk Blogger Widget . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.

0 komentar:

Poskan Komentar