MENGAMBANG SOSIAL DENGAN EFEK HOVER

MENGAMBANG SOSIAL DENGAN EFEK HOVER.
Membuat efek sosial share dengan " HOVER " yang sangat lucu dan tidak berat untuk di pasang di blog kalian. letaknya di atas sebelah kiri blog..

lihat gambar screenshoot di bawah ini.

Tahap-tahap pemasangan widget ini :

1. Login / masuk blog kalian
2. Pilih Rancangan masuk Edit HTML
3. Kasih centang ( Expand Template Widget )
4. Cari code ]]></b:skin> simpan code JavaScript di bawah ini di atas code ]]></b:skin>


.btsnts-flt-wdt{
position:fixed;
right:10px;
top:30%;
}
.btsnts-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;
}
.btsnts-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);
}

 5. Lalu cari code </body> dan copy code di bawah di atas code </body>
 
<!-- Social Subscribing Widget By btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="http://www.facebook.com/btsnts" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7N6epYW4RXhgZd4JdduO01de5wU335OWPK1zKyCcB3JiJHmstqCv0qAC2NUJPyavzUiGwkeS2-LLcuovWlUYZ7SGHyLQ1XYOuZ-YqOj1xQTabIJaBQVkKmm3-8hE__bOJ-XJbSiqbJyc/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/rahulippar" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj0Jl3oYKMnbFbiwQlPu3RJHZD8kutzBiAAJ1A29gDFC5yReT_aP_CMR9JG3yGDEqjcEwUAYKQ8ntAax5KyELBvVAyA2yczYh_ROUFBo0-fg41t03PFhVkjjnfGQmsQOXS0L1Qn-jSt0c/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/btsnts" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6g8tp1-Pi2enXRRN6UVkSeyT140PLwQQrX70nqdGEFLnBw5VQ9nl7qJDSK9O02Shg3nRQP2YLVGc61UOxNs2IZVwqD-QGaIw6K41uiZF8WrPcnlE1KtEN58zbHhthjZWymKbNo8OwD_8/s1600/Rss.png" /></a>
<!-- Email -->
<a href="Your Contact Page URL" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhscednKx9GOgV3jlg1C3yKrugFejP9laAq04kpY7vTD4mfXKTZKlfcfyNs9BV1-h8X91iGbyhyR8HAfcbfhsNvpJrxqiujMWbUXvGa5g7DnUFNf1U52jHxxdKlPTHj9pW8zJbonAbR3yw/s1600/Mail.png" /></a>
</div>
<!-- End -->

6. Langkat terakhir :

  1. Masuk Blogger
  2. Tambah gadget
  3. Pilih HTML/JavaScript.
  4. Lalu simpan code di bawah

<style>
.btsnts-flt-wdt{
position:fixed;
right:10px;
top:30%;
}
.btsnts-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;
}
.btsnts-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>
<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="http://www.facebook.com/btsnts" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7N6epYW4RXhgZd4JdduO01de5wU335OWPK1zKyCcB3JiJHmstqCv0qAC2NUJPyavzUiGwkeS2-LLcuovWlUYZ7SGHyLQ1XYOuZ-YqOj1xQTabIJaBQVkKmm3-8hE__bOJ-XJbSiqbJyc/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/rahulippar" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj0Jl3oYKMnbFbiwQlPu3RJHZD8kutzBiAAJ1A29gDFC5yReT_aP_CMR9JG3yGDEqjcEwUAYKQ8ntAax5KyELBvVAyA2yczYh_ROUFBo0-fg41t03PFhVkjjnfGQmsQOXS0L1Qn-jSt0c/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/btsnts" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6g8tp1-Pi2enXRRN6UVkSeyT140PLwQQrX70nqdGEFLnBw5VQ9nl7qJDSK9O02Shg3nRQP2YLVGc61UOxNs2IZVwqD-QGaIw6K41uiZF8WrPcnlE1KtEN58zbHhthjZWymKbNo8OwD_8/s1600/Rss.png" /></a>
<!-- Email -->
<a href="Your Contact Page URL" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhscednKx9GOgV3jlg1C3yKrugFejP9laAq04kpY7vTD4mfXKTZKlfcfyNs9BV1-h8X91iGbyhyR8HAfcbfhsNvpJrxqiujMWbUXvGa5g7DnUFNf1U52jHxxdKlPTHj9pW8zJbonAbR3yw/s1600/Mail.png" /></a>
</div>
<!-- End -->

Lalu Save / Simpan di template kalian.
Selamat mencoba dan sukses..!!

Keterangan : Code yang saya kasih warna ganti dengan alamat SOSIAL kalian.




Share/Bookmark >

Leave a Reply

Blog Ini Dofollow