The Bootstrap Blog

The example template of creating a blog blogger with Bootstrap. Designed by CB Blogger

September 23, 2016

Auto Read Mode dengan Thumbnail No Image di Blogger

Posted by on September 23, 2016
Auto Read Mode dengan Thumbnail No Image di Blogger
Auto readmore adalah tampilan halaman depan blogger berupa judul, cuplikan gambar (thumbnail image), dan cuplikan tulisan dari bagian awal posting.

Template bawaan blogger menampilkan tulisan secara penuh di halaman depan. Untuk meringkasnya, agar tampilan posting lebih user friendly, maka gunakan kode auto readmore.

Untuk membuat Auto readmore dengan default thumbnail, yaitu ada gambar cadangan jika posting tidak menggunakan foto/gambar, Anda hanya perlu melakukan dua langkah mudah, setelah masuk ke Template > Edit HTML.

1. Tambahkan JavaSript
2. Tambahkan HTML

Menambahkan JavaScript
Copas kode dibawah ini sebelum kode </head>

<script type='text/javascript'> // ganti angka dibawah untuk mengatur jumlah karakter summary_noimg = 350; summary_img = 280; // ganti angka dibawah untuk merubah ukuran thumbnail img_thumb_height = 200; img_thumb_width = 200; // ganti dengan gambar sesuai selera anda img_thumb_nosrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG1MSTVDho3ihFN-P3gU2ef6TF8tbqf7my3xQiTslPRjtIf3LMkDQ8phntQnyiMLJGsdbg4wECuWjE0u6UDVAKMAPtDkMVJYlNT-jeY67CxohN_cSyy0DW1vE0TzegLKkjU6AKvRIVl-OP/s1600/default.png"; </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; // this block of code is used to add default thumbnail to post without images if(img.length<=1) { imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>'; summ = summary_noimg; } if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>

Menambahkan Kode HTML
Cari kode <data:post.body/> dan ganti kode yang kedua dengan kode di bawah ini:

<b:if cond='data:blog.pageType != "static_page"'> 
 <b:if cond='data:blog.pageType != "item"'> 
 <div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div> 
 <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> 
 <span class='rmlink' style='float:right;margin-top:10px'> <a expr:href='data:post.url'> Read More &#187; </a> </span> 
 <b:else/> 
 <data:post.body/> 
 </b:if>
 <b:else/> 
 <data:post.body/> 
</b:if>

Untuk menghapus tulisan Readmore, cukup hapus kode warna merah.

Simpan template!

Demikian cara menambahkan auto readmore dengan default thumbnail di halaman depan blogger.

Sumber

logoblog

No comments:

Post a Comment