Breaking News
Loading...

Cara Pasang read More Otomatis di Blog

19.14
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUHv27Eq2hlYpLbsymWQ5_52DfjdhFl0FAI7Lpa9AlXS81vTNWaZTZMxMhZOwr8k1bKGKIUUfUTU7lcmZ_ed9zAvXTMC8T3pkzLGpVCi0Tp6oTVYhM3XuX1Ox4DfbM_M6o7s7BKRKp28o/s1600/read-more-1-L.jpgPasang read more otomatis di blog. Fungsi Readmore/baca selengkapnya pada posting adalah untuk menghemat halaman depan website/blog agar tidak terlalu panjang, selain itu juga dapat merangsang pengunjung untuk membaca salah satu posting di halaman depan website/blog tersebut.

Nah jika berkeinginan untuk pasang readmore otomatis pada blogspot Anda, silahkan ikuti langkah-langkahnya sebagai berikut:

Sebelum memulai memasang readmore otomatis pada blogspot/blogger Anda, ada baiknya perhatikan hal-hal sebagai berikut :

  1. Download dan simpan template Anda terlebih dahulu, karena jika pemasangan gagal anda masih bisa mengembalikan blog anda seperti semula;
  2. Jangan lupa untuk memberi tanda centang pada tulisan Expand widget template;
  3. Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Anda klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Anda, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next;
  4. Ini yang paling penting, apabila sebelumnya Anda sudah menggunakan Readmore versi lama, maka hapus dulu codenya.

Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut:
  1. Login ke Account Blogger Anda;
  2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini:
    <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>
  3. Cari dan ganti kode <data:post.body/> dengan semua kode dibawah 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'>READMORE - <data:post.title/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

    Keterangan:

    Biasanya kode: <data:post.body/> berada di bawah kode: <div class='post-body'>, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas.
  4. Simpan/Save Template, selesai.

Keterangan:

Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode merah tebal di atas dan berikut penjelasannya :
  1. var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
  2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
  3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
  4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran piksel;
  5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran piksel;
  6. READMORE-<data:post.title/>: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, Anda bisa menghapus code script ini <data:post.title/>.






= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

6 komentar:

  1. MANTABS MASTER HORE AKU PERTAMAXXX

    BalasHapus
  2. horee aq keduaxxx hehehe seep master dah dipraktekin master

    BalasHapus
  3. horeee jugaaa ketigaaxxxxx besarrr

    BalasHapus
  4. wah kayaknya gak sulit sulita amat hahahaha

    BalasHapus
  5. sobat, gimana cara menonaktifkan read more pada menu blog, di menu blog kan saya buat tukar link, truz pada saat menu tukar link tersebut di buka, Read More nya tidak berfungsi sobat, bantuin donk sobat sobat..

    BalasHapus
  6. @ Artikel Menarik : Pindahkan postingan anda dari Edit LAMAN ke Edit ENTRY. setau saya kalau postingan laman tidak bisa dibuka sama read more jadi anda pindah ke posting Edit Entry.

    BalasHapus

Terima kasih sudah mau berkunjung ke Blog sederhana ini, Tidak ada salahnya untuk memberikan komentar untuk kemajuan blog ini.
Catatan komentar yang tidak ditampilkan :
1. Komentar SPAM
2. Komentar tidak bermutu / tidak nyambung.
3. Memasukan Link ke dalam kotak komentar blog.

 
Toggle Footer