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

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 yaitu dengan memasang kode-kode di bawah ini, ketika 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 biar lebih SEO Friendly dan disukai indeks mesin pencari Google.

Cara Membuat Auto Read Mode dengan Default Image

Untuk menciptakan 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 isyarat JavaSript
2. Menambahkan isyarat HTML

Kedua langkah ini diawali degan klik Template > Edit HTML

Auto Read Mode dengan Default Thumbnail No Image di Blogger Auto Read Mode dengan Default Thumbnail No Image di Blogger


Langkah #1: Menambahkan JavaScript

Untuk menambahkakan isyarat JavaSript dibawah ini, simpan isyarat 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 = "http://3.bp.blogspot.com/-TSC-t4b1XvQ/UHWqOo4keDI/AAAAAAAAATo/DgshIsz1IBs/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 isyarat <data:post.body/>
Di template bawaan blogger, ada dua kode. Pilih kode <data:post.body/> yang kedua dan ganti dengan isyarat 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.idtutorial.com).*

Sumber
Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours