Cara Membuat Read More Otomatis Keren pada Blog

Pada tips dan trik kali ini saya mau share tentang bagaimana saya menambahkan menu read more secara otomatis pada blog saya ini dengan efek gambar yang bisa zoom ketika pointer di arahkan pada gambar thumbnail.

Walaupun sebenarnya kita dapat menambahkan read more pada blog melalui jump break yang ada pada blog ketika kita menulis artikel, namun menurut saya cara tersebut sangatlah ribet dan tidak efisien. Kita harus bolak balik membuat menu read more ketika kita membuat artikel baru.

Fungsi dari read more otomatis itu sendiri membuat postingan kita terlihat lebih pendek dan efisien karena pembaca tidak perlu menarik pointer terlalu ke bawah untuk mencari artikel yang mereka perlukan. Sebagai contoh apabila anda memasang script di bawah anda akan memperoleh hasil kurang lebih seperti ini :

Langsung aja bagi yang mau pasang silahkan ikuti langkah di bawah ini buat masang read more otomatis keren dengan efek gambar

1.       Login ke blog anda

2.       Masuk ke template --> edit HTML

3.       Back up template anda terlebih dahulu buat jaga-jaga. Bagi yang belum bisa silahkan baca Cara Backup Template Blog

4.       Klik pada kotak dialog html tersebut kemudian cari kode </head> dengan menggunakan CTRL+F untuk mempercepat

5.       Masukan kode berikut ini di atas kode </head> tersebut

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

Keterangan :

Warna Merah untuk mengatur lebar dan tinggi gambar

Wara Biru untuk mengatur banyaknya kutipan

6.       Cara kode <data:post.body/> yang kedua, hapus dan ganti kode tersebut dengan kode di bawah ini

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

7.       Sebelum save template sebaiknya anda preview terlebih dahulu, jika anda suka silahkan save template.

Demikian tutorial cara manambahkan read more otomatis pada blog semoga anda suka dan bermanfaat, perlu di ingat apabila anda pernah menggunakan jump break melalui blog anda harus menghapusnya terlebih dahulu, apabila anda tidak mengetahui caranya silahkan baca Cara Menghilangkan Read More Manual/Insert Jump Break. Atau apabila anda pernah menggunakan versi yang lain anda harus menghapusnya dan ingat dimana anda meletakan kode tersebut.