Membuat Auto Readmore pada Blogger

Selamat Datang di 4idoru.

Saya akan mem-sharing tentang Membuat Auto Readmore sebelum ke topik kita harus tau apa manfaat dari auto readmore ?

• Manfaat auto readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Nah sekarang anda sudah tau apa itu manfaat auto readmore bagi blogger. sekarang lanjut ke topik pembahasan Membuat Auto Readmore.

Langkah - Langkah Membuat Auto Readmore :

• Login ke akun blogger masing-masing.
• Silahkan pilih TEMPLATE >> EDIT.
• Cari code </Head> [Gunakan Ctrl + F untuk mempercepat pencarian]
• Bila sudah ketemu silahkan copy code di bawah ini dan paste tepat di atas code </head>

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

summary_noimg = 300; // Ganti angkanya sesuai keinginan

summary_img = 250; // Ganti angkanya sesuai keinginan

img_thumb_height = 165; Ganti angkanya sesuai keinginan

img_thumb_width = 250; Ganti angkanya sesuai keinginan

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

• Kemudian cari seperti di bawah ini :

<data:post.body/>

• Setelah ketemu hapus code diatas [ganti] lalu paster code 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 -->

• Klik Simpan dan silahkan di lihat hasilnya ^.^

nah mudah 'kan membuat auto read morenya ? demikian dari 4idoru sampai bertemu lagi di kesempatan lain waktu. 

Terima kasih telah berkunjung di 4idoru.