Fungsi Read More adalah untuk meminimalisasi tampilan pada
artikel/postingan yang terlihat pada halaman utama blog. cara membuatnya
sangat mudah seperti pada artikel di bawah ini :
- Cara Membuat Read More di Blog
- Cara Membuat Read More + Judul Artikel
Namun
pada fungsi read more kali ini sedikit berbeda dan lebih modern dengan
memudahkan kita untuk tidak lagi membatasi artikel dengan panggilan:
............................................
....<span class="fullpost">
............................................
</span>
dimana
kode ini biasanya kita tanamkan secara manual kedalam halaman postingan
yang ada di template posting. Untuk versi Read More Otomatis kali ini
akan lebih mudah dan simple, karena fungsi pemenggalan kalimat langsung
bekerja secara otomatis tanpa harus menambahkan kode seperti diatas.
seperti yang di pakai oleh Blog Trik Tips Tutorial ini.
hebatnya
lagi, fungsi Read More ini mampu menampilkan image pertama dalam
postingan dan mem-float image tersebut di awal paragraf awal, meskipun
gambar yang kita letakan berada di tengah atau akhir postingan. Mungki
lebih nyaman kita sebut saja dengan fasilitas image thumbnail.
Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter.
1. jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan
2, jumlah karakter tanpa image. apabila masih bingung langsung aja kita bahas dengan praktek.
Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang
berwarna biru dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)
kode yang kita pelajari sebelumnya tampilannya seperti di bawah ini :
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More.. »»</a>
</b:if>
Mari Kita Lanjutkan
Tutorial Cara Membuat Read More Otomatis.Pertama, Kita langsung menuju ke kolom
EDIT HTML, Cari kode
</head>
kemudian letakan script dibawah ini di atas atau dibawah kode </head>.
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag
= '<span style="float:left; padding:0px 10px 5px 0px;"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Kalau sudah jangan lupa disimpan terlebih dahulu.
Kedua, Masih pada halaman
EDIT HTML, Beri tanda centang pada
"Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :
<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:right'>
<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>
Tulisan yang berwarna
coklat itu menandakan
read more + judul posting jika kita tidak menghendakinya tinggal di hapus.
dan tulisan
right yang berwarna biru menandakan letak daripada tulisan read more tersebut.
jika
left : berarti berada di sebelah kiri. tetapi jika kita ganti menjadi
right : berarti berada di sebelah kanan (seperti pada contoh gambar di atas)
silahkan disimpan dan lihat hasilnya :)
Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (
float) kiri atau jika tidak silahkan ganti dengan
(no-float)
summary_noimg = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)
Semoga Berhasil.
Demikianlah artikel tentang Cara Membuat Read More Otomatis
Kembali ke Beranda Blog Trik Tips Tutorial
Semoga Bermanfaat..
Cara Membuat Efek Bintang ( Sprinkle ) Pada Kursor – Pastinya sobat blogger sudah sering melihat tampilan kursor di blog lain dengan efek bintang yang bertaburan (sprinkle) dan berwarna-warni bukan ? Memang efek bintang bertaburan (sprinkle) pada kursor bisa mempercantik penampilan blog sobat, namun disisi lain juga punya kelemahan yaitu akan memperlambat loading blog akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo memang sobat pengen tampilan blognya keren, silahkan saja untuk mencoba membuat efek bintang bertaburan (sprinkle) ini di blognya.
