Cara Menciptakan Auto Read More Template

Cara Membuat Auto Read More Template - Cara ini sudah diterapkan dalam banyak modifikasi template blog.

Tips ini untuk Anda yang memakai template blog yang belum menampilkan ringkasan posting di halaman depan alias tampilannya sama dengan single post/single page.

Umumnya, template blog kini sudah otomatis memakai auto read more atau menampilkan ringkasan posting di halaman depan blog.

Cara Membuat Auto Read More Template

1. Klik "Template" > "Edit HTML"
2. Cari (CTRL+F) arahan <data:post.body/>.
Jika ada lebih dari dua <data:post.body/>, pilih yang kedua. Jika gagal, pilih yang ketiga atau pertama dst. Coba saja satu-satu sampai berhasil.
3. Replace atau ganti arahan <data:post.body/> tersebut dengan arahan di bawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <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> <span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

4. Cari arahan </head> dan salin arahan berikut ini sempurna di atasnya

<script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 120; img_thumb_width = 120; </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 = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>

5. Simpan Template

Anda dapat mengganti ukuran gambar/thumbnail dengan mengubah angka 120 menjadi lebih kecil atau lebih besar.
Anda juga dapat mengubah jumlah/panjang huruf dengan mengganti angka 490 (jika postingnya tanpa foto) dan angka 400 (jika postingnya ada foto).

Demikian Cara Membuat Auto Read More Template, terima kasih sudah berkunjung. Salam Blogger.

Tweet

Subscribe to receive free email updates: