Surya Bina Mitra: 2 Cara Bagaimana Membuat Readmore Otomatis

Sabtu, 08 Desember 2012

2 Cara Bagaimana Membuat Readmore Otomatis

Read More Terbaru ..

Salah satu Blog saya sebelumnya readmore otomatis yang sudah saya pasang tiba tiba tidak work lagi, saya tidak tahu mengapa, mungkin ada template dari css yang secara otomatis membuat read more tersebut tidak work. Sehingga saya menghapusnya dari template.

Juga ada seorang rekan malahan sering bertanya cara membuat readmore, karena dia mengatakan bahwa tidak bisa memasang readmore otomatis di blognya.

Nah .. kali ini saya akan membahas 2 (dua) cara membuat readmore otomatis Terbaru. Dan salah satunya sudah saya coba dan ternyata hasilnya cukup bagus.
Dan Kenapa saya tulis Terbaru !! karena sebelumnya saya sudah pernah membahas Cara membuat readmore otomatis dalam artikel seperti dalam judul dibawah ini;
- Cara membuat read more pada posting blog dan halaman depan blogger
- How to make ‘READ MORE’ on blog posts and front page blogger

Berikut adalah cara – caranya tersebut:

Cara Pertama;

1. Log in ke blog anda
2. KLik Rancangan / Template
3. KLik Edit HtmL
4. Cari Kode
5. Dan Letakan kode di bawah ini Di atas kode

ini Scriftnya yang harus dipasang

var summary_noimg = 300,

summary_img = 300,

img_thumb_height = 80,

img_thumb_width = 90;

</script>

//<![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 alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" 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>

5. Simpan Template
6. Setelah Anda simpan Template Lalu Centang Expand Template widget Dan Cari Kode di Bawah ini

<data:post.body/>

Setelah ketemu Anda Hapus kode Tersebut dan Ganti dengan Kode ini

ini Scriftnya yang harus dipasang sebagai pengganti

<b:if cond='data:blog.pageType == "item"'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == "static_page"'>

<data:post.body/>

<b:else/>

</script>

<a class='more' expr:href='data:post.url'> READMORE....!! </a>

</b:if>

7. Klik SIMPAN.

Kode javascript terbaru ini ringan dan juga ukuran thumbnail nya sudah di optimasi agar ukurannya mengecil dan loadnya ringan kode ini pernah di bahas di blog bang Taufik.
Post ini sengaja saya update karena beberapa blogger gak mengerti maksud tulisan di blog tersebut.

Cara Kedua;

CARA MEMBUAT AUTO READ MORE OTOMATIS DENGAN GAMBAR THUMBNAIL DI BLOGGER
Pertama yang harus dilakukan adalah klik Rancangan -> Edit HTML -> tanda tik/centang Expand Widget Template. Setelah itu ikuti panduan di bawah.

Penting: coba dulu di blog eksperimen. Jangan di blog utama.

1. Cari kode </head>
2. Letakkan kode berikut di atasnya kode no. 1 (klik View plain untuk mengcopy)

1. <script type='text/javascript'>

2. var thumbnail_mode = "float" ;

3. summary_noimg = 230;

4. summary_img = 140;

5. img_thumb_height = 100;

6. img_thumb_width = 100;

7. </script>

8. <script src='http://keerthiset2.110mb.com/excerpt.js' type='text/javascript'/>

Catatan: angka-angka di atas dapat dirubah sesuai selera.

3. Cari kode berikut: <data:post.body/>
4. Ganti kode tersebut dengan kode di bawah (klik View plain untuk mengcopy)

1. <b:if cond='data:blog.pageType == "item"'>

2. <data:post.body/>

3. <b:else/>

4. <div expr:id='"summary" + data:post.id'>

5. <data:post.body/>

6. </div>

7. <script type='text/javascript'>

8. createSummaryAndThumb("summary<data:post.id/>");

9. </script>

10. <div style='clear: both;'/>

11. <span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Reade more >></b></a></span>

12. </b:if>

5. Klik Simpan Template. Selesai.
Kalau Anda sudah mengikuti kedua cara tersebut, tapi "read more"-nya tidak muncul, maka lakukan setting/setelan "Pilih Editor Entri yang Dimutakhirkan."

Caranya, ikuti tip berikut:

1. Caranya, masuk ke Blogger.com -> Pengaturan -> Dasar -> Setting Global (paling bawah) ->
2. Centang / kasih tanda tik pada "Editor yang dimutakhirkan."
3. Jangan lupa klik Simpan Setelan.

PERHATIAN :

Jika Sobat Sukses Menggunakan Readmore Otomatis Pada Blog Sobat dan Jika Bermasalah di Halaman Static Blog (Page Menu) Readmore tidak berfungsi, sobat bisa mengatasi masalah tersebut dengan cara mengikuti tutorial dibawah ini;

Cara Mengatasi Masalah Halaman Statis Karena READMORE Otomatis.

Mengenai artikel ini;
Diijinkan untuk mengutip sebagian kecil artikel ini--tidak boleh seluruhnya -- dengan menyebutkan link dan sumber. Apabila ditemukan copy/paste seluruh artikel akan diajukan ke DMCA Google Complaints http://support.google.com/bin/static.py?hl=en&ts=1114905&page=ts.cs
supaya di-banned dari Google search. Harap maklum
Oke segitu aja ya semoga berhasil.

Edit; wawansurya
Sumber ;
www.affiliate-waones.com
http://mitra-sbm.blogspot.com
http://waones-sbm.blogspot.com
http://hompimpaalaihumgambreng.blogspot.com/2012/04/optimasi-thumbnail-pada-auto-read-more.html

merchant