Memasang auto readmore di posting blogger

Memasang auto readmore di posting blogger

Assalamualaikum.
Mungkin jika anda pernah mengunjungi homepage suatu blog,anda pernah  menemukan sebuah artikel terputus dan anda diharuskan untuk klik link readmore atau baca selengkapnya untuk dapat melihat artikel secara utuh.Tujuan dari pemasangan readmore (summary post) ini sendiri bertujuan untuk menghemat ruang halaman homepage blog sehingga tampilan homepage akan tampak rapi.
Bagi anda yang ingin sekali memasang auto readmore di posting blogger,pada kesempatan kali ini saya akan membagikan sebuah tutorial untuk membantu anda membuat auto readmore sederhana di blog yang anda miliki.

Berikut cara memasang auto readmore di posting blogger
1.Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.
2.Setelah masuk ke halaman dashboard,silahkan anda klik nama blog yang akan anda pasangi auto readmore pada area posting (apabila anda memiliki blog lebih dari 1).Contoh seperti gambar dibawah ini.
Memasang auto readmore di posting blogger

3.Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.
Memasang auto readmore di posting blogger

4.Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.
Memasang auto readmore di posting blogger

5.Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode 
</head> 
dengan menggunakan CTRL+F (jika anda menggunakan komputer).
6.Jika sudah ketemu,silahkan anda masukkan kode berikut ini tepat di atasnya.
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 50;
img_thumb_width = 50;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks 
********************************************/
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>
keterangan:

  • summary_noimg = 250 (panjangnya teks pada post yang tidak memiliki gambar)
  • summary_img = 250 (panjangnya teks pada post yang memiliki gambar)
  • img_thumb_height = 50 (ukuran tinggi gambar/tumbnail pada postingan)
  • img_thumb_width = 50 (ukuran lebar gambar/tumbnail pada postingan)


7.Jika sudah,selanjutnya anda cari kode
 <data:post.body/>

silahkan anda hapus kode tersebut dan ganti dengan kode dibawah ini.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'><style type='text/css'>.post-footer {display:none;}</style><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'><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>
catatan:

  • jumlah kode <data:post.body/> pada suatu template biasanya berbeda-beda,apabila anda menggunakan template bawaan blogger maka anda akan menemukan 3 buah kode <data:post.body/> ,silahkan anda hapus kode <data:post.body/> yang kedua atau yang ketiga lalu gantikan dengan kode diatas.
  • Teks yang saya beri warna merah adalah untuk menonaktifkan fungsi post footer baik dihalaman homepage maupun statis.Anda dapat menghapus kode tersebut jika anda ingin mengaktifkan fungsi post footer.


8.Agar tampilan kelihatan lebih menarik,anda dapat memasukkan css berikut ini diatas kode ]]></b:skin>.
/* Read more----------------------------------------------- */
.rmlink a{font-family:cuprum; background-color:#45818e; color:#FFF; font-size:12px; padding:1px 3px 1px; text-transform:none}
.rmlink a:hover{background-color:#2E5760}
9.Jika sudah,silahkan anda klik simpan.

Terakhir,kunjungilah homepage blog anda dan lihatlah apabila auto readmore telah muncul maka anda telah berhasil memasang auto readmore di posting blog anda.
Bagaimana? cukup mudah bukan?
Assalamualaikum.

20 komentar

sama-sama dan terimakasih atas kunjungannya gan :)

thx ya, ehh dr tadi cobain 1,1 script para blogger pada gk mau semua, apa masalhnya kerna perubahan blogger ya, soalnya yg ku temuin itu script lama, rata2 2013 kebawah tahunnya.., thx ya

terimakasih atas kunjungannya gan.
Oya karena template blogger lama itu lebih mudah di midifikasi gan,semisal template minima yang paling mudah di modifikasi.

Mas, ini untuk blog dengan template yang barukan??

Makasih sudah terpasang liat di mysakurapengetahuan.blogspot.com

ada,coba ulangi lagi dengan lebih teliti dan sabar.. terimakasih atas kunjungannya

Terimakasih,saya sudah liat blog nya..mudah-mudahan bisa lebih bagus kedepannya daripada blog saya.

makasih gan Memasang auto readmore di posting blogger berhasil di blog saya ini sempurna

sama gan,alhamdulillah :)
terimkasih atas kunjungannya

Makasi bang infonya, sudah saya terapkan dan sukses maklum template bawaan blogger memang harus rubah sana sini dulu ya wkwe

kunjungi juga blog saya jika berkenan : (blog cerpen) pena-arn.blogspot.com atau ( blog teknologi ) sambungin.blogspot.com

follback Google plusnya juga bang.

oke terimakasih gan udah mampir.
sudah di follback

gk work gan mohon bantuannya ..
http://www.koraninformasi.com/

di posting ada 2 opsi readmore otomatis,,pilih salah satu aja gan..

Berkomentarlah dengan kata-kata yang baik dan dilarang mencantumkan link berbau pornografi,iklan