Cara Mudah Membuat Read More Otomatis pada Blog

Cara Membuat Read More Otomatis pada Blog – Kegunaan Read more otomatis adalah untuk membuat tampilan home page menjadi ringkas. Hal ini juga bertujuan untuk memudahkan memasang Iklan di bawah postingan. Jika blog anda masih belum menggunakan Readmore otomatis, coba lah cara ini untuk membuat tampilan blog anda lebih simple dan dinamis.

Cara Mudah Membuat Read More Otomatis pada Blog
(Contoh Read More Tutorial ini)

Read more versi yang satu ini meruapakan yang paling cepat, sehingga anda tidak perlu mengkawatirkan masalah berat loading blog. Seperti yang anda lihat gambar diatas, itu adalah contoh Read More yang saya pasang di blog download saya. Potongan pada kolom artikel menjadikan lebih menarik, ditambah lagi label juga terpasang jelas di bawah. Oh ya, Background Read More ini mengikuti tampilan blog, jadi jangan anda kira tutorial ini background nya akan sama seperti gambar diatas 🙂

Langsung saja kita simak Cara Membuat readmore Otomatis ;

1. Login ke blogger

2. Masuk ke menu Template (jangan lupa Backup template anda dulu untuk berjaga-jaga bila terjadi kesalahan),

3. klik edit HTML

4. Klik satu kali pada kolom Sript nya Cari kode </head> , gunakan CTRL+F lalu enter untuk memudahkan pencarian

5. Masukan kode berikut diatas </head>

<script type=’text/javascript’> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(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>

Tips :
-Tidak usah di sertting sudah bagus
-Warna Biru untuk mengatur ketinggian read more otomatis di Halaman Depan.
-Warna Hijau adalah  Lebar dan tinggi gambar
-Warna Ungu adalah Pengaturan banyaknya deskripsi artikel, tanpa gambar dan dengan gambar.
.post-outer harus di perhatikan, supaya tidak terpencar


6. Selanjutnya Cari kode <data:post.body/>

7. Hapus kode <data:post.body/> yang ke 2 atau ke 3 (coba satu persatu), dan ganti <data:post.body/> dengan kode dibawah 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>
<span class=’rmlink’ style=’float:right;padding-top:20px;’>
<a expr:href=’data:post.url’> <b>Read more</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/>
</b:if>

#Untuk baca selengkapnya bisa diganti “ReadMore”

8. Preview terlebih dahulu, jika sudah bagus silahkan di save.

Itulah tutorial cara membuat read more otomatis, semoga bisa membantu mempercantk tampilan blog anda. Jika masih kurang jelas atau tidak berhasil, silahkan bertanya.

20 thoughts to “Cara Mudah Membuat Read More Otomatis pada Blog”

  1. @ari : iya mas, mungkin kode nya berbeda, tapi penemptannya sama,

    @Hari : sama-sama mas,

    @Yulia : gampang kog cari kode-kode nya. kalau mau cari kode tekan 1x dulu di kolom kode nya, terus CTRL+F, masukan kode yang di cari , kemudian enter.

    moga mbak Yulia paham, ๐Ÿ™‚

  2. Template blogspot memang ada yang sudah ada read more nya, dan ada juga yang belum ada. Kalau template yang kita gunakan belum ada read more nya, panduan yang dijelaskan diatas adalah solusinya.

    Kebetulan blog saya sudah ada read more nya mas hehehe ๐Ÿ˜€

  3. @Henra : bisa gan, coba klik 1 kali pada kolom Script nya. terus tekan ctrl+F,

    nanti pencarian nya ada di kolom Script, bukan di atas Browser

  4. @David : ctrl+F ada di kolom kode sebelah kanan gan, yang penting headnya ketemu..

    CTRL+F cuma buat munculin kolom pencarianya aja,

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA, Maaf ini untuk menghindari SPAM Robot...! *