[Tutorial] Cara mempersingkat postingan blog dengan Readmore bergambar

-[Tutorial]  Cara mempersingkat postingan blog dengan Readmore bergambar

Salam sobat blogger...
Apa kabar neh?

Sudah pasang Permalink belum, jika belum pasang dulu permalinknya di sini. Tidak kalah pentingnya juga untuk memasang Breadcrumbs atau menu navigasi di blognya. Untuk keterangan masing-masing langsung aja ke TKP. Namun pada kesempatan kali ini, kita tidak membahas mengenai itu tetapi akan mengulas [Tutorial]  Cara mempersingkat postingan blog dengan Readmore .

http://www.segenggam-harapan.com/2012/08/tutorial-cara-mempersingkat-postingan.html

Yupts.... Apa gunanya Readmore?
mungkin sobat bertanya-tanya apa seh itu Readmore, Sedikit menjelaskan Readmore berguna untuk mempersingkat isi postingan blog yang bertujuan untuk memberikan kenyaman dalam membaca bagi para reader. Readmore akan menampilkan sedikit bagian dari isi postingan dan akan menyembunyikan isi postingan lainnya. Nantinya jika 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 membuat blog  menjadi lebih tertata rapi, para pembaca juga dapat melihat ulasan singkat tentang postingan yang dibuat sehingga sangat bagus untuk diterpkan pada blog.
Contoh Readmore dapat sobat 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 sobat masing-masing



2. Kemudian masuk ke Dashbor => Template => EDIT HTML => Lanjutkan

(Alangkah baiknya jika memback up template blog terlebih dahulu, jika 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 = &quot;no-float&quot; ; 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 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.



4. Setelah itu, cari kode <data:post.body/> dan gantikan kode <data:post.body/> dengan kode dibawah ini



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

=============================================
Keterangan :

Sobat juga dapat menggantikan tulisan readmore   dengan tulisan lain seperti "Baca selengkapnya" .


5. Lihatlah PRATINJAU terlebih dahulu, jika sudah tidak terdapat kesalahan barulah sobat bisa menyimpan template dengan mengklik SAVE.

Dan lihat hasilnya...
Selamat mencoba dan semoga berhasil...
Demikian [Tutorial]  Cara mempersingkat postingan blog dengan Readmore,
Semoga bermanfaat... :-)

Share this

Related Posts

Previous
Next Post »

13 comments

Write comments
7 Desember 2012 05.58 delete

@Ferry Nurdiansyah Sama-sama, Terima kasih telah berkunjung sob, :)

Reply
avatar
21 Maret 2013 15.05 delete

mantap gan terimakasih, izin copas ya gan buat postingan di blog baru saya

Reply
avatar
21 Maret 2013 15.06 delete

wah mantap ga terimakasih tipsnya, izin copas scriptnya gan buat posting di blog baru ane

Reply
avatar
8 April 2013 20.27 delete

makasih sobb.. ini post berguna banget.. makasihh.. :D

Reply
avatar
9 November 2013 00.59 delete

kok gabisa yah sudah saya coba, apakah jumlah artikel mempengaruhi?
mohon panduannya thx.

Reply
avatar
9 November 2013 06.45 delete

Di bagian mana yang tidak bisa? :-?

Reply
avatar
17 November 2013 05.49 delete

punyaku malah terjadi kesalah kak, mohon bantuannya (p)

Reply
avatar
17 November 2013 08.01 delete

Saya sudah menerapkan semua langkah2nya tapi gak ada hasil mas

Reply
avatar
19 November 2013 07.36 delete

Silahkan gan... tapi jangan lupa kasih sumber ya.. :D

Reply
avatar
19 November 2013 07.37 delete

Sama-sama... silahkan baca yang lainnya ya.. :) :>)

Reply
avatar
19 November 2013 07.39 delete

Maaf baru sempat online...
kesalahannya gimana? readmorenya gak muncul? atau bagaimana?

Reply
avatar
19 November 2013 07.41 delete

Ada beberapa template yang tidak dapat digunakan, biasanya template terbaru. karena tutorial ini sudah lama dan digunakan untuk template jenis lama. Bagian mana yg gak bisa nya? atau tidak berpengaruh apa-apa ya?

Reply
avatar

Berkomentar lah dengan yang sopan yang tidak mengandung unsur SARA, PORNOGRAFI, Dan TIDAK diperkenankan untuk PROMOSI selain Persetujuan dari ADMIN. Jika di lakukan, Maaf komentar akan DI HAPUS.

Untuk menggunakan Emoticon Komentar, Klik Emoticon yang akan di pasang. Akan muncul kode emoticonnya. Masukkan itu pada saat berkomentar. Terima Kasih
EmoticonEmoticon