HTML : Post Title Marquee in Blogger's Layout

Marquee? siapa yang tak kenal efek yang dihasilkannya. Kode HTML marquee memang sering digunakan untuk menyulap tampilan teks atau gambar untuk lebih aktif bergerak. Manjur untuk menghilangkan kesan monoton.

Nah kali ini edittag ingin berbagi untuk menyetingnya di layout blogger. Bagian yang ingin digerakkan adalah pada judul postingan.

Untuk itu ikuti prosedur berikut :

Klik subtab edit HTML pada bagian Template. Atau bila kita memulainya dari dasboard maka langkahnya adalah klik tautan Layout, lalu klik Edit HTML. Bila sudah tiba disini, centanglah kotak Expand Template Widget. Tunggu sesaat agar dimuat semua kode XMLnya.

Lalu coba cari kode berikut :
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Lalu kita akan memasang kode marquee di bagian depan title. Karena keterbatasan ruangan disini, maka yang kiranya layak digunakan adalah atribut direction left atau right. Hingga akan termuat kode lengkapnya menjadi berikut :

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></marquee>
</b:if>

Tentu ada catatan ringan nih, semoga ingat akan ketentuan marquee di postingan sebelumnya akan kebutuhan teknis penggunaan marquee di browser. Contoh bisa dilihat disini.

Postingan terkait :
- Masalah teknis penggunaan Marquee.
- Atribut HTML pada Marquee.


Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com