21 May, 2010

Panduan Memasukkan "Jump Break"

Ada beberapa rakan blogawan bertanyakan tentang cara untuk memasukkan "Jump Break" ke dalam entri. Ini bertujuan supaya hanya sebahagian kandungan (biasanya 1 - 2 perenggan pertama) sahaja yang akan dipaparkan pada blog. Baki keseluruhan kandungan entri akan dipaparkan jika pembaca mengklik pada pautan "Read More".

Saya juga pada asalnya agak pening kepala untuk mencari penyelesaiannya. Beberapa blog yang memberikan tips dan tutorial juga saya jadikan rujukan. Akhirnya, Alhamdulillah dengan izin ALlah jua saya dapat menemui jawapannya.

Perlu diingat, kebanyakan rakan blogawan yang bertanyakan hal ini adalah mereka yang menggunakan tema blog daripada pihak ketiga. Tema sebegini dimuat turun daripada laman tema blog yang banyak terdapat di Internet, seterusnya dipasang pada blog mereka. Ini bermakna, untuk memasukkan "jump break" ada sedikit perubahan pada kod HTML tema perlu dilakukan.


Tutorial ini seterusnya merujuk kepada artikel dalam Blogger Help bertajuk Creating 'After the jump summaries' yang disediakan oleh pihak Blogger bagi rujukan blogawan. Gambar-gambar yang dipaparkan juga diambil daripada artikel tersebut. Terima kasih diucapkan kepada Blogger.com .

Langkah 1 - Ubah Suai Kod HTML

Disebabkan anda menggunakan tema blog yang diambil daripada tema pihak ketiga, sedikit kod tambahan perlu dimasukkan. Untuk melakukannya, buka tab Layout -> Edit HTML. Bagi memastikan tidak ada sebarang perkara tidak diingini terjadi, anda dinasihati untuk membuat backup dahulu kepada kod HTML sedia ada dengan mengklik pautan Download Full Template. Ini akan memuat turun kod HTML tema sekarang dan simpan untuk digunakan semula pada masa akan datang.

Selepas membuat backup, klik pada kotak semak Expand Widget Templates. Seterusnya, tekan kekunci pintasan Ctrl + F secara serentak untuk memaparkan kotak Search. Taipkan kata kunci di bawah dan tekan Enter.




Selepas anda menjumpai kod di atas, tampalkan kod HTML seterusnya ini betul-betul pada baris selepas kod yang di atas tadi :







Nota : Anda dinasihatkan untuk menyalin kod di atas daripada laman Blogger Help. Klik pada pautan ke artikel Blogger Help di atas.

Selepas menampalkannya, klik pada butang Save.

Langkah 2 - Menentukan lokasi Jump Break

Selepas anda selesai menaip keseluruhan kandungan entri anda, klik pada tab Edit HTML. Di dalam tab ini tentukanlah kedudukan "Jump Break". Kandungan yang berada sebelum "Jump Break" akan dipaparkan pada entri manakala kandungan selepas "Jump Break" pula akan disembunyikan dan hanya akan dipaparkan jika pembaca mengklik pada pautan "Read More".

Untuk tujuan ini masukkan kod "Jump Break" seperti dalam gambar rajah di bawah :









Selepas memasukkan kod "Jump Break" seperti di atas, anda sudah sedia untuk menerbitkan entri tersebut. Klik butang Publish Post dan pastikan adanya pautan "Read More" padanya.

Langkah 3 - Menukar Teks Read More

Anda boleh menukar teks "Read More" kepada teks yang anda sukai. Untuk melakukannya, klik pada tab Layout -> Page Elements. Seterusya, klik Edit pada widget Blog Posts dan tukarkan teks pada Post page link text seperti gambar rajah di bawah :









Tahniah!!! Anda telah berjaya membuat "Jump Break". Selamat Mencuba.

13 maklum balas:

penjejak maya said...

salam,

info yang baik..

smtabi'in said...

terima kasih atas tunjuk ajarnya.... sudah cuba 2 tiga kali tapi masih tak menjadi... di mana agaknya yang tak kena???

Hisyam Muhibah said...

penjejak maya - semoga bermanafaat

tabiin - mungkin pada kod HTML yang tersalah taip.. enta copy kod dari laman Blogger Help tu lebih selamat daripada taip sendiri kod yang ada dalam entri ni.. cuba lagi..

Nur Yani said...

SALAM...DAH BUAT DAN BERJAYA..TERIMA KASIH LAH YER...SEMOGA ILMU-ILMU LAIN YANG BERMANFAAAT TU DAPAT DIKONGSIKAN BERSAMA...

Hisyam Muhibah said...

Yani -- tahniah.. silalah kongsikan kepada orang lain pula ilmu yg sikit ni..

smtabi'in said...

terima kasih tuan... nampaknya sudah membuahkan hasil... hehhehe

Hisyam Muhibah said...

Tabiin -- tahniah.. pastikan dalam kod HTML, kod tu jangan jauh sangat.. nanti ada ruang kosong yang agak besar..

tip : buat macam ni saja

teks sebelum.....

teks selepas....

Hisyam Muhibah said...

haha tak keluar pulak kod tu.. kod tu mcam ni :

teks sebelum...

teks selepas...

Hisyam Muhibah said...

hahaha taka keluar jugak.. takpelah, yg penting semua anda sudah berjaya membuatnya.. haha

yunique0307 said...

waaaah!! en hisyam.. thank u... dah buat n dah boleh... hee~ :D

Hisyam Muhibah said...

Naqiah -- tahniah!! kalau perlukan info yang lain, sila kongsikan..

Ummu Tasneem said...

salam.. sgt bermanafaat.. thks.. sy dah berjaya.. itupun atas bantuan rakan sy..

Hisyam Muhibah said...

Ummu Tasneem - Tahniah, usaha tangga jaya.. InsyaAllah, kita berkongsi lagi ilmu..

Post a Comment

Powered by Blogger.