Cara Buat Read More Otomatis Di Blogger

Bagaimana cara membuat Read More Otomatis di Blog dengan tampilan Thumbnail?Memasang Read More di Blog merupakan hal wajib yang harus sobat blogger lakukan, karena dengan memasang Read More di blogspot, postingan sobat blogger dapat tampil dalam bentuk Summary atau ringkasan. Blog yang menampilkan seluruh isi postingan di Home Page atau Halaman Beranda, sebenarnya tidak jadi masalah, akan tetapi, satu postingan bisa memakan banyak tepat kalau seperti itu.

Banyak mamfaat yang bisa sobat blogger dapatkan dengan menambahkan fitur read more di blog seperti:

1. Blog terlihat rapi dan bersih
2. Sobat blogger dapat menampilkan banyak postingan di laman home page (Blog yang tidak menggunakan fitur read more dapat juga melakukan hal itu, akan tapi blog tidak akan terlihat bagus, karena jarak antara Header dan Footer akan terlihat panjang).
3. Dengan menambahkan fitur read more di blog, blog akan terlihat lebih profesional.

Itulah sedikit gambaran tentang mamfaat memasang Read More di blog. Nah... Apakah sobat blogger sudah berminat untuk memasang fitur ini? Kalau memasang Read More di blog, sulit atau tidak? Tidak, Cara buat Read More di blog sangat mudah. Tidak membutuhkan keahlian atau pemahaman tentang bahasa pemrograman seperti CSS atau JavaScript.

---

Cara Membuat Read More Otomatis di Blogspot

---

• Sign In di blogger.com
• Pada Menu drop down, pilih Template
• Backup template sobat terlebih dahulu
• Klik Edit Template dan klik Proceed
• Kasih tanda centang pada Expand Widget Template
• Cari kode </head> dan letakkan kode berikut di bawahnya

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 230; //summary length when no image
summary_img = 290; //summary length when with image

img_thumb_height = 100;

img_thumb_width = 100;

</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(thumbnail_mode == "yes") {
 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>
<!-- Auto read more script End -->

• Setelah itu, cari kode <data:post.body/>
• Ganti kode <data:post.body/> dengan kode berikut :

<!-- Auto read more Start -->
<!-- http://www.tutorialblogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

• Simpan Template sobat

Tambahan

1. Kalau kode <data:post.body/>  lebih dari satu, maka yang di hapus adalah kode yang kedua dan di ganti dengan kode di atas.
2. Kata Read more ... bisa diganti menjadi kata yang sobat blogger inginkan seperti Baca Selengkapnya, Selanjutnya, More, Continue Reading, Continue, dll.
3. Silahkan sobat blogger sesuaikan angka di bawah ini:

summary_noimg = 230; adalah ringkasan tanpa gambar
summary_img = 290; adalah ringkasan menggunakan gambar
img_thumb_height = 100; adalah tinggi gambar
img_thumb_width = 100; adalah lebar gambar

Cara Menghilangkan Tulisan Read More Di Blog

Kalau sobat blogger sudah memasang fitur Read More di blog, maka di bawah ringkasan posting terdapat sebuah teks atau link yang menuju posting kita. Link tersebut ada yang bertuliskan Read More, Baca Selengkapnya, Sumber Posting, More, Selengkapnya dan banyak lagi kata yang digunakan sebagai pengganti kata Read More. Bahkan, tidak sedikit yang mengganti teks Read More dengan gambar sehingga gambar tersebut tidak terlihat seperti sebuah link.

Apakah sobat blogger tidak pernah berinisiatif untuk menghilangkan tulisan Read More yang terdapat di blog sobat? Kalau saya hapus tulisan Read More, bagaimana cara pengunjung membaca keseluruhan posting atau artikel saya? Sobat blogger tidak perlu bingung kalau masalah itu, untuk membaca Full Artikel/Posting, pengunjung cukup meng-klik judul dari artikel yang ingin di baca. Mudah bukan?

---

Cara Menghilangkan Tulisan Read More Di Blog

---

• Sign in di blogger.com
• Pada Menu drop down, pilih Template
• Back Up template sobat terlebih dahulu
• Klik tombol Edit HTML dan klik Proceed
• Kasih tanda centang pada Expand Widget Template
• Lalu cari kode yang seperti ini :

<a class='more' expr:href='data:post.url'>Read more ...</a>

Atau yang seperti ini :

<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

Kode di atas bisa saja berbeda, tergantung dari Kode Read More otomatis yang di pasang.

• Hapus kode tersebut dan klik simpan, Kalau bisa di Preview terlebih dahulu

Saya tidak menggunakan Read More Otomatis, tapi saya menggunakan Read More bawaan blogger, bagaimana cara saya menghilangkan tulisan Read More? Gampang, ikuti saja tutorial blogspot di bawah ini!

• Cari kode ]]></b:skin> di Template sobat
• Lalu, letakkan kode CSS berikut tepat di atas-nya

.jump-link{
display:none
}

• Terakhir, Save template sobat

Buat sobat blogger yang belum menambahkan fitur Read More di blog, temukan tutorialnya disini : Cara Memasang Read More Otomatis di Blog