Auto Read Mode dengan Default Thumbnail No Image di Blogger

Baca Juga

Cara Membuat Auto Read Mode dengan Default Thumbnail No Image di Blogger.

TIPS ini untuk blog Anda yang masih menggunakan template bawaan blogger atau template yang belum menampilkan ringkasan posting di halaman depan (homepage) blog.

Auto Readmore ini sudah menjadi tampilan hampir semua blog modern sehingga user friendly atau ramah pengguna.

Dinamaka 'dengan Default Thumbnail No Image" karena dengan memasang kode-kode di bawah ini, saat posting tidak ada gambar, maka di halaman depan akan muncul gambar default sebagai penggantinya, berupa 'no image available".

Baiknya sih semua posting blog Anda meggunakan gambar agar lebih SEO Friendly dan disukai indeks mesin pencari Google.

Cara Membuat Auto Read Mode dengan Default Image

Untuk membuat Auto readmore dengan default thumbnail di blog Anda yang masih menampilkan tulisan penuh di halaman depan (homepage), Anda perlu melakukan dua langkah, yaitu:

1. Menambahkan kode JavaSript
2. Menambahkan kode HTML

Kedua langkah ini diawali degan klik Template > Edit HTML

Langkah #1: Menambahkan JavaScript

Untuk menambahkakan kode JavaSript dibawah ini, simpan kode dibawah ini sebelum </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/AVvXsEhYP_xJp89Fj8h59Nt6kKxxlJgriiAgmXpJVWDVj3Nu2-Xe-K0G4mrxmer9FUnPMRyeHdnnu8dWzYMaaXsyRRU6A2Ot0seDNhQCWvew5x6cBqANt4zWNOeuj_mthwaEi5YPE3eenYcvtMDJ/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>

Langkah #2 Menambahkan Kode HTML

Cari kode <data:post.body/>
Di template bawaan blogger, ada dua kode. Pilih kode <data:post.body/> yang kedua dan ganti dengan kode dibawah 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>

Save Template!

Simpan template Anda. Anda telah berhasil menambahkan auto readmore dengan default thumbnail. Good Luck & Happy Blogging! (http://www.contohblog.com).*

Sumber