Membuat Read More Otomatis di Blogspot (Blogger)

Agar artikel di blogger lebih ringkas dan terlihat rapi, kita bisa menambah fungsi read more otomatis. Membuat read more otomatis di blogspot ini sebenarnya tidak sulit. hanya merubah beberapa settingan kode html pada template anda. Anda hanya butuh waktu tidak lebih dari 10 menit untuk membuat read more otomatis di blog blogspot punya blogger.


 

Cara membuat read more Otomatis

Langkah-langkahnya adalah sebagai berikut:
1. Login blogger
2. Pilih template -> klik edit html
3. Cari kode </head> (gunakan CTRL+F atau F3 untuk melakukan pencarian)
4. Letakkan kode dibawah ini diatas kode </head>

 <script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 150;

summary_img = 150;

img_thumb_height = 80;

img_thumb_width = 120;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var 
d=b.split("<");for(var 
c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1)
{d[c]=d[c].substring(d[c].indexOf
(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)
?a:b.length-2;while(b.charAt(a-1)!="
 "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" 
[...]"}function createSummaryAndThumb(d){var 
f=document.getElementById(d);var a="";var 
b=f.getElementsByTagName("img");var 
e=summary_noimg;if(b.length>=1){a='<span style="float:left; 
padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" 
width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/></span>';e=summary_img}var 
c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};

//]]>

</script>

Keterangan kode yang berwarna di atas:

    summary_noimg =  banyaknya huruf jika tidak ada gambar
    summary_img = banyaknya huruf jika ada gambar
    img_thumb_height = Ukuran tinggi gambar
    img_thumb_width = Ukuran lebar gambar

5.Selanjutnya cari kode <data:post.body/> dan Ganti kode tersebut dengan kode dibawah ini

 <b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&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:left'> <a expr:href='data:post.url'>
<b>Readmore</b> &#8594; <data:post.title/></a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/></b:if>

6. Tulisan Readmore bisa anda ganti sesuai dengan keinginan anda. Ganti dengan Lanjutkan membaca atau Baca Selengkapnya, tergantung selera anda.
7. Simpan template.
8. Read more otomatis telah selesai dibuat. Selanjutnya anda hanya tinggal melakukan posting artikel tanpa memotong artikel dengan page break. Artikel akan otomatis dipotong menjadi read more otomatis.

Cara di atas telah diuji pada template blogspot penulis. Apabila ada kegagalan dalam membuat read more otomatis di blog blogger anda, lakukan pada  <data:post.body/> yang lain. Biasanya kode <data:post.body/> ini ada lebih dari satu. Selamat mencoba!

Posting Komentar

Tulis Komentar (0)

Lebih baru Lebih lama