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

---

si athime buka blog baru! selimutkoyak.wordpress.com! singgah k! (dia FAIL WP!!)

---