Read more atau baca selengkapnya bertujuan untuk menghemat tampilan postingan pada halaman beranda (home) weblog, hingga tidak memanjang ke bawah. Apalagi jika jumlah postingan yang ditampilkan cukup panjang kali lebar dengan jumlah over size, dijamin akan capek deh menggulung roll mouse sampai jari telunjuk pada kapalan.
Pada pembahasan oprek blog-ngesot kali ini akan mengulas cara membuat read more otomatis, tanpa menggunakan javascript eksternal di kolom entri baru yang fungsinya untuk memotong atau memperpendek tampilan di halaman utama. Yakni dengan cara sedikit melakukan modifikasi pada kode html di template, maka secara otomatis tampilan utama (kolom postingan) blog sudah terpasang fasilitasi ini.
Okok deh lanjut ke tajuk utama ORd Channel, untuk contoh hasil read more yang dimaksud adalah sesuai dengan tampilan blog ini. Langkah pembuatannya sebagai berikut.
Okok deh lanjut ke tajuk utama ORd Channel, untuk contoh hasil read more yang dimaksud adalah sesuai dengan tampilan blog ini. Langkah pembuatannya sebagai berikut.
1. Jangan lupa masuk ke akun blogger terlebih dulu.
2. Pilih Rancangan, klik Edit HTML. Pada kotak kecil Expand Template Widget diberi tanda centang. Sekedar catatan, sebelum melakukan proses modifikasi ada baiknya memback-up template terlebih dulu, dengan cara di download dan simpan rapi di komputer anda. Bertujuan agar ketika terjadi kegagalan maka bisa kembali ke template semula.
3. Sambil menunggu anda mendownload template, saya nyalakan dulu sebatang rokok putih rendah nikotin dan nyeruput kopi mix tanpa ampas. Bagaimana, sudah selesai mendownloadnya? Baiklah saya lanjutkan. Adalah mencari kode </head>.
Untuk mempercepat proses pencarian, gunakan kotak pencarian, dengan cara menekan tuts keyboard Ctrl+F. Taruh kode di bawah ini, tepat di atas atau sebelum kode </head>.
var thumbnail_mode = "float" ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 100;
img_thumb_width = 100;
</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>
4. Selanjutnya cari kode <data:post.body/> lalu hapus kode tersebut, dan gantikan dengan kode di bawah ini. Jika ada 2 kode <data:post.body/> maka yang dihapus adalah kode yang pertama.
<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'>baca selengkapnya >> <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<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'>baca selengkapnya >> <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
5. Jika semua langkah telah dilakukan dengan benar, selanjutnya adalah melakukan penyimpanan template. Yakni dengan menekan tombol Simpan Template. Dengan demikian berarti proses pembuatan read more otomatis sudah selesai, tanpa harus ribet melakukan penambahan javascript tertentu di setiap entri baru ketika akan memposting suatu artikel.
Keterangan :
(a) summary_noimg = 200; adalah angka menunjukkan jumlah karaktek (huruf) yang tampil dalam postingan tanpa gambar, ketika suatu halaman belum dibuka sepenuhnya. Sedangkan summary_img = 200; adalah jumlah karakter dengan artikel bergambar.
(b) img_thumb_height = 100; adalah tinggi gambar yang ditampilkan, sedangkan img_thumb_width = 100; adalah lebar gambar.
Nah, kesemua angka-angka tersebut bisa diatur sendiri sesuai selera, kondisi tersebut adalah tampilan pada saat halaman posting masih dalam posisi read more. Atau dengan kata lain, ketika belum membuka satu halaman penuh pada suatu postingan.
(c) baca selengkapnya >> adalah keterangan read more, bisa diganti dengan bahasa kesukaan anda. Misalnya dengan kata-kata read more, atau monggo diklik, atau selengkapnya klik di sini, atau ...... terserah deh.
Selamat mencoba dan silahkan cek hasilnya, semoga memuaskan dan tidak mengalami kendala berarti.
Keterangan :
(a) summary_noimg = 200; adalah angka menunjukkan jumlah karaktek (huruf) yang tampil dalam postingan tanpa gambar, ketika suatu halaman belum dibuka sepenuhnya. Sedangkan summary_img = 200; adalah jumlah karakter dengan artikel bergambar.
(b) img_thumb_height = 100; adalah tinggi gambar yang ditampilkan, sedangkan img_thumb_width = 100; adalah lebar gambar.
Nah, kesemua angka-angka tersebut bisa diatur sendiri sesuai selera, kondisi tersebut adalah tampilan pada saat halaman posting masih dalam posisi read more. Atau dengan kata lain, ketika belum membuka satu halaman penuh pada suatu postingan.
(c) baca selengkapnya >> adalah keterangan read more, bisa diganti dengan bahasa kesukaan anda. Misalnya dengan kata-kata read more, atau monggo diklik, atau selengkapnya klik di sini, atau ...... terserah deh.
Selamat mencoba dan silahkan cek hasilnya, semoga memuaskan dan tidak mengalami kendala berarti.
0 komentar:
Posting Komentar