Cara Membuat Read More Otomatis di Blog - Sebelum kita masuk ke pokok pembahasan pertama-tama saya ingin menjelaskan terlebih dahulu apa itu yang dimaksud dengan read more, read more adalah sinonim dari fitur insert jump break yang sebenarnya sudah disediakan oleh pihak pengembang blogspot, namun perlu saya tegaskan kembali bahwasanya read more otomatis ini 'relatif' sedikit berbeda dengan fitur yang sudah disediakan blogger, kini dengan read more otomatis anda akan semakin dimudahkan untuk menampilkan "potongan" atas artikel, namun jika anda 'masih' menggunakan insert jump break atau read more manual, anda harus melakukanya (memotong artikel) secara manual dan tampilanya juga tidak sebagus read more otomatis, karena memang pada dasarnya read more otomatis sudah di desain agar thumbnail dan kerangka atas artikel bisa muncul secara bersamaan dan teratur pada homepage blog.
Seperti yang sudah saya paparkan tadi diatas, kelemahan fitur insert jump break bawaan blogger adalah kita tidak bisa mengatur ukuran thumbnail gambar, jumlah karakter read more yang ingin ditampilkan, dan juga kita tidak akan bisa menyesuaikan artikel untuk muncul dengan settingan default yang biasanya kita temui pada read more otomatis, karena read more manual blogger akan menampilkan gambar tergantung di mana letak gambar tersebut berada pada artikel, dan bergantung juga dengan dimana insert jump break yang anda masukan.
Jika anda membuat jump break sebelum gambar artikel itu artinya gambar tidak akan muncul pada homepage, dan jika anda membuat jump break setelah gambar, maka thumbnail atau gambar akan muncul pada halaman awal, berbeda dengan read more otomatis yang sudah di atur untuk menampilkan gambar dan 'potongan' artikel secara tersusun, meskipun letak gambar di posisi paling bawah artikel sekalipun, kurang lebih nanti read more otomatisnya akan muncul seperti pada gambar diatas.
1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML > Lanjutkan.
4. Centang box 'Expand Template Widget'.
5. Cari kode </head> menggunakan CTRL+F.
6. Lalu, letakkan kode di bawah ini tepat diatas kode </head>.
<script type='text/javascript'>Keterangan:
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 300;
summary_img = 255;
img_thumb_height = 100;
img_thumb_width = 125;
</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;
if(thumbnail_mode == "yes") {
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>
- 300 = jumlah karakter read more artikel tanpa gambar.
- 255 = jumlah karakter read more artikel dengan gambar.
- 100 = tinggi gambar artikel yang ingin ditampilkan pada read more.
- 125 = lebar gambar artikel yang ingin ditampilkan pada read more.
8. Ganti kode <data:post.body/> yang ke-2 dengan kode di bawah ini.
<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>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
9. Klik 'save template' dan selesai.
Bagaimana? mudah bukan membuat read more otomatis agar blog anda tampil lebih rapi dan proffessional. Baca juga artikel tutorial blog tentang cara submit sitemap blog ke google webmaster, yaitu ulasan mengenai langkah-langkah untuk mengirimkan sitemap atau peta situs blog kita ke webmaster google, agar robot google semakin mudah untuk mengindeks dan meng-crawls artikel-artikel di blog kita.
Demikian informasi tentang cara membuat read more otomatis, semoga bermanfaat, dan selamat mencoba. Blogging Is Our Identity..
EmoticonEmoticon