Artikel tentang Cara Membuat Read More pada Blog

Ada berbagai macam cara yang biasa dipergunakan untuk memperindah tampilan pada website atau Blog Anda.

Salah satu-nya adalah dengan cara membuat Read More pada setiap Artikel pada Blog atau website Anda yang telah Anda publikasikan.

Pada Blog "Berbagai Artikel Menarik" ini saya akan membagi Artikel untuk Anda tentang Bagaimana cara membuat Read More pada Blog.

Post yang saya beri judul "Artikel tentang Cara Membuat Read More pada Blog" ini akan membahas tentang Bagaimana Cara membuat Read More yang bekerja secara otomatis pada blog. Bisa Anda bayangkan jika tiap Artikel yang Anda publikasikan tidak dibatasi dengan aturan Read More. Apa lagi jika Artikel tersebut panjang. Disamping membutuhkan waktu yang lama untuk memuat halaman tersebut, menurut saya juga bisa membuat tampilan website atau Blog Anda kurang indah kelihatannya.

Karena hal tersebut di atas, maka menerapkan aturan Read More menurut saya adalah hal yang harus Anda lakukan atau terapkan pada blog atau website Anda. Nah sekarang, Bagaimana cara membuat Read More pada blog Anda ? Untuk membuat Read More pada Blog, Anda bisa mengikuti cara di bawah ini :

Login pada akun Blogger Anda.
Klik “Template“, lalu klik “Edit Template“.
Copy kode yang ada di bawah ini, lalu pastekan atau masukkan tepat di atas kode </head> pada template blog Anda. Kode tersebut adalah :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</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 = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

   4. Masih pada “Template “ Blog Anda, silakan anda mencari kode : <data:post.body/>
       (Gunakan atau tekan Ctrl+f, untuk mempercepat pencarian.)
   5. Setelah Anda menemukan kode <data:post.body/>, hapus kode tersebut, kemudian Anda ganti dengan kode seperti di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Read More »</a>
      </div>
</b:if>
</b:if>

6. Klik “Save Template“, untuk menerapkan perubahan pada template Blog Anda.

Jika semua pengaturan yang anda terapkan pada template Blog Anda telah Anda lakukan dengan benar, maka Aturan Read More akan berjalan dengan baik pada Blog Anda.

Catatan :

Tulisan “Read More“ yang berwarna merah di atas, bisa Anda ganti dengan kata-kata yang lain sesuai keinginan Anda. Misal “Baca lebih lanjut“ atau mungkin anda mau ganti dengan “Baca selengkapnya“.

Jika pada Blog Anda sebelumnya telah terpasang Read More, dan Anda ingin mengganti dengan Read More yang ada pada Blog "Berbagai Artikel Menarik" ini, maka hapuslah terlebih dahulu aturan Read More yang lama sebelum anda memasang kode-kode di atas. Setelah anda menghapus Aturan Read More yang lama, maka akan muncul 2 (dua) kode <data:post.body/> pada template blog anda. Hapus kode <data:post.body/> yang kedua, lalu anda ganti dengan kode yang ada pada Nomor 5 di atas.

Demikianlah Artikel yang saya publikasikan dengan judul "Artikel tentang Cara Membuat Read More pada Blog" pada Blog Berbagai Artikel Menarik. Semoga Artikel ini menarik dan bermanfaat untuk Anda.

Baca juga :