Cara Membuat Read More Otomatis di Blog

8:28 PM
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.
Cara Membuat Read More Otomatis di 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'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //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>
Keterangan: 
  • 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.
7. Masih di Edit HTML, cari kode <data:post.body/>, jika ada 2 pilihlah kode yang ke-2.

8. Ganti kode <data:post.body/> yang ke-2 dengan kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><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..

Artikel Terkait

Previous
Next Post »

5 comments

Write comments
April 21, 2013 at 4:00 PM delete

kok ane gak bisa gan ??
jangan lupa mampir balik gan

Reply
avatar
dipta aditya
AUTHOR
August 7, 2013 at 1:25 AM delete

sip bisa bro
thanks,
boleh minta templatenya gak gan? ane tertarik ni

Berbeda Cara Satu Tujuan

Reply
avatar
Dewi Chunyang
AUTHOR
March 14, 2014 at 1:24 AM delete

gan, bagaimana kalo readmorenya berhasil terpasang, namun tulisannya bukan terpotong malah keluar tulisan error, normal 0 Xnone , begitu gan ..?? kira2 gimna cara ngatsinya ya ..??
Mohon bantuannya gan ... :)
makasis .. :)

Reply
avatar
Ace Maxs31
AUTHOR
December 17, 2014 at 11:22 AM delete

mantap dah artikelnya http://acemaxs31.com/

Reply
avatar
March 15, 2015 at 7:16 AM delete

Terima kasih mas :D

Saya coba dulu

Reply
avatar