Awesome Floating Social Subscribing Dengan Efek Hover

Kali ini saya ingin memperkenalkan widget mengagumkan berlangganan mengembang dan melayang dengan efek hover untuk para sahabat Oto Website.

Widget ini sangat menarik dan dapat meningkatkan jumlah pengikut pada blog sobat, karna tampilannya yang menumpuk dan enak di pandang mata.

Mungkin widget ini belum pernah di bahas oleh para blogger Indonesia karna saya mengambil widget ini dari Bloggert hehehe . . . kalo gak percaya coba sobat lihat blog Indonesia mana yang pernah membahas widget ini (Sombong) hehehe . . .

Sekarang mari kita bahas cara memasang Awesome Floating Social Subscribing Dengan Efek Hover ini di blogger sobat.
Cara memasang Awesome Floating Social Subscribing Dengan Efek Hover ini ada dua macam di antaranya :

A. Menambahkan Element HTML/Java Script di Gadget.
B. Menambahkan kode di dalam template Sobat.

Silahkan sobat pilih salah satu cara yang sobat inginkan.

Sebelumnya agar lebih jelasnya lagi lebih baik sobat lihat dulu demonya dengan menekan tombol di bawah ini:

Demo

Sudah jelaskan, ayo sekarang kita bahas cara memasangnya:

A. Menambahkan Element HTML/Java Script di Gadget.

1. Masuk ke akun blogger sobat.

2. Pada Dasbor klick ➨ Rancangan ➨ Tambah Gadget (di bagian manapun, saya sarankan di bagian paling bawah dan jangan di beri judul).

3. Pilih Element HTML/Java Script ➨ Lalu Copy kode berikut ini dan letakkan di dalam Element HTML/Script tadi.

<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/dekrif" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFBFF-IdX3FalXmY4eaxmHDgZr27aKiTqYcwJEgYVMLNyerJp1HEyYa4mQMjU8Y9smu0wENGQBg7WT7l6eMuFGhK8Y-jE4b2FI62ih4-V7kkDUCFbosoDy3_NCTi-dXdjTDWHoS4-0gCQ/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/otowebsite" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF5yBpS0hFGWS-wFvoEggakk9S9Y9FWiwR8Y3aV-1a79PZAd27Y_9mlpEyK0EwbY9FvpjMqR-RReKhPMe8znuxQv7ruOdR0JlSqYJ3ryJVLDc3M_j8QOCGuTu6BPCYu3rrX6F3syyCLYY/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/otowebsite" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizxRbD9L6vDqCgmEne9HlpaKJAvP_WlK_4ZKw-6oXsJmLGf2Fo3yT39N8-463ORJczw0ufvKWlVnDYQydt4jZHputnJCT76mf2CZ3ARb6-ZD7lygCFE011inruaD5oaP4v2wRSa4S_KM4/s1600/Rss.png" /></a>
<!-- Email -->
<a href="http://otowebsite.blogspot.com/2012/05/contact-me.html" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid_loDXMFavrOh7RPR0Akq7tVRlDCJSPHTeeLREesYS2OZW3lTRTy5sp_GnOleM6xeMPZOPlEZWuvBhsfGpnttUip1MoIHMDnNrzMEDkFgWqDVyi5TSEMiu1G5C7zMow1FelnXKBVHi2Y/s1600/Mail.png" /></a>
</div>
<!-- End -->

4. Simpan.

Keterangan :
Ganti teks yang saya beri warna merah dengan url facebook, twitter, feedburner dan contact sobat.


B. Menambahkan kode di dalam template Sobat.

1. Masuk ke akun blogger sobat.

2. Pada Dasbor klick ➨ Rancangan ➨ Edit HTML.

3. CentangExpand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang letakkan kode css berikut di atas kode tadi.

.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);
}

6. Selanjutnya cari kode </body> dan letakkan kode berikut ini tepat di atasnya.

<!-- Social Subscribing Widget By otowebsite.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="http://www.facebook.com/dekrif" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFBFF-IdX3FalXmY4eaxmHDgZr27aKiTqYcwJEgYVMLNyerJp1HEyYa4mQMjU8Y9smu0wENGQBg7WT7l6eMuFGhK8Y-jE4b2FI62ih4-V7kkDUCFbosoDy3_NCTi-dXdjTDWHoS4-0gCQ/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/otowebsite" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF5yBpS0hFGWS-wFvoEggakk9S9Y9FWiwR8Y3aV-1a79PZAd27Y_9mlpEyK0EwbY9FvpjMqR-RReKhPMe8znuxQv7ruOdR0JlSqYJ3ryJVLDc3M_j8QOCGuTu6BPCYu3rrX6F3syyCLYY/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/otowebsite" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizxRbD9L6vDqCgmEne9HlpaKJAvP_WlK_4ZKw-6oXsJmLGf2Fo3yT39N8-463ORJczw0ufvKWlVnDYQydt4jZHputnJCT76mf2CZ3ARb6-ZD7lygCFE011inruaD5oaP4v2wRSa4S_KM4/s1600/Rss.png" /></a>
<!-- Email -->
<a href="http://otowebsite.blogspot.com/2012/05/contact-me.html" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid_loDXMFavrOh7RPR0Akq7tVRlDCJSPHTeeLREesYS2OZW3lTRTy5sp_GnOleM6xeMPZOPlEZWuvBhsfGpnttUip1MoIHMDnNrzMEDkFgWqDVyi5TSEMiu1G5C7zMow1FelnXKBVHi2Y/s1600/Mail.png" /></a>
</div>
<!-- End -->

7. Simpan template.

Keterangan :
Ganti teks yang saya beri warna merah dengan url facebook, twitter, feedburner dan contact sobat.

Nah saya rasa cukup untuk kali ini, semoga articles blog kali ini bisa bermanfaat untuk sobat semua.

Bagaimana apakah Sobat berhasil menerapkannya di blogger sobat? Silahkan tinggalkan tanggapan dan komentar Sobat tentang postingan kali ini.