Tips dan Trik Blogger

Efek Marquee Pada Artikel Terbaru

Marque Pada Artikel Terbaru ! itulah judul kali ini, sebenernya sih ada seseorang yang request ke saya melalui YM( Yahoo Messenger ) Bagaimana supaya Artikel terbaru ada animasinya gak gitu gitu aja ? bisa gerak gitu deh :) /*maaf saya lupa percakapannya he he. Saya juga lupa sapa yang request! jadi lum saya pasang linknya di sini.*/. Setelah melakukan sedikit otak-atik, dan beberapa masalah akhirnya berhasil saya selesaikan yaitu dengan menggunakan bantuan kode HTML untuk TABEL dan MARQUEE

Sebelum memulai pada langkah berikutnya ada syarat yang harus di penuhi yaitu:
Silahkan Pasang Pada blog anda. Setelah selesai anda pasang langkah berikutnya adalah:

1. Login di Blogger dan Pilih LayOut.
2. Pilih EditHTML dan Ceklis Expand Widget Template
3. Kemudian Cari Kode Seperti di bawah ini: /* pastikan Widget Id nya sesuai title yang anda gunakan di sini Feed1 dengan Title "Artikel Terberu"

<b:widget id='Feed1' locked='false' title='Artikel Terbaru' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content'>
<ul expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'> <b:loop values='data:feedData.items' var='i'> <li> <span class='item-title'> <a expr:href='data:i.alternate.href'> <data:i.title/> </a> </span> <b:if cond='data:showItemDate'> <b:if cond='data:i.str_published != &quot;&quot;'> <span class='item-date'> &#160;-&#160;<data:i.str_published/> </span> </b:if> </b:if> <b:if cond='data:showItemAuthor'> <b:if cond='data:i.author != &quot;&quot;'> <span class='item-author'> &#160;-&#160;<data:i.author/> </span> </b:if> </b:if> </li> </b:loop> </ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Tahapan berikutnya adalah memodifikasi kode warna biru atas dan hasilnya sebagai berikut:

<b:widget id='Feed1' locked='false' title='Artikel Terbaru' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content'>
<marquee align='center' direction='left' height='100%' onmouseout='this.start()' onmouseover='this.stop()' scrolldelay='500' width='100%'><table expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
<tr>
<b:loop values='data:feedData.items' var='i'>
<td>
<span class='item-title'>
<a expr:href='data:i.alternate.href'>
<data:i.title/>
</a>
</span>
<b:if cond='data:showItemDate'>
<b:if cond='data:i.str_published != &quot;&quot;'>
<span class='item-date'>
&#160;-&#160;<data:i.str_published/>
</span>
</b:if>
</b:if>
<b:if cond='data:showItemAuthor'>
<b:if cond='data:i.author != &quot;&quot;'>
<span class='item-author'>
&#160;-&#160;<data:i.author/>
</span>
</b:if>
</b:if>
</td>
</b:loop>
</tr>
</table>
</marquee>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Hasilnya Akan seperti gambar di bawah ini: (klik pada gambar supaya terlihat animasinya)

Blok Warna Ungu Adalah blok dengan Kode Marquee penjelasannya dapat di pelajari pada artikel yang seblumnya yaitu: "Percantik Blog dengan Marquee"

Blok Merah adalah Blok Tabel yang saya masukan supaya Artikel terbaru tampil ke samping /* normalnya ke bawah */ arikel tentang Table dapat di baca di sini: "HTML untuk Membuat Table"

Silahkan anda Padukan dengan animasi Marquee dan percantik dengan Warna menggunakan Table. Terimakasih atas Requestnya semoga bermanfaat.
19 Komentar untuk "Efek Marquee Pada Artikel Terbaru"

makasih ya cobain ah gimana efeknya

ade masih ada perhatian

berusaha terus biar semakin canggih aja blog semua orang

Duh lum ngerti, contohya yang mana nih?kalo bagus mau buat deh..

waktu saya add feed RSS dia minta URL ....!!
tru URL siapa yg kita masuk kan ke situ
tolong dibalas makasih sebelumnya

wwahhhh hacking blogger lage neh

hemmmmm kreatif

Wah, bagus nih, tapi gimana yah mau nyobanya ^_^

ni buat makin berat gak kang??

dek aku mau tanya, gmn caranya memasang flash .swf / .flv dalam blog kita, kirim ke at87roni@gmail.com, atau possin aja.makasih untuk jawabanya, sukses

@ PARTAI SIRA :Masukan Url Feed Blog Masing Masing, yaitu http://dunia-blogger.blogspot.com/feeds/posts/default Ganti [ dunia-blogger ] dengan nama blog anda.

thank u boss tuk contonya

www.modalgombal.blogspot.com

wah bagus mas..bisa dipraktekkan nie..nice info mas

wah tipsnya bagus banget thanks yow
so tak tunggu tips tips berikutmya
happy bloging

keren postingnya...
baru tau bisa kaya gitu...

yang mau bisnis online datang aja ke blog saya...

Terima Kasih telah Mengunjungi Blog ini dan Silahkan tinggalkan Komentar Anda...

Back To Top