Cara Membuat Auto Read More atau Ringkasan Posting, Summary, atau Snippet Post plus Gambar Thumbnail di Halaman Depan Blog dengan & Tanpa JavaScript.


 atau Snippet Post plus Gambar Thumbnail di Halaman Depan Blog dengan  Cara Membuat Auto Read More di Halaman Depan Blog
CARA menciptakan Auto Read More disertai gambar (thumbnail) di halaman depan blog (homepage) ini sudah berkali-kali CB terapkan, dan berhasil.

Cara ini sudah diterapkan dalam banyak modifikasi template blog.

Tips ini untuk Anda yang memakai template bawaan blogger (default blogger templates), ibarat template simple, yang belum menampilkan ringkasan posting di halaman depan alias tampilannya sama dengan single post/single page.

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

Kode Auto Read More Terbaru

Untuk menciptakan auto read more atau menampilkan judul, gambar, dan snippet (kutipan bab awal posting) cukup dengan memakai isyarat terbaru berikut ini, sudah seo friendly.

1. Simpan isyarat berikut ini di atas isyarat ]]></b:skin>

.thumbnail-post {width:100px !important; height:100px !important;float:left;margin:0px 10px 0px 0px;}

2. Hapus dan ganti isyarat <data:post.body/> yang kedua dengan isyarat berikut ini:

<!-- Auto Read More 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:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' src='https://lh3.googleusercontent.com/-qJ5VVlQsLfY/VOBUcH3BV_I/AAAAAAAAGsA/MkUD8LKAhTE/s220-Ic42/noimage.png'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </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 Read More end -->

Selesai! 
Save tempate Anda.

Auto Readmore Pake JavaScript & Tanpa JS

Ada dua cara menciptakan Auto Read More di Halaman Depan Blog, yaitu Menggunakan JavaScript dan Tanpa JavaScript (JS).
  • Kelebihan memakai JS yaitu kita dapat mengatur ukuran foto dan panjang-pendek ringkasan tulisan. Kekurangannya: "sedikit" mengganggu kecepatan loading blog.
  • Kelebihan Auto Readmore Tanpa JS yaitu loading blog tetap kenceng (fast loading) atau tidak mengganggu loading time blog. Kekurangannya: ukuran gambar thumbnail distandar ke 72x72 pixel dan panjang-pendek ringkasan goresan pena gak dapat diubah. Kalaupun mau diubah, tetap... akhirnya..... memakai javascript juga!

Membuat Auto Read More di Halaman Depan Blog #1 (JavaScript)

Ini cara Membuat Auto Read More di Halaman Depan Blog mengunakan JavaScript (JS). Tips, kode, atau script Membuat Auto Read More di Halaman Depan Blog menggunanakan JS ini CB 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 yang kedua. Jika gagal, pilih yang ketiga atau pertama dst. Coba saja satu-satu sampai berhasil. 

3. Replace atau ganti kode <data:post.body/> tersebut dengan isyarat 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 isyarat </head> dan COPAS isyarat berikut ini sempurna 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 dapat mengganti ukuran gambar/thumbnail dengan mengubah angka 120 menjadi lebih kecil atau lebih besar.

2. Anda juga dapat mengubah jumlah/panjang abjad dengan mengganti angka 490 (jika postingnya tanpa foto) dan angka 400 (jika postingnya ada foto).

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

Cara kedua ini tanpa skrip, hanya memakai CSS/HTML sehingga disebut "Fast Loading Auto Readmore", meski cuma beda dikit sama yang JS.

1. Template > Edit HTML
2. Copy & Paste isyarat berikut ini di atas isyarat ]]</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 isyarat 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://lh3.googleusercontent.com/-qJ5VVlQsLfY/VOBUcH3BV_I/AAAAAAAAGsA/MkUD8LKAhTE/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 isyarat yang kedua.
  • Ukuran gambar thumbnail (140px/80px) dapat diubah menjadi lebih besar atau kecil
  • Kode warna Orange yaitu URL Gambar Thumbail Default. Bisa diganti dengan gambar sendiri.
  • Kode yang warna biru yaitu teks Read More yang dapat diubah menjadi Baca Selengkapnya atau dapat juga dihapus saja jikalau tidak ingin ada goresan pena Readmore.

Bagaimana jikalau mau tanpa gambar dan tanpa tombol "readmore" dsb? Tutorial lebih lengkap, dapat disimak di blog "wong" Vietnam, Duypham. Pake saja Google Translate!

Apa itu Auto Readmore?

 atau Snippet Post plus Gambar Thumbnail di Halaman Depan Blog dengan  Cara Membuat Auto Read More di Halaman Depan Blog
Auto Read More yaitu istilah bagi tampilan halaman depan blog (Homepage) berupa judul tulisan, gambar thumbnail, dan kutipan bab awal tulisan.

Contohnya ibarat gambar di samping kiri ini.

Auto Read More ini bekerjsama sudah disediakan oleh Blogger, jikalau kita memakai template bawaan blogger, yaitu dengan cara klik menu/link "Insert jump break" ketika kita posting. Klik bab final alinea pertama atau kedua, kemudian klik Insert jump break.

Namun, template bawaan blogger terbaru, sudah semuanya auto readmore.

Desain halaman depan berupa judul dan ringkasan posting ini sangat user friendly (ramah pengguna), memenuhi kaidah pengalaman pengguna (user experience, UX), alasannya yaitu halaman hasil pencarian Google juga menampilkan judul dan ringkasan posting.

Sebaiknya, hapus tulisn "Read more" atau "Baca selengkapnya", alasannya yaitu Google juga tidak mencantumkan hal itu, juga hanya menambah banyak link di halaman depan yang dapat memberatkan loading blog.

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

Good Luck and Happy Blogging! (http://www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours