EndangKusman.Com

Blogging, Belajar Nge-Blog & Berbagi Info

Cara Membuat Auto Readmore Template Blogger Standard

Cara Membuat Auto Read More Blogger

Template Blogger yang disediakan Blogspot versi baru sudah mengalami perubahan lebih bagus dari versi lama, dan banyak fitur pilihan, serta dilengkapi fasilitas pilihan desain template . Dengan adanya pilihan desain template, kita dapat melakukan modifikasi dan perubahan desain template dengan mudah tanpa harus mengerti kode HTML, misalnya merubah ukuran dan warna teks, merubah latar atau background dan sebagainya.

Hanya masih ada kekurangan pada template standard diantaranya masih menggunakan read more manual.. belum Auto Read more. Dengan menggunakan Auto read more kita tidak direpotkan untuk memenggal kalimat pada postingan kita, sebab dengan secara otomatis sistem akan memenggal kalimat dengan julah karakter yang sama serta memunculkan gambar minimalis.

Cara membuat Auto read more tidak terlalu susah, Anda hanya menambahkan kode-kode HTML. Silahkan ikuti langkah-langkahnya sebagai berikut : 

1. Login ke dasboard Blogger Anda
2. Pilih Template >> buat backup template dan simpan di komputer —> biasakan hal ini!
2. Pilih Edit HTML >> centang expand template widget agar template sempurna.
3. Telusuri dan cari kode :  </head>  ===> gunakan cara CTRL + F
4. Tempelkan kode berikut tepat di atas  kode : </head>

<script type=’text/javascript’>
var thumbnail_mode = “float” ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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>

Kemudian cari lagi kode : <data:post.body/> ==> gunakan CTRL+F

Lalu tindih kode : <data:post.body/> 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>
<span class=’rmlink’ style=’float:left’><a expr:href=’data:post.url’>READ MORE – <data:post.title/></a></span>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/>
</b:if>

Pembuatan Auto Readmore SELESAI ! dan SAVE Template

Apabila ada masalah akan muncul kotak pesan, jangan panik tekan aja Back pada browser, maka template lama akan dikembalikan.

Selanjutnya apabila pembuatan Auto Readmore sudah sukses, maka Anda jangan panik jika ada muncul dua read more pada setiap posting. Cara mengatasinya,  Anda harus menghapus read more yang dibuat secara manual. Tidak hanya sampai disitu, halaman statis Anda pun akan mengalami masalah..tidak muncul semua (hanya resume), itupun jangan panik ikuti cara mengatasinya sbb:

Lakukan langkah 1 dan 2

Langka 3 Cari kode berikut dengan menggunakan CTRL+F ==> copy baris pertama saja, dan kalau sudah ditemukan bandingkan sudah sama persis dengan kode di bawah.

<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’>Read more</a></span>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>

Tempelkan kode berikut persis di atas kode di atas.

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

Kemudian Templkan kode :  </b:if> persis di bawah kode di atas.

Sehingga nantinya akan seperti berikut :

<b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
<data:post.body/>
<b:else/>
 <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’>Read more</a></span>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if> 

</b:if>

 
SELESAI dan Save Template, maka halaman statis sudah normal kembali. Dengan begitu template standard Anda sudah memiliki Auto Radmore seperti template premium.

Updated: 24/06/2012 — 2:49 pm

4 Comments

  1. Thanks sudah berbagi ilmunya, sukses selalu…

  2. artikel ini cukup bagus bro dan aku suka dan juga sangat aku suka ulasanya yg cukup tajam dan juga sala kenal dari mico batam islands, dan sekalian bagi teman2 yg ingin download film box office ampe setengah semi silakan kunjungi situsnya ya, makasi admin disini juga keep blogging to you and makasi

  3. Mantap sekali Gan, tapi kalau mau menyisipkan kode adsense agar iklan muncul setelah Read More diklik bagaimana, Gan? Tolong bikinin panduannya juga, Gan.<br>Terimakasih..

  4. di blogku nggak ada??? trus gimana solusinya gan…<br><br>biar ane bisa juga membuat auto readmore…

Comments are closed.

EndangKusman.Com © 2015 - Contact - Privacy - Disclaimer - Sitemap Frontier Theme