Efek Marquee Pada Artikel Terbaru

Oleh Ade Sanusi

12.21.2008

Bagikan :

Tweet

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:

• Artikel terbaru via Widget Feed
  

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.

Tag : Berita dan Request, Tips and Trik, Widget