Cara Membuat Auto Read More Pada Blog

Sebuah artikel yang baru dibuat pasti akan muncul pada halaman depan atau homepage. Namun jika artikel tersebut terlalu panjang, selain akan mengurangi keindahan blog juga akan membuat loading blog anda berat. Untuk mengatasi hal tersebut, anda harus memangkas artikel itu agar terlihat sebagian saja. Caranya yaitu, anda harus memasang auto read more. Fungsi auto read more sendiri yaitu untuk menyembunyikan sebagian isi dari artikel. Berikut cara membuat auto read more pada blog, silahkan disimak !!

Untuk berjaga-jaga, silahkan backup template terlebih dahulu

1. Langkah pertama, silahkan masuk terlebih dahulu ke blogger

2. Pilih Template » Edit HTML

3. Sekarang cari kode </head>, untuk mempermudah pencarian tekan Ctrl+F

4. Pasang kode berikut diatas kode </head>

12345678910111213141516171819202122232425262728<!--Auto Read More Mulai-->

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

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

<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:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}

.grow img{height:165px;width:280px;transition: all 2s ease;}

.grow img:hover{width:400px;height:250px;}

</style>

<script type='text/javascript'>

var thumbnail_mode = &quot;yes&quot;; //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 = 280;

</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>

<!--Auto Read More Akhir-->

Note :

» Warna biru : Untuk mengatur banyaknya kutipan dari artikel

» Warna hijau : Untuk mengatur lebar dan tinggi gambar

Baca juga :
» Cara Mudah Backup Template Blog
» Cara Memasang Profile Keren Pada Blog
» Cara Paling Gampang Membuat Link Warna-Warni

5. Selanjutnya cari kode <data:post.body/>. Hapus kode <data:post.body/> yang kedua atau ketiga, ganti dengan kode yang ada dibawah ini

12345678910111213141516<!-- Auto read more Mulai -->

<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>

      <div class='read-more'>

      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>

      </div>

</b:if>

</b:if>

<!-- Auto read more Akhir -->

Note :
» Kata Baca Selengkapnya bisa anda ganti dengan kata-kata lain, seperti Read More atau Selanjutnya

Penting :
"Jika sebelumnya anda telah memasang fitur read more otomatis lain, maka versi sebelumnya harus dihapus"

6. Preview terlebih dahulu. Jika telah cocok Simpan Template

Demikian cara membuat auto read more pada blog, semoga dapat membantu dan bermanfaat. Terima kasih.

Please Share » » Facebook Google+ Twitter