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:
Kemudian pasang kode marquee sehingga kode lengkap hasil perubahan akan seperti dibawah ini:
Teks yang berwarna merah 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 :
Bagaimana, mudah bukan? Selamat mencoba..
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>
<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>
<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 merah 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 :
Bagaimana, mudah bukan? Selamat mencoba..
50 Komentar:
manthb manthb perlu di coba
makasih yaaa mas aku udah berhasil alias sukses...
walaupun bukan aku yang tanya tapi aku mendapat ilmu yang bermanfaat...
Kalo judul posting dibuat berjalan seperti ini, ada pengaruhnya ngga ke google, maksud saya, google masih bisa baca judul posting ini?
@mba Lina: Menurut saya sih google masih bisa membaca judul artikel meskipun mungkin sedikit pusing :)
@Catur: Makasih juga komentarnya..
postingan yang menarik ini.
sip banget mas walau sya sendiri belum akan gunakan
wah infonya bagus tuh, dulu udah saya coba, tapi sekarang dicabut lagi xixixixi
wah keren nie postingannya
siiip... tambahan ilmu lagi nih :)
Makasih ya sob
Siip infonya. Thanks ya mas.
widih banyak juga perintahnya ya sob, catet ahhh
Mampir setelah lari pagi
Good post sob...
Ti kamri hayang ka dieu teh, ngan speedy error. Make HP malah letoy. Pas kamari sore rek kadieu, karak ge muka kaburu dititah ka mitoha... Jadina karak ba'da shubuh ieu sob ulin teh, hehe...
Sob..mohon ijin tuker link ya..link nya dah tak add di blog saya..mohon di cek VB6MANIA
trima kasih
kira-kira tambah berat gak ya?kalau gak tambah berat saat ini juga aku mau cobain.
thanks tipsnya...
@lover: kalau pengaruh sih pasti ada, cuma kalo sekedar efek marquee sih ga terlalu kelihatan pengaruhnya.
digital life..
makasih banget infonya,
salam kenal ya
skali laggi makasih ya...
Jadi Nambah Lagi nie wawasan q , Itupun berkat saya membaca tulisan mu sob .....
Nice for u
bagus ya infonya. trimakasih atas kunjungannya
thanks infonya, bisa buat variasi....
sippp....
wew boleh dicoba juga tu sob... thanks udah sharing
mas kalau baner berjalan gimana yah caranya, bannernya lebih dari satu tapi
duH,,daH gaK paKe bLogsPot lG neH..kaLo diPake di WP bisa gaK ya??
Makasih ya dengan triksnya
IZin copas sob..nice posting
info-nya baru nih..aku simpan nih (copas ah)
MAAANTAAAB PERLU DIIBA SOB
mang, saya salin jinis make baju blogger ah... hehehe...seiring obat gratong tos kapanggih
Hehehe.... selamat idul fitri juga kang...minal aidzin
keren ilmunya sob sukses selalu sob
mantap infonya
Siiiiiiip gan!! Tutorialnya
kasih ya infox ,,,link sobat dah q psg di blog aq....
Thanks yea tutorialnya, akhirnya aq sudah bisa buat judul posting berjalan....
Itu kode buat semua judul postingan atau gmana sob, sy g ngerti nich! Klo pengen salah satu judul postingan yang berjalannya gmana sob? Thnk's infonya.
Thanks Artikelnya gan..
makash artikelnya.. bagus sekali.
MaNtAb BGT gAN . . ThAnKZ yUaQz
sangat membantu, langsung praktekin ah..
WAH saya harus banyakbelajar ni
siip bagus pisan infonya gan ,, ntar di coba gann .......
hebat sob
follow back sob
wah kayaknya ane perlu coba ne
wah makasih om atas infonya
makasih gan info di posting-nya.
numpang nanya nih.
bagaimana cara mengubah warna gaget menjadi transparan sperti gaget subscribe blog kotak yang diisi email tidak bisa ikut tranparan di blog pemula.
silahkan berkunjung ke blog pemula
http://http://blogpertame.blogspot.com/
silahan tinggalkan komen di salah satu posting untuk memberi pencerahan.
kebtulan gan ada yang saya tanyain nih !
kalo cara merubah tampilan posting home dengan kotak-kotak atau tampilan auto read more nya kotak-kotak gimana tuh gan ?
Saya udah mencobanya gan tapi masih tetap belum bisa berjalan juga tu judul posting saya, kira2 apanya za yang masih kurang tepat?
tolong di bantu gan..! makasih..
Artikelnya sangat mantap mas, ijin coba skrip 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.