Read More (Jump Break) Tidak Berfungsi

Setelah sekian lama aku tak berblog aku tidak sedar pun Blogger telah 
punya 'Read More..' nya sendiri. Tahniah buat Blogger kerana mula mengambil perhatian akan keperluan-keperluan para blogger yang menggunakan platform Blogger. Mungkin artikel ini agak terlewat, tetapi memandangkan aku sendiri punya masalah dengan (telah diselesaikan) jump break ini maka kongsikanlah dengan rakan-rakan. Masalah ini berlaku kerana aku menggunakan customised template bukannya standard template.


Bagaimana untuk menggunakan pautan read more ini (standard template)?


Ada dua cara untuk meletakkan pautan "Read More" dalam blog post anda. 


1-Jika anda menggunakan post editor yang baru (ada pada Blogger in Draft, atau dengan mengaktifkannya di bahagian setting) anda akan nampak ikon "jump break" di ruangan atas sebelah kanan toolbar editor. Letakkan cursor diperenggan yang hendak di sembunyikan dan klik pada ikon "jump break" tersebut dan read more akan berfungsi.




Kedudukan "insert jump break"

2-Tetapi jika anda tidak mengaktifkan post editor yang baru atau tidak menggunakan Blogger in Draft, fungsi "jump break" ini masih boleh dibuat dengan menambahkan <!-- more --> pada perenggan yang dikehendaki.

Contoh cara meletakkan <!-- more -->.

Perkataan "Read More" boleh ditukar kepada perkataan yang anda sukai seperti "Baca Selanjutnya..", "Baca Lagi.." atau "Selebihnya.." dan lain-lain lagi dengan...

Masuk ke Layout dan edit di bahagian widget blog posts

Adakah 'read more' cara Blogger berfungsi pada customised template anda?

Bagi membolehkan read more ini berfungsi pada template anda, cari kod di bawah ini dengan masuk ke Layout kemudian klik Edit HTML jangan lupa tanda centang pada Expand Widget Templates.

Gunakan kaedah carian dan cari kod ini:

<b:if cond='data:post.hasJumpLink'>

Jika anda tidak menjumpainya, maka kod di bawah ini perlu ditambahkan jika mahu read more anda berfungsi. 


Caranya:


1-Cari kod <data:post.body/>


2-Di bawahnya sila letakkan kod ini

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </b:if >

3-Savekan template anda dan sepatutnya read more telah berfungsi


Bagaimana  menukar warna latar belakang perkataan read more?


1-Di bahagian CSS Cari kod </b:skin>


2-Letakkan kod ini di atasnya

.jump-link a {
background: #ffff00;
padding: 3px;
color: #fff;
}

Kod pada background adalah warna latar belakang dan kod pada color merupakan warna tulisan atau teks. Jika anda ada masalah dengan kod warna ini, sila klik SINI untuk rujukan.


Bagaimana menggantikan perkataan Read More dengan imej atau gambar?


Pada kod nombor 2 di atas sila gantikan kod <data:post.jumpText/> dengan URL imej anda seperti ini:

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><img src="URL-IMEJ-ANDA" border="0" alt="Alternative text" /></a> </div> </b:if >

 Sila gantikan URL-IMEJ-ANDA dengan URL imej yang sebenar.


Jangan lupa savekan template anda.




Salam....