Cara Mempersingkat Postingan Artikel Blog Dengan Readmore

Cara Mempersingkat Postingan Artikel Blog dengan Readmore - Cara Rosyid kali ini akan membahas tentang Cara Mempersingkat Postingan Artikel Blog dengan Readmore  Walaupun sudah banyak yang membahas cara memasang Readmore (Baca Selengkapnya) untuk mempersingkat Postingan Blog, tapi tidak ada salahnya saya bahas di sini. Memang secara default fasiltas read more ini tidak disediakan oleh blogger tapi bisa kita siasati dengan menambahkan sedikit kode HTML ke dalam template kita.

Fungsi Read More juga mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. bisa disebut dengan fasilitas image thumbnail bisa diliat di blog ini.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.

Untuk lebih jelasnya langsung kita praktik, Ok?

Baca Ini ~> Saya ingat kan kepada sobat,,,, copy dulu template sobat karena jika ada apa-apa saya tak ingin tau lho !!! langsung saja ikuti langkah langkah Cara Mempersingkat Post Blog dengan Readmore

Berikut ini Langkah-langkahnya :

1. Pertama login ke blogger.com, pilih Template, kemudian masuk ke Edit HTML.

Pada halaman Edit HTML, Cari kode </head> untuk memudahkan pencarian tekan tombol  Ctrl+F di keyboard sobat. Kemudian letakan script berikut tepat di atas 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 : kata di bawah ini berada di script paling atas jika anda memang mau menggantinya

var thumbnail_mode = "float" => Letak thumbnail berada di “float” kiri atau jika sobat tidak menginginkan demikian silahkan ganti dengan “no-float”.
summary_noimg = 250;  => Jumlah karakter yang akan ditampilkan di posting tanpa menampilkan gambar postingan.

summary_img = 250;   =>  Jumlah karakter 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.

2. Masih pada halaman Edit HTML, lalu cari kode <data:post.body/> Kalo sudah, ganti kode <data:post.body/> dengan semua kode 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: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 : 
- Jika ada 2 kata <data:post.body/> silahkan sobat ganti kedua-duanya semua atau jika ada 3 kata ya ganti saja ketiga-tiganya semua... ingat jika tidak berhasil anda bisa memasang kembali template blog sobat yg sudah di simpan..
- Sobat juga dapat menggantikan tulisan readmore   dengan tulisan lain seperti "Baca selengkapnya" atau apalah.

3. langkah terakhir klik simpan dan lihat hasilnya.
 Selamat Mencoba..