CARA MUDAH MEMBUAT READ MORE OTOMATIS DI BLOG

Cara Mudah Membuat Read MoreOtomatis Di Blog-Keberadaan read more akan memberikan dampak positif bagi blog, read more akan memberikan kesan situs menjadi terlihat rapi dimata pengunjung. Selain itu dengan adanya read more akan memudahkan pengunjung dalam menelusuri arikel yang mereka cari, karna jika artikel tidak menggunakan read more akan membuat pengunjug malas. Jika dalam satu halaman terdapat 10 artikel maka akan menambah banyak pekerjaan bagi pengunjung untuk menggulirkan kursor mouse mereka.

Bagi yang masih bingug apa itu Read More, saya mau jelsain sedikit ke kalian yan masih awah pada blog, Read More adalah penggalan artikel, biasana hanya menampilkan depkripsi singkat pada halaman awal situs dengan diikuti tulisan "Read More", "Baca Selengkapnya" dll.

Untuk pembuatan read more kali ini saya ingin memberikan langkah-demi angkah sampai proses pembuatan read more selesai pada blog kalian, berikut adalah langkah-langkahnya:
Cara Membuat Read More Otomatis Dengan Gambar:

• Lakukan login ke blogger untuk memulai pemasangan Read Moe Otomatis
• Pada dahboard pilih Template
• Pilih Edit HTML
• Cari kode </head>.
• Selanjutnya copy dan paste kode dibawah ini tepat diatas kode </head>

<!--ReadMore http://trikseosimple.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-->

• Sekarang cari lagi kode seperti berikut <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> (kata kuncinya adalah "Blog Posts" gunakan CTRL+F)
• Setelah ketemu kode diatas, selanjutnya arahkan kursor mouseAnda ke bawah dan cari kode seprti  <b:includable id='mobile-post' var='post'> (Kata kuncinya POST' VAR='POST

• Setelah ketemuk klik pada panah hitam di bagian kiri kode tersebut.
• Maka akan terbuka kode-kode lainnya, cari kode <data:post.body/>
• Setelah ketemu kode diatas ganti dengan kode dibawahini:

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

• Teakhir klik simpan.

Sekarang read more sudah berhasil dipasang dan lihat hailnya. Smoga artikel ini dapat bermanfaat.