Membuat sebuah blog agar kelihatan lebih hidup dan interaktif dapat dilakukan dengan bermacam-macam cara. Anda sebagai pemilik blog mungkin merasa blog anda kurang interaktif sepertinya sepi atau mati dalam artian seperti tidak ada kehidupan didalamnya, padahal anda sering melakukan update berita. Cara-cara yang dapat dilakukan yaitu dengan penambahan beberapa widget.

Menurut saya agar suatu blog kelihatan lebih hidup ( Bikin Hidup lebih Hidup, Enjoy Aja) adalah dengan penambahan widget yang bersifat bergerak juga, seperti animasi, atau gambar-gambar gif dll.

Kita juga bisa menambahkan sebuah widget dengan text dari feed RSS yang bergantian tampil. Kalo saya menyebutnya sih Headline Text Sroller. Widget ini mirip dengan widget Headline Animator dari feedburner.




Widget ini sendiri saya dapatkan dari Dynamic Drive pada bagian gAjax RSS Pausing Scroller. Anda bisa langsung baca tutorialnya di sumbernya langsung (bahasa inggris) atau ikuti petunjuk dibawah ini.

1. Langkah pertama yaitu login ke blog anda, setelah anda berada di halaman dashboard. Klik Layout (Tata Letak) pada blog yang akan edit kemudian Pilih Edit HTML. Di sarankan sebelum anda mengedit code template untuk membackup terlebih dahulu. Untuk Membackup template, Pada Template>Edit HTML , and klik pada "Download Full Template", kemudian simpan file XML pada komputer. Hal ini bertujuan apabila setelah proses pengeditan terjadi error maka anda tinggal mengupload lagi template anda.

2. Jangan centang Expand Template Widget, lalu Cari kode (Untuk Firefox silahkan tekan Ctrl + F) </b:skin > tambahkan code javascript dibawah ini setelah </b:skin > :

<script src='http://www.google.com/jsapi?key=YOUR-API-KEY' type='text/javascript'></script>
<script src='http://bambangeko05.googlepages.com/gfeedfetcher.js' type='text/javascript'></script>
<script src='http://bambangeko05.googlepages.com/gajaxscroller.js' type='text/javascript'></script>

Catatan : YOUR-API-KEY dapat anda lihat di sini, setelah itu gantikan YOUR-API-KEY dengan API Key anda sekarang. Setelah itu Save Template anda.

3. Tambahkan CSS sebelum / di atas </b:skin >

/* gAjax RSS Pausing Scroller
-------------------------------------------*/
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}
.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}
.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}
#example1{ /*Demo 1 main container*/
width: 480px;
height: 30px;
border: 0px solid black;
padding: 4px;
background : #FFFFFF ;
}
code{ /*CSS for insructions*/
color: red;
}


3. Silahkan klik ke halaman LAYOUT --> Page Elemen --> add gadget pilih HTML/Javascript, masukkan code ini

<script type="text/javascript">

var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://NAMABLOGANDA.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()

</script>

ganti NAMABLOGANDA dengan nama blog anda. Kemudian Save.

4. Save.

Thanks......By : Bembenk

Artikel Terkait :