√ Cara Menciptakan Auto Read More Pada Blog

Sebuah artikel yang gres dibentuk niscaya akan muncul pada halaman depan atau homepage. Namun bila artikel tersebut terlalu panjang, selain akan mengurangi keindahan blog juga akan menciptakan loading blog anda berat. Untuk mengatasi hal tersebut, anda harus memangkas artikel itu supaya terlihat sebagian saja. Caranya yaitu, anda harus memasang auto read more. Fungsi auto read more sendiri ialah untuk menyembunyikan sebagian isi dari artikel. Berikut cara menciptakan 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 instruksi </head>, untuk mempermudah pencarian tekan Ctrl+F

4. Pasang instruksi berikut diatas instruksi </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/j4vascript'>

var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar

summary_noimg = 300; //banyaknya abjad bila tidak ada gambar

summary_img = 250; //banyaknya abjad bila ada gambar

img_thumb_height = 165;

img_thumb_width = 280;

</script>

<script type='text/j4vascript'>//<![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 Praktis Backup Template Blog
» Cara Memasang Profile Keren Pada Blog
» Cara Paling Gampang Membuat Link Warna-Warni

5. Selanjutnya cari instruksi <data:post.body/>. Hapus instruksi <data:post.body/> yang kedua atau ketiga, ganti dengan instruksi 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/j4vascript'> 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 sanggup anda ganti dengan kata-kata lain, ibarat 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 menciptakan auto read more pada blog, semoga sanggup membantu dan bermanfaat. Terima kasih.


Sumber http://ap-thea.blogspot.com