Widget Floating Subscribe Dengan Social Icon

Pada postingan tutorail saya yang pertama ini saya akan mempostingkan Tutorial untuk blog ya itu Widget Floating Subscribe Dengan Social Icon. Jika ingin melihat demonya, Widget ini sudah saya gunakan disamping kiri blog saya atau seperti gambar ini :

  Atau jika kalian belum puas dengan gambar kalian bisa melihat ini >>DEMO<<
Jika kalian tertarik langsung saja ikuti tutorial ini :

1. Login keakun blogger kalian

2.Pilih menu Dasbor pilih Tenplate - Pilih Edit HTML - Pilih Lanjutkan.

3. Centang dahulu , Untuk mengetahui bila ada kesalahan

Expand Template Widget . 

4. Cari kode ]]></b:skin>  , gunakan Ctrl + F untuk mempermudah pencaharian.

5. Copy-pastekan script dibawah ini tepat DIATAS code tersebut.

.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. Jika sudah , Cari kode </body>. Kemudian copy-paste script dibawah ini tepat DIATASNYA .

<!-- open-this.blogspot.com START -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="http://www.facebook.com/ndalimin.sonthok" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopmgwY1etx0JmxNV7PVc52MS-c4OWBTGzfH59jI5-KMRe54SyLl4iNpx9i8VgCNIJvoNGxgjWsEyecL8wOE-T-o_tpKrsFSSvrQ7UiJwilzQo56gxkbgCEzMjhZ-0lw3W7kQSHAEqU5w/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/ndaliminblog" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Edv8jH8eU2c42SqpsBqNgbQYZgW40_fMtsV9zwFBh-vQhovi0db9MZyfKdIrakFEfS11mb-kIKCjpEll_NJrJDVAmc-9v9gGqXc9ctIMjFVVBk3pL8HFK6gxTKIM3TbRDa8PxEaKpMw/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/G0G0G0" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEEFTe8H6C-qNnWkBPNtEx4cbENmhOSSm1bg7Q4IWVL2vktZAoLZgYPrEE0-bAI7l6gn8OfT7dojBeU4AjBDxW22DIpUmZNGAOh4Yr5kTPDq56gkzHgPFFG0J36e3-WYOFJMMpSz-g-5w/s1600/Rss.png" /></a>
<!-- Email -->
<a href="gogogo212@ymail" title="Contact Me" target="_blank"><img alt="Contact Me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggkpIIy5evAEefGuD3AltALHw0S9LbtH0cFvbmI8acpZi6wnrZGmtaBLluhL35q8gMXe0j3UM_77rXx8nuKmGhWBKL4hGwfHGNGQm5kW584GRTlWrV_vH3xAqvUdBdPAKmFev3JGYRvDs/s1600/Mail.png" /></a>
</div>
<!-- End -->

7. Dan kemudian pilih Simpan


Selanjutya kalian menuju ke menu  Dasbor

1.pilih Tata Letak - Tambah Gadget (dimana kalian akan meletakkan script ini) - Pilih HTML/Java Script- Copy Script dibawah ini:

<!-- open-this.blogspot.com Start -->
<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/ndalimin.sonthok" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopmgwY1etx0JmxNV7PVc52MS-c4OWBTGzfH59jI5-KMRe54SyLl4iNpx9i8VgCNIJvoNGxgjWsEyecL8wOE-T-o_tpKrsFSSvrQ7UiJwilzQo56gxkbgCEzMjhZ-0lw3W7kQSHAEqU5w/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/ndaliminblog" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Edv8jH8eU2c42SqpsBqNgbQYZgW40_fMtsV9zwFBh-vQhovi0db9MZyfKdIrakFEfS11mb-kIKCjpEll_NJrJDVAmc-9v9gGqXc9ctIMjFVVBk3pL8HFK6gxTKIM3TbRDa8PxEaKpMw/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/G0G0G0" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEEFTe8H6C-qNnWkBPNtEx4cbENmhOSSm1bg7Q4IWVL2vktZAoLZgYPrEE0-bAI7l6gn8OfT7dojBeU4AjBDxW22DIpUmZNGAOh4Yr5kTPDq56gkzHgPFFG0J36e3-WYOFJMMpSz-g-5w/s1600/Rss.png" /></a>
<!-- Email -->
<a href="gogogo212@ymail.com" title="Contact Me" target="_blank"><img alt="Contact Me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggkpIIy5evAEefGuD3AltALHw0S9LbtH0cFvbmI8acpZi6wnrZGmtaBLluhL35q8gMXe0j3UM_77rXx8nuKmGhWBKL4hGwfHGNGQm5kW584GRTlWrV_vH3xAqvUdBdPAKmFev3JGYRvDs/s1600/Mail.png" /></a>
</div>
<!-- open-this.blogspot.com End -->

Keterangan :
          Ganti tulisan yang berwarna MERAH dengan akun kalian.

2. Kemudian simpan

Sekarang kalian tinggal melihat hasilnya. Jika ada sesuatu silahkan dikomentar saja , karena saya tidak online 24 jam sepenuhnya. Thank

Sumber : http://open-this.blogspot.com/2012/09/widget-floating-subscribe-dengan-social.html