Thursday, May 12, 2011

Blogger Read More Tutorial

Hari ni aku akan share tutorial berkenaan Read More. Blogger sudah pun ada feature read more ni, ataupun jump break . Feature ni sangat berguna kepada bloggers yang suka menulis panjang lebar, serta sebab-sebab lain yang berkenaan. Cuma klik dan semua dapat disembunyikan. ^^
Ada 3 part dalam turorial ni.
  1. Tukar text Read More
  2. Gunakan Butang sebagai Link
  3. Ubah kedudukan Link
Sebelum apa-apa, sila Download dulu template kamu. :)

First thing first
Pastikan template kamu ada kod seperti berikut;
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
CTRL+F, taip 'jumplink'

Jika tiada, Paste kod tersebut di bawah
<data:post.body/>
Sekarang sedia untuk customize Read More kamu ;)

Tukar Text Read More
Untuk tukar text, kamu ada 2 cara:
Melalui Page Element;
klik Edit pada kotak Blog Post dan tukar text Read More;


Melalui HTML;
Tukar kod yang di highlight merah berikut kepada Text anda
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
contoh;
<a expr:href='data:post.url + "#more"'>BACA SINI</a>
Extra; kamu juga boleh tukar fon, saiz Text serta warna text. Hanya perlu tambah kod berikut;
<p style='font:SaizFon NamaFon; color:Warna;'>BACA SINI</p>
tukar nilai text biru mengikut kehendak
contoh;
<a expr:href='data:post.url + "#more"'><p style='font:30px Impact; color:blue;'>BACA SINI</p></a>
Siap.

Tukar Text kepada Butang Read More
Untuk menggunakan butang sebagai ganti text, kamu perlu ada kod berikut di dalam template kamu;
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >
kod diatas akan memaparkan text Read More sebagai link, dan kamu perlu mengganti text tersebut dengan kod berikut;
<img border='0' src='URL GAMBAR KAMU'/>
contoh;
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img border='0' src='http://2.bp.blogspot.com/-jRIeeMz1nAo/TcuNoix6EUI/AAAAAAAAEQk/giAR22vL1mE/s1600/readmore.jpg'/></a>
</div>
</b:if >
sample butang read more:
(di godek dari website len, sori laae, gua tak sempat buat nii)

Ubah Kedudukan Link Read More
Kedudukan link Read More bergantung kepada format default dalam template. Kalau nak ubah ke kiri, kanan atau tengah, hanya perlu tambah sedikit kod.

Option pertama; tambah tag align='xxxxx' ke dalam tag div
contoh;
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link' align='xxxxx'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >
Option kedua; tambah kod berikut;
<p align="xxxxx">Read More</p>
contoh;
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="xxxxx">Read More</p></a>
</div>
</b:if >
nilai xxxxx adalah
  • right
  • left
  • center
Alternatif lain; tambah tag style='float:xxxx;' pada tag Div
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link' style='float:xxxx;'><a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >
alternatif ni akan buat butang/text Read more berada di sebelah kiri/kanan footer post macam bawah ni;

sebelah kanan
sebelah kiri
nilai xxxx adalah

  • right
  • left

Selamat Meng-edit

No comments:

Post a Comment

You can leave your backlinks: <a href="URL">Title</a>

W3Counter