TIPS ini untuk blog Anda yang masih memakai 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" alasannya yakni dengan memasang kode-kode di bawah ini, dikala 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 supaya lebih SEO Friendly dan disukai indeks mesin pencari Google.
Cara dan metode Membuat Auto Read Mode dengan Default Image
Untuk membuat Auto readmore dengan default thumbnail di blog Anda yang masih menampilkan goresan pena penuh di halaman depan (homepage), Anda perlu melaksanakan dua langkah, yaitu:1. Menambahkan arahan JavaSript
2. Menambahkan arahan HTML
Kedua langkah ini diawali degan klik Template > Edit HTML
Langkah #1: Menambahkan JavaScript
Untuk menambahkakan arahan JavaSript dibawah ini, simpan arahan dibawah ini sebelum </head>
<script type='text/javascript'> // ganti angka dibawah untuk mengatur jumlah abjad 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/AVvXsEhlVEJp_BH5RFjaK3TVkon_Nl-i8BTngOD2Gw6d_0pykvxRqe9Sal1l20Ou7sNsJOwc2DWnzfHcVk9PP093QweiPMRNY1GaLOD21IULY2wYMM8dfxfo_T-t5O7f8LDzTaiXEbZwEPRmVl42/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 arahan <data:post.body/>
Di template bawaan blogger, ada dua kode. Pilih kode <data:post.body/> yang kedua dan ganti dengan arahan 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 » </a> </span> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if>
Save Template!
Simpan template Anda. Anda sudah berhasil menambahkan auto readmore dengan default thumbnail. Good Luck & Happy Blogging! (http://www.contohblog.com).*
Sumber
Auto Read Mode Dengan Default Thumbnail No Image Di Blogger
4/
5
Oleh
Unknown
