Judul artikel dan penggalan artikel akan berjalan terus bergantian seperti halnya berita pada website-website besar yang menyuguhkan berita up-to-date. Para master blog menyebut teknik ini dengan nama Random - Recent Posts with Newsticker. Sebagai contoh Blogger Tune-Up memasangnya pada blog Hendriono Online seperti screenshot dibawah ini. Mau mencoba...???
Sreenshot diambil dari Hendriono Online
Ikuti langkah berikut untuk memasangnya pada blogger (Blog*Spot) :Langkah 1
Login ke Blogger, dan biarlah kita dalam keadaan Login.
Langkah 2
Daftarkan terlebih dahulu blog anda untuk memperoleh AJAX Feed API KEY melalui link ini.
Langkah 3
Masukan alamat blog anda seperti gambar dibawah ini dan klik tombol Generate API Key untuk memperoleh AJAX Feed API KEY.
Langkah 4Copy lalu simpan terlebih dahulu AJAX Feed API KEY yang baru anda dapatkan, karakter ini tidak akan pernah berubah dan unik untuk setiap alamat blog.
Langkah 5Kembali ke Dashboard blog kita dan masuk ke bagian "Tata Letak".
Langkah 6
Tambahkan Gadget baru dengan jenis "HTML/JavaScript", judul dikosongkan.
Langkah 7
Masukan kode dibawah ini :
<style type="text/css">Langkah 8
.gfg-root {width : 100%;height : auto;position : relative;overflow : hidden;text-align : center;font-family: "Arial", sans-serif; font-size: 12px; border: 0px solid #cccccc;}
.gfg-title { font-size: 12px; font-weight : bold; color : #ffffff; background-color: #000000; line-height : 1.4em; overflow : hidden; white-space : nowrap;}
.gfg-title a { color : #ffffff;}
.gfg-subtitle { font-size: 12px; font-weight : bold; color : #ffffff; background-color: #cccccc; line-height : 1.4em; overflow : hidden; white-space : nowrap; margin-bottom : 5px;}
.gfg-subtitle a { color : #3366cc;}
.gfg-entry { background-color : white; width : 100%; height : 6.9em; position : relative; overflow : hidden; text-align : left; margin-top : 3px;}
.gfg-root .gfg-entry .gf-result { position : relative; background-color : white; width : auto; height : 100%; padding-left : 20px; padding-right : 5px;}
.gfg-list { position : relative; overflow : hidden; text-align : left; margin-bottom : 5px;}
.gfg-listentry { line-height : 1.5em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; -o-text-overflow : ellipsis; padding-left : 15px; padding-right : 5px; margin-left : 5px; margin-right : 5px;}
.gfg-listentry-odd { background-color : #F6F6F6;}
.gfg-listentry-even {}
.gfg-listentry-highlight { background-image : url('http://dedehendriono.googlepages.com/weed-bullet.gif'); background-repeat: no-repeat; background-position : center left;}
.gfg-root .gfg-entry .gf-result .gf-title { font-size: 12px; line-height : 1.2em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; -o-text-overflow : ellipsis; margin-bottom : 2px;}
.gfg-root .gfg-entry .gf-result .gf-snippet { height : 3.8em; color: #000000; margin-top : 3px;}
.gfg-horizontal-container { position : relative;}
.gfg-horizontal-root { height : 1.5em; _height : 100%; position : relative; white-space : nowrap; overflow : hidden; text-align : center; font-family: "Arial", sans-serif; font-size: 13px; border: 1px solid #000000; padding : 5px; margin-right : 80px;}
.gfg-horizontal-root .gfg-title { font-weight : bold; background-color: #FFFFFF; line-height : 1.5em; overflow : hidden; white-space : nowrap; float : left; padding-left : 10px; padding-right : 12px; border-right: 1px solid #000000;}
.gfg-horizontal-root .gfg-title a { color : #444444; text-decoration : none;}
.gfg-horizontal-root .gfg-entry { width : auto; height : 1.5em; position : relative; overflow : hidden; text-align : left; margin-top : 0px; margin-left : 0px; padding-left : 10px;}
.gfg-horizontal-root .gfg-entry .gf-result { position : relative; background-color : white; width : 100%; height : 100%; line-height : 1.5em; overflow : hidden; white-space : nowrap;}
.gfg-horizontal-root .gfg-list { display : none;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,.gfg-horizontal-root .gfg-entry .gf-result .gf-author { display : none;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title { color: #0000cc; margin-right : 3px; float : left;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer { float : left;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate { display : block; color: #AAAAAA;}
.gfg-branding { white-space : nowrap; overflow : hidden; text-align : left; position : absolute; right : 0px; top : 0px; width : 80px;}
.gfg-collapse-open, .gfg-collapse-closed { background-repeat : no-repeat; background-position : center; cursor : pointer; float : right; width : 17px; height : 20px;}
.gfg-collapse-open { background-image : url('arrow_open.gif');}
.gfg-collapse-closed { background-image : url('arrow_close.gif');}
.gfg-collapse-href { float : left;}
.clearFloat { clear : both;}
#feedGadget { margin-top : 4px; margin-left: auto; margin-right: auto; width : 250px; font-size: 12px; color: #9CADD0;}
</style>
<script src="http://www.google.com/jsapi/?key=API-KEY" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [{title:' Judul Artikel',url:'http://NAMA-BLOG.blogspot.com/atom.xml?redirect=true&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1500, stacked : true, title: "Daftar Artikel"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Pengambilan...</div>
<div id="feedGadget"><a style="font-size: 10px; text-decoration:none; color: #cccccc;" href="http://modification-blog.blogspot.com/" target="_blank">Gadget by Blogger Tune-Up</a></div>
Baca keterangan, simpan gadget baru tersebut, dan preview blog anda.
Keterangan :
Ada beberapa parameter (warna biru) yang perlu disetting agar hasilnya sesuai dengan keinginan kita, perhatikan secara berurutan seperti dibawah ini:
- border: 0px ini untuk menentukan garis pinggir dari container, 0 berarti tidak menggunakan garis pinggir, ubahlah nilai 0 sesuai keinginan kita.
- solid #cccccc; ini untuk menentukan warna garis pinggir, ubahlah nilai #cccccc sesuai dengan warna yang kita inginkan (harus paham kode warna dasar HTML).
- font-size: 12px; ini untuk mengatur ukuran huruf judul Gadget, ubah nilai 12px jika kita ingin merubah ukuran hurufnya.
- color : #ffffff; ini untuk mengatur warna huruf, #ffffff adalah warna putih.
- background-color: #000000; ini untuk mengatur warna latar belakang judul gadget, #000000 adalah warna hitam.
- width : 250px; ini untuk mengatur lebar gadget, ubah nilai 250 untuk menyesuaikan dengan lebar gadget blog kita.
- API-KEY ; ganti kalimat API-KEY dengan AJAX Feed API KEY yang sudah kita peroleh tadi, lihat kembali langkah 2 sampai 4.
- Judul Artikel ; Ganti dengan keinginan anda, misal Title.
- NAMA-BLOG ; ubah dengan alamat blog kita.
- start-index=1 ; ubah nilai 1 untuk menentukan dari posting keberapa artikel itu ditampilkan, jika diisi 5 maka artikel akan diindex dari postingan ke 5 dihitung dari artikel terbaru bukan artikel terlama.
- max-results=10 ; ubah nilai 10 sesuai dengan artikel yang ingin kita tampilkan, jika diisi 5 maka akan ada 5 artikel yang ditampilkan.
- Daftar Artikel ; ini adalah judul gadget, silahkan ganti sesuai keinginan, misal Artikel Terbaru.
Sebenarnya masih banyak parameter lain yang bisa kita setting sesuai dengan keinginan, Blogger Tune-Up hanya menyajikan setting parameter yang penting saja. Silahkan anda berkreasi sesuai dengan imajinasi anda. Tinggalkan komentar jika mengalami kesulitan. Happy blogging :)
