CARA MEMBUAT READ MORE DI BLOG

Cara Membuat Read More di Blog - Banyak para blogger pemula  yang masih bingung bagaimana cara untuk membuat read more di blog mereka, meskipun banyak artikel-artikel yang membahas bagaimana cara membuat read more di blog. Hal ini dikarenakan banyaknya artikel-artikel yang copas, padahal si pemilik blog itu sendiri belum begitu faham dengan caranya. Sehingga membuat para blogger pemula bingung mencari artikel yang benar-benar tepat untuk membantu mereka membuat read more di blog mereka. 

Disini saya akan menjelaskan cara membuat read more secara detail, sehingga para blogger pemula juga bisa membuatnya. 

Sebelumnya saya ingin menjelaskan sedikit apa itu read more ? 

Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan ditandai dengan kata " READ MORE ", " BACA SELANGKAPNYA ", " LANJUTKAN MEMBACA ", dan lain-lain. Read more juga bermanfaat untuk mempersingkat dan merapikan artikel yang panjang, sehingga artikel anda dapat tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Cara membuat read more otomatis dengan gambar

• Buka template anda. Pilih : Template >> Edit HTML
• Cari kode </head>
• Copy paste script dibawah ini tepat diatas kode </head>

  <!--ReadMore http://blog-arief.blogspot.com-->

<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: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 = &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 = 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>

<!--Auto Read More Akhir-->

• Save template anda
• Kemudian scroll template anda kebawah, cari kode seperti berikut ini :

• Jika sudah menemukan kode yang ditandai seperti gambar diatas, silahkan anda klick panah kecil warna hitam disebelah kiri
• Setelah tanda panah diklick maka akan ada tampilan seperti berikut :

• Jika sudah menemukan kode yang ditandai seperti gambar diatas, silahkan anda klick panah kecil warna hitam disebelah kiri
• Kemudian cari script : <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
• Ganti kode <data:post.body/> yang berada tepat dibawah script diatas dengan kode dibawah 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 -->

• Klick save / simpan template

Sekian dulu dari saya  untuk cara membuat read more di blog. Semoga bermanfaat dan jika masih ada yang kurang ngerti / kurang paham, anda dipersilahkan untuk tanya langsung.