Cara Meringkas Halaman Posting pada Blogg

Awal Saya ngeblogg ini banyak mengalami kesulitan dan rasanya menaik-nurunkan scroll itu cukup melelahkan. Akibat Postingan terlalu panjang sehingga kadang bisa membuat Pengunjung merasa bosan. Saya mencari cara untuk membiarkan Pengunjung merasa nyaman dengan blogg ini. 

Nah, berikut Saya sajikan Cara Meringkas Postingan Blogg secara cepat dan mudah ^.^

semoga sobat semua bisa memahami dan mengikuti nya.

Langkah - Langkah :

1. Pastikan Sobat telah Log in E-mail untuk mengakses laman blogger sobat

2. Klik "Template" dan Pilih "Edit HTML"

3. Cari Kode Script </head> dengan menekan CTRL+F  (menemukan) akan muncul kotak di ujung kanan atas.

4. Pastekan Kode Script ini di atas kode </head> yang dicari tadi.

<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[

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>

5. Selanjutnya, Sobat cari lagi kode <data:post.body/> dengan menekan CTRL+F dan GANTI Kode <data:post.body/> dengan script 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:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 

6. Jika ragu hasil editan Script kocar-kacir sobat bisa memilih Pratinjau/Melihat hasil perubahan. Dan Jika hasilnya sesuai maka sobat bisa langsung menyimpan nya saja. 

*NOTE :

1. summary_noimg merupakan jumlah karakter yang ditampilkan tanpa menggunakan gambar dalam postingan blog.

2. summary_img merupakan jumlah karakter yang ditampilkan ketika dalam postingan blog terdapat gambar.

3. img_thumb_height merupakan tinggi gambar yang ditampilkan.

4. img_thumb_width merupakan lebar gambar yang ditampilkan.

5. Tulisan “READ MORE” dapat diganti sesuai keinginan kita, misalnya diganti dengan “Baca selengkapnya, Continue Reading, Lanjutkan, dsb"

6. Jika belum berhasil, coba sobat perhatikan Unsur Kode Script <data:post.body/> yang harus diganti/rubah nomor 5 dengan script diatas karena hasil penemuan (Ctrl+F) merujuk 1 kalimat aja, perhatikan laman HTML dari atas sampai bawah. 

Selamat Mencoba dan Berkreasi, semoga berhasil dan suka ^.^