Auto Read More di Halaman Depan Web/Blogger

Description: Cara Membuat Ringkasan Posting ( Auto Read More ), Summary, atau Snippet plus Gambar Thumbnail di Halaman Depan Blog dengan dan Tanpa Java Script.

Cara membuat Auto Read More disertai gambar (thumbnail) di halaman depan blog (homepage) ini sudah saya share, dan hasilnya pun memuaskan.

Cara ini sudah di terapkan dalam banyak modifikasi template blog.

Tips ini untuk anda yang menggunakan template blog yang belum menampilkan ringkasan posting di halaman depan alias tampilannya sama dengan single post/single page.

Umumnya, template blog sekarang sudah otomatis menggunakan auto read more atau menampilkan ringkasan posting di halaman depan blog.

Auto Readmore Pake JavaScript & Tanpa JavaScript

Ada dua cara membuat Auto Read More di halaman depan blog menggunakan JavaScript. Tips, kode, atau script Membuat Auto Read More di Halaman Depan Blog menggunakan JavaScript ini saya kutip dari Help Blogger.

1. Klik "Template" > "Edit HTML"
2. Cari (CTRL+F) kode <data:post.body/>

Jika ada lebih dari dua <data:post.body/>, pilih kedua . Jika gagal, pilih yang ke tiga atau pertama dst. Coba saja satu-satu hingga berhasil.

3. Replace atau ganti kode <data:post.body/> tersebut dengan kode di bawah ini:

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

<b:if cond='data:blog.pageType != &quot;static_page&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='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>

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

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

4. Cari kode </head> dan COPAS kode berikut ini tepat di atasnya

 <script type='text/javascript'>

posts_no_thumb_sum = 490;

posts_thumb_sum = 400;

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 = posts_no_thumb_sum;

if(img.length>=1) {

imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = posts_thumb_sum;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

5. Save Template

Catatan:
1. Anda bisa mengganti ukuran gambar /thumbnail dengan mengubah angka 120 menjadi lebih kecil atau lebih besar.

2. Anda juga bisa mengubah jumlah/panjang karakter dengan mengganti angka 490 (jika postinganya tanpa foto) dan angaka 400 (jika postingnya ada foto).

Membuat Auto Read More di Halaman Depan Blog #2 (Tanpa Javascript)

Cara kedua ini tanpa script, hanya menggunakan CSS/HTML sehingga disebut "Fast Loading Auto Readmore". meski cuma beda sedikit sama yang JavaScript.

1. Template > Edit HTML
2. Copy & Paste kode berikut ini di atas kode ]]></b:skin>

.thumbnail-post {width:140px;height:80px;float:left;margin:0px 10px 0px 0px;padding-right:15px}

3. Ganti kode <data:post.body/> dengan kode berikut ini:

<!-- Auto Readmore Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilrJn-oggTrpL_nHB3CVWi6o932JydfCyZbMuFMOR2CuX_9u9NHd-mHRuZu2tpFfwJ-_fnJoIKn7x5gBmB01viJEWEUV6BH_-vRkp0ilj-1fBLzToqG1myYqhPBs70bY6RhGTIRGT3IMU/s220-Ic42/noimage.png'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div>
<div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Read More</a> </div> </b:if> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> </b:if>
<!--Auto Readmore Codes End-->

Keterangan:

• Jika ada dua kode <data:post.body/> di template blog anda, ganti kode yang ke dua.
• Ukuran gambar thumbnail (140px/80px) bisa di ubah menjadi lebih besar atau kecil.
• Kode warna Orange adalah URL Gambar thumbnail Default. Bisa di ganti dengan gambar sendiri.
• Kode yang warna biru adalah teks Read More yang bisa di ubah menjadi Baca Selengkapnya atau bisa juga di hapus saja jika tidak ingin ada tulisan Readmore.

Bagaimana jika mau tanpa gambar dan tanpa tombol "readmore" dsb? Tutorial lebih lengkap, bisa di simak di blog "wong" Vietnam, Duypham. Pakai saja Google Translate!

Demikian Cara Membuat Ringkasan Posting (Auto Read More) di Halaman Depan Blog dengan & Tanpa JavaScript.

Untuk mendukung berjalan nya blog ini, anda bsa Like dan Share FP saya. Terima Kasih.