Home » » Cara Membuat Read More Otomatis Di Blog

Cara Membuat Read More Otomatis Di Blog

Oktri Blog | Tutorial Blog | Belajar Blog | Cara Membuat Read More Otomatis Di Blog - Mungkin rekan-rekan blogger oktri Tutorial Blogspot masih ada yang bingung mengenai Apa Itu Read More?. Didalam tutorial ini sebelumnya sudah pernah membahas Cara Membuat Read More Otomatis namun dalam tutorial sebelum nya masih ada teman kesuliatan karen belum pernah menggunakan read more manual

Sebelum jauh membahas Read More kita jawab terlebih dahulu mengenai Apa itu Read Moro ?. Read More atau dalam bahasa tercinta bahasa Indonesia adalah "Baca Selengkapnya" Tentu sudah sering sobat jumpai di blog-blog yang lain. Nah dari sini kita bisa memahami mengenai Read More yaitu penggelan kalimat dalam  suatu postingan. banyak dari para blogger menggunakan fasilitas Read More dengan maksut untuk menghemat tempat pada halaman blognya. dilihat dari segi estetika atau keindahan, blog yang menggunakan Read More terlihat lebih rapi dan simple dibanding dengan blog yang tidak menggunakan Read More.

Berikut Resep Cara Membuat Read More Otomatis Di Blog :

  1. Login Kehalaman Blogger
  2. Dari bagian dashbord blog Pilih Template --> Edit HTML --> Proses atau Lanjutkan
  3. Jangan lupa centang Expand Widget Templates
  4. Sekarang Cari Kode </head> (Gunakan Tombol CRTL + F dan F3 untuk mempermudah pencarian kode)
  5. Jika sudah ketemu Copy dan letakan diatas kode </head> tersebut.
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </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>


     6. Tahap selanjutnya cari lagi salah satu kode berikut : <data:post.body/> atau <p><data:post.body/></p>
     7. Ganti Kode yang anda temukan diatas dengan kode berikut 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>

  1. Kemudian Simpan Template.
Keterangan :
  • summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
  • summary_img = 360 –-> untuk tinggi postingan dengan gambar.
  • img_thumb_height = 120 –> tinggi gambar.
  • img_thumb_width = 150 –> lebar gambar.
  • Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.
Silahkan sobat atur sesuai template sobat. Selamat berkreasi
Demikian Tutorial Blog mengenai Cara Membuat Read More Otomatis Di Blog dari Oktri Complete kali ini. selamat mencoba dan semoga bisa bermanfaat.





Artikel Terkait:

4 komentar:

  1. coba di ulangin lagi mas bro... saya barusan udah nyoba di bt lagi tutorial ini diblog lain 100% sukses ...mungkin ad yg salah

    BalasHapus
  2. mas itu yang dicopyin di atas head semuanya??

    BalasHapus
    Balasan
    1. hanya langkah ke 5
      terima kasih sudah berkomentar

      Hapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri