Read More terbaru ni canggih sikit, kerana pemotongan entry dilakukan secara automatik tanpa perlu memasukkan kod. Dan lagi, Read More ini boleh menampilkan gambar pertama yang ada dalam entri tu diawal entri, walaupun gambar tersebut berada di tengah atau dihujung. Ok tak nak terang banyak2, kita cuba terus.. Ini contoh Auto Readmore yang Ana buat kat satu blog.
Sebelum kita mula, pada yang dah guna Read More sebelum ni, pastikan remove kod2nya terlebih dahulu. Kalau rasa nak pakai Auto Read More ni la. Kalau malas xyahla.
1. Cara Membuat Read More
2. Cara Membuat Read More v2
i. Ok ini caranya. Masuk ke Edit HTML. Tanda pada kotak Expand Widget Template yer.
ii. Tambahkan kod dibawah sebelum kod </head>.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script src='http://www.geocities.com/almansuqie/autoreadmore.js' type='text/javascript'/>
iii. Keterangan kod diatas. Kod2 merah boleh diubah ikut selera masing2.
var thumbnail_mode = "float"; (Kedudukan gambar thumbnail.("float") disebelah kiri. Kalau xmau ganti dengan ("no-float").
summary_noimg = 250; (Jumlah huruf yang ingin ditampilkan tanpa gambar thumbnail.)
summary_img = 250; (Jumlah huruf yang ingin ditampilkan beserta gambar thumbnail.)
img_thumb_height = 120; (Tinggi Gambar)
img_thumb_width = 120; (Lebar Gambar)
iv. Seterusnya cari kod berikut. Gunakan Ctrl+f untuk lebih cepat.
<data:post.body/>
v. Dah jumpa? Gantikan/Replace dengan kod dibawah.
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
vi. Tulisan READ MORE - diatas boleh diubah. Nak tulis baca lagi ke, ape ke, silakan. Kalau xnak ade tajuk lepas tulisan Read More tu, buang kod ini <data:post.title/>.
vii. Boleh preview dan lihat hasilnya. Kalau dah menjadi klik tombol Save tu.
Selamat Mencuba.
Sumber: o-om.com
Tidak ada komentar:
Posting Komentar