Cara Mudah Menambahkan Auto Readmore/Baca Selengkapnya (Readmore Otomatis) Pada Blogspot Versi 2

Auto Readmore adalah fitur yang akan mengotomatisasi pemenggalan continue reading atau pemotongan paragraf supaya lebih ringkas. Sesuai dengan namanya, auto readmore ini secara otomatis akan memotong paragraf posting diberanda. Hebatnya lg, auto readmore ini dilengkapi thumbnail gambar yang bisa ditampilkan ditepi paragraf. Tak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan, Disamping bisa mengatur jumlah karakter, thumbnail gambar pun tak ketinggalan juga dapat diatur seberapa panjang dan lebarnya. Hiperlink readmore juga dapat diatur letaknya, rata kiri, rata kanan maupun rata tengah dapat diterapkan. dan kata "Readmore" sendiri dapat diganti sesuai selera. Cara yang kedua hampir sama dengan yang pertama, cuman beda script sedikit. Berikut langkah-langkah dan kode scriptnya...

• Dari dasbor, pilih Rancangan - Edit HTML.

• Lakukan duplikasi template untuk jaga-jaga jika bermasalah.

• Beri tanda checklist (centrang) pada Expand Template Widget.

• Copy script berikut lalu letakkan (paste) di atas kode </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
</b:if>
</b:if>

Updates!: Apabila memakai trik diatas yang berwarna hijau saja halaman statis pasti ikut terpenggal seperti halaman depan, untuk itu silahkan pasang kode diatas yang saya kasih tanda Warna Biru agar halaman statis normal kembali.

------------------------------------------

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<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:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Kalo sudah silahkan klik preview kalau memang masih ragu-ragu lalu silahkan disimpan dan lihat hasilnya

Keterangan:

var thumbnail_mode = "float";  (kita dapat memutuskan apakah
letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti
dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan
di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)


Simpan dan lihat hasilnya . . .

Related Post: