Cara Membuat Auto Readmore

Assalamualaikum..

Auto readmore adalah salah satu fasilitas penting yang rasanya wajib dimiliki setiap blog. Dengan Auto readmore setiap post yang kita miliki tidak akan ditampilkan secara utuh pada saat kita membuka homepage dari blog kita. Dengan demikian kita bisa menghemat tempat sekaligus bisa meningkatkan pageview karena artikel yang ditampilkan pada homepage bisa lebih banyak lagi jumlahnya.

Untuk membuatnya, caranya sebagai berikut :

• Masuk ke dashboard
• Klik design
• Pilih Tab Edit HTML
• Beri tanda cek pada Expand Widget Templates
• Untuk lebih aman silakan download dahulu template teman yang sekarang dengan klik "Download full template"
• Cari kode </head> (bisa dengan CTRL+F)
• Letakkan kode berikut ini diatas </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 300; summary_img = 301; img_thumb_height = 150; img_thumb_width = 150; </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"); if(img.length<1) { imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEh0-iSy36kmVh8_pb7NoZV31G1Hi-hRuTQd_Bp-87WxQ-zp1md5_ou9jMiTvE_cGoUaAGe-EcXcpNrwVSY0dcATvyggdtTt5nImSP0IIjZXp74Jhjib6i8Cw3Ap_lcVQTCV0M3aixbA/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; var summ = summary_noimg; } if(img.length>=1) { imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>
• summary_noimg = 300; menunjukan jumlah karakter yang ditampilkan bila sebuah post tidak terdapat gambar didalamnya. Untuk merubahnya silakan ganti angka 300 sesuai dengan selera teman.
• summary_img = 301; menunjukan jumlah karakter yang ditampilkan bila post memiliki gambar
• img_thumb_height = 150; menunjukan tinggi gambar thumbnail.. ganti angka 150 sesuai selera teman
• img_thumb_width = 150; menunjukan lebar gambar thumbnail
• Cari kode <data:post.body/> 
• Gantilah kode tersebut dengan kode berikut :

<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:left'><a expr:href='data:post.url'><b>Read more »</b></a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><p> <data:post.body/></p> </b:if>
• Klik save template
• Selesai...

Bagaimana ? Apakah post teman dihalaman homepage sudah memendek ? selamat mencoba dan semoga semakin sukses :)

Regards,

Irfan

Berlangganan Artikel Referensi Kita

Tweet

Masukkan alamat email Anda:

Related Post: