Subscribe Widget Klasik v2 dengan CSS3

Subscribe Widget Klasik v2 dengan CSS3
Dengan semakin berkembangnya dunia blogging dan semakin banyaknya pengguna sosial media maka banyak orang yang membuat berbagai macam widget untuk mempercantik tampilan blog. Dan dengan adanya CSS3 banyak orang memanfaatkanya untuk memberi effect pada widget sehingga terlihat lebih menarik.  Nah sekarang saya akan memberikan Subcribe Widget (Widget untuk berlangganan) yang saya dapat dari situs bloggertips.com. Subscribe widget ini bernama Subscribe Widget Klasik v2 dengan CSS3. Dan katanya ini merupakan update dari versi sebelum dengan menambahkan CSS3 transition dan shadow sehingga memberikan effect dan terlihat lebih profesional.  Dan ini sangat cocok untuk berbagai macam sidebar karena dapat menyesuaikan dengan ukuran dari sidebar. Cara pemasangannya sangat mudah. Ikutilah langkah-langkah dibawah ini.

Step1 : Menambahkan Subscribe Widget Klasik v2 ke dalam blog.


  • Pergi Ke Blogger >> Layout
  • Add a Gadget
  • Pilih HTML/Javascript dan Paste kode dibawah ini :


<style>
/* ---------My Blogger Tips Classic Subscribe Widget V2----------- */
.social-connect-widget{background:#D7D7D7;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;
-webkit-transition:all .6s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFFEF9;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-size:14px;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>
<!-- Start My Blogger Tips Classic Subscribe Widget V2 - http://mkr-site.blogspot.com -->
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a href='http://feeds.feedburner.com/USERNAME'><img alt='RSS Feed' src="http://3.bp.blogspot.com/-hEgZHK7jgaU/TzwJGEghh9I/AAAAAAAAAf4/GgLBaLyxAAc/s1600/rss.png"/></a><a href='http://feeds.feedburner.com/USERNAME'>Subscribe to our RSS Feeds!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src="http://1.bp.blogspot.com/-w3rrG7CcZOg/TzwJGr77q-I/AAAAAAAAAgA/uFsohpve_Tc/s1600/twitter.png" title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src="http://2.bp.blogspot.com/-wv3o68M5bGk/TzwJFto27GI/AAAAAAAAAf0/Grrv9oHANiw/s1600/facebook.png' title='Be Our Fan"/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>
<!-- End My Blogger Tips Classic Subscribe Widget V2 - http://mkr-site.blogspot.com -->
Sebelum Menyimpan Lakukan Step 2 terlebih dahulu

Step 2: Tambahkan Link anda

Anda Perlu mengganti link dibawah dengan link anda sendiri
  • http://feeds.feedburner.com/USERNAME ganti dengan Feedburner id anda.
  • http://twitter.com/USERNAME ganti dengan Twitter id anda.
  • http://facebook.com/USERNAME ganti dengan Facebook fan page link anda.
Save dan selesai :)



Satank Mkr Beri Komentar
Design by MKRSite Copyright © 2012 ~ 2017 Powered by Blogger