Minggu, 15 Juli 2012

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.blogtrikdantips.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/AVvXsEgp-WaF9qisNRFf1dNdf1QWiwGDU1eNKqW7aLDgQiYfQjI4q0dllTpfhp0nEG8o9vvAb2x15ls94ydAMkHCpDPFUtfG9lS53Oc1qb4xJtVAcdlqLPgqD9YWlIup4n_vTL1J49ls_HPfeTjo/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/AVvXsEiS3gozVW67hBmOSclAPk8tJOu1JC8cWmuYnF9fPl69LJKDnOIsem60fI-iWCibFz5TWIO-KgBfN8a2TiJEHsXJBwwQKnmQfdMX52u39A9ZNX3Kqu5Yu1We_LssyS8yDvIWqbXidyfzzvFN/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/AVvXsEjvXxy0Nwa-LLTstp2c-H8Wzc6rVPEcdVdjDOFzzHwG03AMKqzo6T28IqyULwbv0mcI9FPTEHH05Dys3RI95PAXSwBGVFZLf4Ukr24L4IEjRVpqY-gj2vKtxVUIFFzXnwaqugJ3L9hCA4Mt/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.

0 komentar:

Posting Komentar


Terimakasih sudah berkunjung, silahkah tinggalkan komentar anda, tapi sebelum berkomentar silahkan baca dulu peraturannya :

1. Berkomentarlah menggunakan bahasa yang sopan

2. Dilarang mencantumkan komentar yang berisi SARA atau bersifat provokatif

3. Dilarang mencantumkan LINK di dalam isi komentar kecuali di halaman "Tukar Link"

4. Jangan meninggalkan komentar SPAMM,

5. Berkomentarlah sesuai tema artikel

6. Akun anonymous hanya untuk anda yang belum punya
blog,

7.Jika anda melanggar peraturan diatas, maka dengan
terpaksa saya akan langsung menghapus komentar anda.

Terimakasih.

Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Web Hosting Bluehost