First of All

Browse Manual » Wiring » Widget » Membuat Widget Klasik Subscription di Blog

---

Membuat Widget Klasik Subscription di Blog

Baru-baru ini saya merancang widget berlangganan yang sederhana. Kali ini saya akan membuat widget berlangganan dengan tampilanan klasik. Widget ini dilengkapi dengan tombol sosial networking yaitu Twitter dan Facebook. Fitur ini akan menggunakan efek hover dan secara otomatis cocok pada sidebar anda. Proses pemasangan widget ini blogger cukup sederhana, cukup ikuti saja langkah berikut ini:

1. Masuk ke Rancangan --> Elemen Laman
2. Tambahkan Gadjet pilih HTML/Javascript
3. Masukan kode dibawah ini:

<style>

/* ---------Widget by www.defecafe.blogspot.com----------- */

.social-connect-widget{background:#F5F4EF;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFF}
.social-connect-widget a{text-decoration:none;font-weight:bold;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>


<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a href='http://feeds.feedburner.com/USERNAME'><img alt='RSS Feed' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYN8rkVvvcEpHPCSF-P4Mg00mqcOExRKdG-Q6pjvuXoRSir8g6GkHiMGFRBx9Pk_buGUAbvRtXBACQKY6VANxcUjBef-7aBuhFD8riXT65Zuqtl_pRXL1_IJxZXMafHAROoYAF5A1rS5xP/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6lgIUC6YiSwxCn-nI25qpJcSMe_k46s06WO5q4W-CLF0liya-qiXIJOVz0fhTjmr0oSW_U8v3rTyvq9_5qn7J_XAP3dvQ0j82xPoAQV5EWFlyBn-80AaOh9nsmSUNV6WaLrUZUeafic1/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUODuKN2fi_WZ7iUSt82pYlbb-lmEnXa7mRH3slwhlL06KbuW2qgYh3nbSGBZAdqXE1fFc3DNMTx9GPtqhzKCeJjUHsiJOjTREelciY-1INIzqdVifo8npLcntB4JDLm3VyNVVTSbAacEa/s1600/facebook.png' title='Be Our Fan"/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>

4. Anda perlu mengganti kode berikut ini dengan kode id Anda sendiri.

http://feeds.feedburner.com/USERNAME
http://twitter.com/USERNAME
http://facebook.com/USERNAME

5. Simpan widget dan lihat hasilnya

Semoga dengan widget yang baru ini anda akan semakin puas dengan tampilan blog. Semoga bermanfaat.