<marquee direction="left">Tips Cara Membuat Read More Bentuk Gambar dan Otomatis di Blog</marquee>

Tips Cara Membuat Read More Bentuk Gambar dan Otomatis di Blog

Posted by : ALFIAN AJI WAHYUDI Sabtu, 18 Mei 2013

Pernahkah anda melihat sebuah situs yang artikelnya seperti diringkas, kemudian diisi dengan keterangan read more/selengkapnya? Terlihat lebih menarik bukan ?

Ada beberapa manfaat kenapa perlu adanya ringkasan seperti ini:

Pertama, artikel dan tampilan blog akan terlihat lebih menarik. Ini penting agar pengunjung memberikan kesan positif dan beranggapan bahwa pemilik blog adalah seorang blogger yang profesional dan layak untuk selalau dikunjungi.

Kedua, menghemat ruang. Ketika kita memberikan sejumlah ruang di halaman utama blog kita, kemudian kita membatasi jumlah postingan yang bisa dimunculkan di halaman tersebut, maka sangat penting untuk meringkas masing-masing artikel. Kenapa ? Agar pembaca tidak harus membaca satu persatu artikel untuk mengetahui semua artikel yang ada di halaman utama. Sehingga ini bisa memberikan kemudahan bagi pengunjung, karena tidak harus repot-repot melihat sampai jauh ke bawah untuk mengetahui artikel apa saja yang ditulis pemilik blog di halaman utama.

Bagaimana cara membuat read more secara otomatis ?

Langkah Pertama

Masuk ke blog anda

Langkah Kedua

Klik templete

Langkah Ketiga

Edit HTML (jangan lupa centang Expand Widget Templete)

Langkah Keempat

Temukan (Ctrl + F) tag </head>, setelah itu letakan kode script berikut tepat diatasnya :

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>

Langkah Kelima A

Membuat read more bentuk gambar

Temukan (Ctrl + F) tag <data:post.body/> atau <p><data:post.body/> </p> kemudian gantilah tag tersebut dengan kode script berikut.

<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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://i1339.photobucket.com/albums/o719/nym_artopraph/Tombol%20WEb/buttton10_zps0ff4b929.png'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>

Langkah Kelima B

Membuat read more otomatis

Temukan (Ctrl + F)tag <data:post.body/> atau <p><data:post.body/></p> kemudian gantilah tag tersebut dengan kode script berikut.

<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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Langkah Keenam

Kemudian save dan lihat hasilnya!

NOTE :

Untuk yang terlanjur menggunakan read more secara manual, tinggal hapus kode:

<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/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Demikianlah sedikit tips cara membuat read more secara otomatis baik menggunakan gambar atau pun secara otomatis dengan tulisan. Semoga tips ini bisa bermanfaat buat anda.

Salam