Cara Mempersingkat Postingan Blog Dengan Readmore Bergambar
Thursday, 16 January 2014
Edit
Apa gunanya Readmore?
mungkin sahabat bertanya-tanya apa seh itu Readmore, Sedikit menjelaskan Readmore berkhasiat untuk mempersingkat isi postingan blog yang bertujuan untuk menunjukkan kenyaman dalam membaca bagi para reader. Readmore akan menampilkan sedikit bab dari isi postingan dan akan menyembunyikan isi postingan lainnya. Nantinya kalau para pembaca berminat untuk membaca selengkapnya maka hanya dengan mengklik aja, Tampilan keseluruhan postingan akan muncul.
Kalo bahasa Indonesianya, Readmore ini juga berarti Baca selengkapnya ataupun sejenisnya. Jika belum memilikinya sangat disarankan untuk menggunakannya. Selain menciptakan blog menjadi lebih tertata rapi, para pembaca juga sanggup melihat ulasan singkat perihal postingan yang dibentuk sehingga sangat cantik untuk diterpkan pada blog.
Contoh Readmore sanggup sahabat lihat pada blog ini.
Langsung aja, Ikuti Langkah-langkah [Tutorial] Cara mempersingkat postingan blog dengan Readmore :
1. Seperti biasa, Log in dahulu kepada akun blogger sahabat masing-masing
2. Kemudian masuk ke Dashbor => Template => EDIT HTML => Lanjutkan
(Alangkah baiknya kalau memback up template blog terlebih dahulu, kalau tidak tahu caranya baca di sini)
(Jangan lupa untuk mencentang Expand Template Widget)
3. Kemudian cari kode </head>
(Untuk mempermudah pencarian, Gunakan CTRL+F pada keyboard)
Lalu copy kode dibawah ini dan pastekan tepat diatas atau sebelum kode </head>
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430;summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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>
=============================================
=============================================
Keterangan :
var thumbnail_mode = "float" => Letak thumbnail berada di “float” kiri atau kalau sahabat tidak menginginkan demikian silahkan ganti dengan “no-float”.
summary_noimg = 250; => Jumlah huruf yang akan ditampilkan di posting tanpa menampilkan gambar postingan.
summary_img = 250; => Jumlah huruf yang akan ditampilkan di posting dengan menampikan gambar postingan.
img_thumb_height = 120; => Ukuran tinggi gambar dalam satuan pixel.
img_thumb_width = 120; => Ukuran Lebar gambar dalam satuan pixel.
<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;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> »»   </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
=============================================
Keterangan :
5. Lihatlah PRATINJAU terlebih dahulu, kalau sudah tidak terdapat kesalaha
Dan lihat hasilnya...Selamat mencoba dan biar berhasil...Demikian [Tutorial] Cara mempersingkat postingan blog dengan Readmore,Semoga bermanfaat... :-)