Senin, 23 April 2012

Membuat judul posting artikel berjalan




Membuat judul posting artikel berjalan
Kemarin pada saat saya nongkrong di blognya KR, ada salah seorang pengunjung blog yang bertanya bagaimana cara membuat judul posting berjalan. Pada awalnya saya berpikir mustahil bisa dilakukan hanya dengan menggunakan kode marquee, saya pikir mungkin itu hanya dapat dilakukan dengan menggunakan Java script. Tetapi setelah berusaha keras mengutak-atik kode HTML blog saya, akhirnya saya menemukan cara sederhana untuk membuat judul pada posting atau artikel blog berjalan. Hasil yang di dapat seperti anda membuat teks berjalan dengan kode marquee atau seperti judul blog berjalan yang menggunakan Java script.

Baiklah tanpa perlu panjang lebar saya akan memberikan triknya. Seperti biasa pertama login ke Dashboard Blogger anda kemudian klik Layout - Edit HTML. Untuk berjaga-jaga sebaiknya backup dulu template anda, lalu klik pada Expand widget templates dan carilah kode dibawah ini:

<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>

Kemudian pasang kode marquee sehingga kode lengkap hasil perubahan akan seperti dibawah ini:

<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>

Teks yang berwarna hijau adalah kode yang harus anda tambahkan. Anda dapat merubah arah dengan mengganti kode left menjadi right. Klik tombol Preview untuk melihat hasilnya, jika anda sudah cukup puas silahkan di simpan pekerjaan anda.
Contoh hasil seperti ini :

JUDUL POSTING BLOG ANDA

Bagaimana, mudah bukan? Selamat mencoba..

0 Comments
Tweets
Komentar

Tidak ada komentar:

Posting Komentar