Membuat widget Headlines dengan slide

Jika anda perhatikan pada sidebar kanan atas di blog ini terdapat sebuah widget yang saya beri judul Headlines. Sebuah widget sederhana untuk menampilkan artikel-artikel terbaru menggunakan teknologi Ajax yaitu sebuah teknologi yang disediakan oleh Google. Tutorial ini saya dapat dari sebuah blog luar yaitu Blog doctor, namun telah saya modifikasi agar sesuai dengan desain template saya.

Seperti biasa kalau ada hal-hal baru yang saya dapatkan selalu ingin saya share kepada pembaca. Mungkin diantara anda ada yang ingin mencoba untuk memasangnya pada blog kesayangan anda, silahkan teruskan membaca tutorial ini. Berikut langkah pembuatannya:

Langkah awal tentu anda harus Login ke Dashboard Blogger anda, kemudian pilih Layout - Page elements. Tambahkan sebuah gadget baru dan pilih HTML/Java script, lalu masukan kode di bawah ini:

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 14px;
border: 1px solid #000;
}

.gfg-title {
font-size: 14px;
font-weight : bold;
color : #fff;
background-color: #3B5998;
line-height : 1.6em;
overflow : hidden;
white-space : nowrap;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 16px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}

.gfg-entry {
background-color : #F4F4F4;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : #F4F4F4;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.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('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 18px;
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;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/

.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 #AAAAAA;
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 #AAAAAA;
}

.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;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : #F4F4F4;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
display : none;
}

/*
* FeedControl customizations.
*/

.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;
}
body {
background-color: #F4F4F4;
color: black;
font-family: Arial;
font-size: small;
margin: 0;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 464px;
font-size: 12px;
color: #9CADD0;
}
</style>
<script


src="http://www.google.com/jsapi/?key=AJAXKEY" 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:'title',
url:'http://nama-blog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 10, stacked : true,
title: "Headlines"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>
<div id="feedGadget"></div>

Yang harus anda perhatikan pada kode diatas yaitu adanya AJAX_KEY. AJAX Key adalah kode khusus untuk blog anda, anda dapat mendapatkan kode tersebut disini. Buka link tersebut dan masukan url blog anda lalu klik tombol Generate dan copy AJAX Key yang dihasilkan dan masukkan pada kode diatas. Ganti blog-anda.blogspot.com dengan nama blog anda. Aturlah lebar dari widget agar sesuai dengan lebar sidebar template anda dengan mengganti nilai pada kode width:464px; . Simpan widget anda dan lihat hasilnya..

Catatan : Anda dapat menampilkan semua posting pada widget ini dengan mengubah nilai feed pada kode diatas.

UPDATE : Jika kode diatas tidak bekerja silahkan anda download script asli yang saya pakai, dan ubah beberapa parameter seperti diatas. Silahkan download scriptnya DISINI

Artikel terkait:



37 Komentar:

Atom said...

pertama kalinya mantabzzz.....

Online For Money said...

wah thanks banget infonya sob
salam kenal yahh
Make Money Online

BAT-MAN said...

Thanks atas infonya ...sangat bermanfa`at sekali bos..?

lina@happy family said...

Tampilan widget headlines keren yah. Terimakasih tutorialnya, lagi pikir2 dulu, mo pake apa ngga...

Imoel said...

makasih sob.. langsung di praktekkan nich..

Ocim said...

wah keren nie widgetnya

saya coba ah ntar

Adnan Ashari said...

ilmu baru tuh...

aan said...

nice post......

asep canda said...

muantap sob info nya ijin sedot ya ilmunya...

mas doyok said...

sip heheh blog doctor jajanan saya dulu mas :)

Iklan Baris Gratis said...

Mana headline nya

Info Blog said...

sob, kamu juga bisa buat headline news yang beda.. liat di sini

Eris Agustian said...

@Iklan baris: mungkin koneksi internet sobat sedang lambat jadi headlinenya tidak keluar..
@Info blog: Siip..keep sharing..
@mas doyok: Salut untukmu..

Unknown said...
This comment has been removed by the author.
Unknown said...

huhuhu salah koment, hihihi, ternyata gadget toh, nice infoh mas! tak cobaaaa graakkkk!!! hehehe salam kenal, berkunjung ke teplok yah. Bantu sebarin berita baik yah, heheh

draxc0la said...

wew kereeeennn mantep mantepp... boleh di coba neh

Blog Informasi said...

wah keren jadi tambah mantep yah nanti blognya...

Stop Dreaming Start Action said...

nice post nih sob heheheee :D

NURMANTO said...

cie..cioe... artikelny membantu banget.. nich. tanks yaaaaaaaaaaa...

JT said...

bener, banyak jurusnya, keknya pantas jd blog tutor niiii:D

aduh di sini kagak ada contonya yaaa???
scriptnya izin copy ya. NUHUN

eric said...

punya saya kok gak bisa ya?

M. Wiyono said...

ini baru yang ku cari....barangkali anda juga ada yng di cari dari blog ku

Admin said...

@eric: jangan lupa AJAX Key-nya sob.. kalau yang muncul coma tulisan loading barangkali speed internet anda sedang lambat

blog buat bloggers said...

Wiiiis widget gan mantep semua gan
luas pengetahuannya gan
sukses selalu gan

buJaNG said...

Kalau untuk wordpress gimana?

Beda ka'bah dan Baitullah said...

thanks infonya bro admin

daristya said...

Makasih bang... bermanfaat bgt.

bagi2 blog ane... www.eswn.co.cc

TQ

AR Cava said...

Penampakannya kaya apa yah???

AR Cava said...

Penampakannya kaya apa yah???

obat herbal hiv aids said...

makasih
infonya
obat alami diabetes

Berita Terkini said...

bisa liat contohnya gak mas....

Puisi Keren

Aditya Subawa said...

sudah gak work mas, dengan template classic blogger.. ada solusi gak?

oritoranku said...

thanks infonya sob..salam knal ya

download film said...

artikel yg menarik nie, dan saya menyukainya nie, dan salam kenal dari mico ya, makasi atas infonya dan bagi teman2 yg suka film box office,horor,action dan suka download film. silakan kunjungi situsnya ya, makasi

cara merawat kulit kering said...

kalau yang untuk wordpress punya scripnya nggak gan...?

infoloker-indo said...

keren blog nya bro

joe taslim said...

wah gak ada penampakannya ya?? gpp deh tk coba dulu sob... thanks ya??

Post a Comment

Silahkan tinggalkan komentar anda, setiap komentar yang anda tulis akan menambah jumlah backlink anda.
Sebaiknya gunakan Name/URL pada saat menuliskan komentar.

Template Design by Eris Agustian - Digital Life | Professional Blogger Template