CARA MEMBUAT AUTO READ MORE OTOMATIS (THUMNAILS)

auto read more

Cara Membuat Auto Read More ~ Auto Read More dengan thumnails merupakan gambar / kata disamping kalimat artikel blog yang terpotong / diperkecil dengan tambahan kalimat "Read More" atau "baca selengkapnya" atau pun kalimat lainnya yang mirip-mirip seperti itu.  Fungsinya adalah jika kita klik akan tampil dengan lengkap artikel yang terpotong sebelumnya, sehingga dapat dibaca keseluruhan artikel tersebut.

Tehnik memasang auto read more dianggap dapat membantu mempercepat loading blog karena bekerja secara otomatis dengan memenggal kalimat yang panjang dari postingan blog menjadi beberapa kata saja.

Auto read more ini juga mempercantik blog dengan menampilkan image thumbnail berupa image paling pertama di setiap artikel meskipun gambar tersebut diletakkan ditengah bahkan diakhir postingan.

Jadi bagaimana cara membuat auto read more ? Mari perhatikan dan ikuti langkah - langkah di bawah ini untuk dapat memasang auto readmore di blog anda.

1. Masuk ke blogger, klik template , klik Edit HTML

2. Letakkan kode di bawah ini di atas kode </head> , cari menggunakan Ctrl+F

<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[
/******************************************
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>


3. Cari kode <data:post.body/>  hapus kode tersebut dan ganti dengan kode di bawah 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;'>
<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'>READ MORE &#8594; </a></span>
</b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></b:if>


Kreatifitaskan auto read more sesuai kehendak dengan mengatur kode berikut :

var thumbnail_mode = "float";  memutuskan apakah letak thumbnail berada di kiri (float) atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (berapa banyak karakter yang ingin ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (tinggi thumbnail dalam ukuran pixel)

img_thumb_width = 120; (lebar thumbnail dalam ukuran pixel)


4. Dan tambahkan kode CSS berikut di atas kode ]]></b:skin agar bertambah menarik penampilan auto read more anda :

.rmlink a {
    background: none repeat scroll 0 0 #E37F52;
    border-radius: 4px;
    color: #FFFFFF !important;
    font-size: 10pt;
    font-weight: 700;
    line-height: 1;
    padding: 1px 3px 1px;
    text-transform: uppercase;
}



Ubah kode #E37F52 sesuai dengan selera anda, lihat kode warna html  untuk membantu anda mencari warna kesukaan.

Jika berhasil dalam pemasangan auto read more blog anda, maka tampilannya akan tampak seperti gambar di bawah ini :


cara membuat auto read more otomatis (thumbnails)



Selesai sudah Cara Membuat Auto Read More Otomatis (thumbnails) semoga dapat memberikan manfaat untuk blog maupun website anda, salam blogger.

38 Responses to "CARA MEMBUAT AUTO READ MORE OTOMATIS (THUMNAILS)"

  1. sore mas hengki, mohon penjelasannya
    itu kode CSS ditaruh dimana mas
    mohon bgt pnjelasannya mas
    terima kasih

    BalasHapus
    Balasan
    1. udah dicoba kok gak bisa bang ?

      Hapus
    2. Barang kali ada yang terlewatkan sob

      Hapus
    3. mas jangan lupa mampir ke blog http://aldereonpicapa.blogspot.com kalo ada penempatan post,home page yang salah tolong bantuin ya.

      Hapus
    4. Saya lihat blog anda sudah bagus sob, hanya saja pos komentarnya lebih baik diganti / di setting ulang (jangan gunakan "hanya anggota blog ini" ) jika anda tidak keberatan loh

      Hapus
  2. Bagaimana cara awalnya mas Hengku?terima kasih

    BalasHapus
    Balasan
    1. Ikuti saja dari langkah no 1 cara di atas Mas

      Hapus
  3. waktu nyari ga ada

    jadi gimana donk?

    BalasHapus
  4. Tararengkyu ya mas.. I can do it's..

    BalasHapus
  5. Balasan
    1. Barang kali ada yang terlewatkan Mas, soalnya saya sudah memasangnya.

      Hapus
  6. Data Pos Body mana yang di ganti,.. soalnya ada tiga ?

    BalasHapus
    Balasan
    1. Gunakan yang ketiga terlebih dahulu sob.

      Hapus
  7. saya praktekkan kok tidak berpengaruh, tetap tidak ada itu readmore otomatisnya gimana tuh, apanya yang kurang

    BalasHapus
    Balasan
    1. Barangkali ada yang terlewatkan sob, cek terlebih dahulu apakah sudah ada penerapan auto readmore sebelumnya , jika ada harus dinonaktifkan dahulu

      Hapus
  8. Artikel CARA MEMBUAT AUTO READ MORE OTOMATIS sangat membantu saya untuk belajar. Tutorialnya juga, udeh saya praktekin. Hasilnya bekrja dengan baik tanpa ad ERR. Thank ya Gan ...
    Neh buktinyE: http://3d-jgames.blogspot.com/

    BalasHapus
  9. Mas kok udah di lakukan tapi belum ada readmore nya mas, ?
    Mohon pencerahannya mas..

    BalasHapus
    Balasan
    1. Saya lihat sudah jadi koq mas, kalau mau bisa ditambahkan CSS nya agar penampilannya lebih bagus lagi, misalnya seperti .rmlink a { .... } di atas

      Hapus
  10. saya search kok ga ketemu mas? mohon bantuannya

    BalasHapus
  11. It's work.

    Ngedit jumlah karakter; summary_noimg dan summary_img taruh di mana sob? And kodenya gimana? thanks

    BalasHapus
  12. Info:

    di blogku ada 2 lebih. Cari yang terletak di bawah kode ini data:post.id' itemprop='articleBody'>.

    Bukan yang data:post.id' itemprop='description articleBody'

    :D

    BalasHapus
  13. awalnya gk jalan, tp setelah ganti yg ke 3 akhirnya "sempurna".
    thanks bgt gan, sangat membantu.
    check this out ondroids.blogspot.com

    BalasHapus
  14. Tenkz ya mas hengki buat info nya..
    Sangat membantu bnget buat yg pemula,,
    Sukses slalu yoo mas..

    BalasHapus
    Balasan
    1. @Denz , @Indra terimakasih atas kunjugannya

      Hapus
  15. Berkunjung mas, oh ya mas, mas itu iklannya dari mana mas? yang download (judul artkl) yg dibawah itu. daftar iklannya dimana?

    BalasHapus
  16. Berhasil gan,tapi CSS nya kok gak work?

    BalasHapus
    Balasan
    1. Barang kali ada yang terlewatkan gan

      Hapus
  17. ga berhasil mas... tetep aja,,, kira'' dimana kesalahannya

    BalasHapus
    Balasan
    1. Saya lihat blog Anda sudah dilengkapi auto readmore, kalau mau rubah lebih baik didelete dulu aja sob

      Hapus
  18. mantap mas, ijin bookmark

    BalasHapus
  19. work gan, makasih gan buat tutorialnya :)

    BalasHapus

TERIMAKASIH SUDAH BERKOMENTAR DI BLOG INI, BERIKAN G+ 1 JIKA ANDA MERASA ARTIKEL INI BERMANFAAT, DAN MAAF JIKA ADA KOMENTAR YANG TIDAK TERBALASKAN OLEH SAYA