16.8.11

Berbagai Macam Cara Membuat "Read More"

Assalamualaikum.
(*Gambar gak ada nyambungnya sama tutor)

Berdasarkan permintaan dari mba Tie bukan tea alias teh. Kali ini gue pengen share tutor tentang cara bikin "read more" atau "baca selengkapnya" di blog.
Fungsinya sudah jelas banget, biar postingandi beranda  terpotong sehingga gak membuat blog terlalu berat apabila dibuka. Selain itu tentu saja pembaca akan merasa penasaran sehingga doi akan merasa perlu untuk membaca postingan secara fullpost (*Itung-itung meningkatkan traffic di blog kan). Bagi yang newbie atau pun yang udah senior di dunia blogger silakan baca-baca, sapa tau ada yang mau coba praktekin atau koreksi tutor ini karena pada dasarnya gue bkin ni tutor hanya dengan menggunakan jari dan bukan linggis.
Dalam dunia perdukunan blogger, ada tiga cara membuat read more ini di postingan blog. Dimulai dari cara yang paling simpel sampai cara yang lumayan ribet. But, di tutor kali ini gue gak bakal ngebahas cara yang ribet itu soalnya sudah ketinggalan banget. Oke, tanpa banyak basa-basi lagi dan berhubung gue masih puasa langsung aja ke tutornya.


>> Auto "Read More"
Read More yang ini akan terpasang secara otomatis di postingan ketika lo sukses memposting postingan tersebut. Yup semua postingan tanpa terkecuali. Oiya, sebelum memualai ada syaratnya loh, blog lo gak pernah dipasangin Read More versi lama. Tapi kalo udah tlanjur basah yaudah mandi sekalian lo harus kembalikan kode html-nya ke bentuk semula. Caranya cari kode di bawah ini :
<div class='post-header-line-1'/>
<div class='post-body'>

<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'>Readmore</a>
</b:if>

<div style='clear: both;'/>
 
Terus hapus yang berwarna merah. Kalau gak ketemu lo sesuaiin aja soalnya biasanya beda template beda juga kodenya. Nah setelah itu,  copas kode ini di bawah tag </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 type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>


Keterangannya :
var thumbnail_mode = "float"; (thumbnail/kata read more-nya lo letakin di float kiri, kalo gak suka lo bisa ganti sama no-float)
summary_noimg = 250; (Angka 250 menyatakan berapa banyak karakter yang akan dimunculkan sebelum "read more"nya muncul untuk postingan tanpa gambar)
summary_img = 250; (
Angka 250 menyatakan berapa banyak karakter yang akan dimunculkan sebelum "read more"nya muncul untuk postingan dengan gambar)
img_thumb_height = 120; (tinggi thumbnail dalam piksel)
img_thumb_width = 120; (lebar thumbnail dalam piksel).



Nah, kalo yang di atas udah kelar lanjut ke next step. Centang "Expand Template Widget" di pojok kanan atas edit template. Trus cari kode <data:post.body/> . Pake ctrl + f biar pencariannya lebih mudah. Kalo udah ketemu ganti kode <data:post.body/> dengan kode di bawah 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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Cobadeh berkreasi ganti READ MORE nya dengan kata lain seperti "baca selengkapnya", "find the missing part" atau semacamnya soalnya gue blom eksperimen.
Save templatenya. BERES...!!!

>> Read More yang lebih simpel
Jenis read more yang ini pada dasarnya lebih simpel karena sudah tersedia tool khususnya pada saat memposting artikel. Cara menggunakannya cukup menuslis postingan seperti biasa. Nah, kalo postingannya udah beres, arahkan kursor ke bagian postingan yang ingin dipotong, trus di bagian toolbar postingan pilih "insert jump break". TADAAA tulisan pun terpotong. Tulisan bagian atas yang akan muncul di postingan "Beranda" dan tulisan di bagian bawah merupakan tulisan yang muncul apabila postingan dibaca fullpost.
Untuk lebih jelasnya perhatikan gambar ini :
Semoga bermanfaat ....

5 komentar:

  1. duh
    kalo buat read more otomatis yang gak perlu di atur (kayak gw) kan bisa ngerusak laman
    ada cara tertentunya gak buat ngobatin?
    ceileh

    thanks bang nice info :3

    BalasHapus
  2. gue lebih sering pake jump break :3

    BalasHapus
  3. @Fathan : keknya itu dia penyakitnya klo otomatis, yg di laman juga kena otomatis. Mank di toolbar postingannya gak ada jump break ya...?

    @Zazului : iya bener, ngapain mo repot-repot kalo ada yg praktis...
    \(‾▿‾\)\(‾▿‾)/(/‾▿‾)/

    BalasHapus
  4. tq banget infonya... mau langsung dicoba...:P

    BalasHapus

Ocehan gue :