Membuat Posting Read More/Baca Selengkapnya untuk Blogspot

Tabel Konten
  1. Sedikit Penyesuaian: 
  2. Pertimbangkan Juga Beberapa Posting Ini: 

Posting Read More/Baca Selengkapnya dibuat dengan tujuan untuk meringkas artikel-artikel yang terlalu panjang. Sangat tidak menyenangkan bagi para pengunjung andaikan mereka harus menggulung layar begitu panjang hanya untuk melihat posting-posting di bawahnya. Nah, untuk mengatasi masalah itu, umumnya para penulis akan membuat sebuah sistem ringkasan posting seperti ini:

posting auto readmore blogspot

Link/tautan Baca Selengkapnya bertugas untuk mengarahkan para pengunjung menuju halaman asli dari artikel tersebut.
Cukup dua langkah perombakan saja yang kita perlukan untuk membuat sistem ini berfungsi, hanya saja di sini Saya memberikan sedikit detail kecil untuk memperindah tampilan linknya.

Pertama-tama masuklah ke tab Rancangan kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Temukan kode ini:

</head>

Salin kode ini, kemudian letakkan tepat di atasnya:

<script type='text/javascript'>
//<![CDATA[
    var thumbnail_mode   = "float",
        summary_noimg    = 350,
        summary_img      = 350,
        img_thumb_height = 100,
        img_thumb_width  = 120;

    /******************************************
    Script Posting Read-More versi 2.0 (blogspot)
    (C)2008 oleh Anhvo
    ********************************************/
    function createSummaryAndThumb(a) {
        var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";b.innerHTML=f}function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var c=a.split("<");for(var d=0;d<c.length;d++){if(c[d].indexOf(">")!=-1){c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length)}}a=c.join("")}b=b<a.length-1?b:a.length-2;while(a.charAt(b-1)!=" "&&a.indexOf(" ",b)!=-1)b++;a=a.substring(0,b-1);return a+"...";
    }
//]]>
</script>

Setelah itu cari kode yang tampak seperti ini:

<data:post.body/>

TIP: Tekan CTRL + F lalu ketik data:post.body untuk mempermudah pencarian.

Ganti kode tersebut dengan ini:

<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'><a expr:href='data:post.url'>Baca Selengkapnya</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>

Klik Pratinjau untuk sekedar mengecek perubahannya.

Sistem ringkasan posting ini sebenarnya sudah bisa berfungsi dengan baik, jadi kamu bisa langsung menyimpan perubahannya. Tapi jika kamu ingin memberikan sedikit kegantengan lagi dalam sistem postingmu ini, kamu bisa memberikan efek seperti tombol pada link Baca Selengkapnya.

Salin kode CSS di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

.rmlink a        {background:#567856;color:#fff;padding:2px 15px 3px;margin:15px 0 0;border:0;float:right;text-decoration:none;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;font-weight:bold;}
.rmlink a:hover  {background:#FFDD56;color:#000;}
.rmlink a:active {background:#000;color:#567856;}

Klik Simpan Template.

Sedikit Penyesuaian: 

  • Tentukan banyaknya huruf yang ditampilkan dalam variabel summary_noimg (jika postinganmu tidak terdapat gambar) dan summary_img (jika postinganmu terdapat gambar).
  • Tentukan lebar dan tinggi thumbnail dalam variabel img_thumb_width dan img_thumb_height.

Pertimbangkan Juga Beberapa Posting Ini: 

39 Komentar

  • Unknown

    salam sahabat
    bagus cara yang praktis ini mas
    oh iya makasih dan udah saya follow

  • Yopi Hasopa

    mas, saya mau nanya. Kalau kode buat menampilkan gambarnya saja atau tulisannya saja di readmore otomatis ini apa yah? Saya coba utak-atik ternyata tidak bisa dipisah kodenya.

    Mohon bantuannya, saya masih newbie :D
    Terima kasih.

  • Taufik Nurrohman

    @Yopi Hasopa Kalau mau menampilkan gambar saja ya tinggal di-nol-kan saja summarynya:

         var thumbnail_mode   = "float",
    summary_noimg    = 0,
    summary_img      = 0,
    img_thumb_height = 100,
    img_thumb_width  = 120;
  • Yopi Hasopa

    @Taufik Nurrohman Maksudnya gini kang.

    Saya ingin menampilkan gambar dan tulisaannya di tag DIV yang berbeda. Sementara untuk kode :

    <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'><a expr:href='data:post.url'>Baca Selengkapnya</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    </b:if>

    gambar dan tulisannya menjadi satu kesatuan. Saya sulit memisahkannya. Kira-kira bagaimana solusinya?
    Terima kasih..

  • Taufik Nurrohman

    @Yopi Hasopa Oh, nggak perlu mengedit bagian itu kok. Di dalam script utama kan sudah ada markup HTML-nya, tinggal mengedit bagian itu saja:

    function createSummaryAndThumb(a) {
    var b=document.getElementById(a);
    var c="";
    var d=b.getElementsByTagName("img");
    var e=summary_noimg;
    if(d.length>=1) {
    c='<span style="float:left;padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>';
    e=summary_img
    }
    var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";
    b.innerHTML=f
    }
    function removeHtmlTag(a,b) {
    if(a.indexOf("<")!=-1) {
    var c=a.split("<");
    for(var d=0;d<c.length;d++) {
    if(c[d].indexOf(">")!=-1) {
    c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length)
    }
    }
    a=c.join("")
    }
    b=b<a.length-1?b:a.length-2;while(a.charAt(b-1)!=" "&&a.indexOf(" ",b)!=-1)
    b++;
    a=a.substring(0,b-1);return a+"...";
    }

    Khususnya di bagian ini:

    // Ini bagian thumbnail
    c='<span style="float:left;padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>';

    dan ini:

    // Ini bagian paragraf
    var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";
  • Baharudin Nofiandi

    mas bro saya mu nanya, kalo untuk nampilin gambar + judulnya aja gimana? terus di halaman depan dibagi dua kolom, kaya toko online gitu mas, aku mau buka toko mas,
    mohon bantuan terimakasih.

  • Taufik Nurrohman

    @bahar Hapus kode ini:

    var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";

    Mengenai cara membelah posting menjadi dua akan Saya bahas lain kali dalam postingan.

  • Anonim

    @Taufik Nurrohman mas bro kalo pengin posisi tulisannya di bawah gambar gimana? gambar sama tulisan di tengah2, thanks.

  • Taufik Nurrohman

    @Puri Sefty Coba ini:

    <script type='text/javascript'>
    //<![CDATA[
    var thumbnail_mode = "float",
    summary_noimg = 350,
    summary_img = 350,
    img_thumb_height = 100,
    img_thumb_width = 120;
    /******************************************
    Script Posting Read-More versi 2.0 (blogspot)
    (C)2008 oleh Anhvo
    ********************************************/
    function createSummaryAndThumb(a) {
    var b = document.getElementById(a),
    c = "",
    d = b.getElementsByTagName("img"),
    e = summary_noimg;
    if (d.length >= 1) {
    c = '<div class="separator"><img src="' + d[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></div>';
    e = summary_img;
    }
    var f = c + "<div>" + removeHtmlTag(b.innerHTML, e) + "</div>";
    b.innerHTML = f;
    }
    function removeHtmlTag(a, b) {
    if (a.indexOf("<") != -1) {
    var c = a.split("<");
    for (var d = 0; d < c.length; d++) {
    if (c[d].indexOf(">") != -1) {
    c[d] = c[d].substring(c[d].indexOf(">") + 1, c[d].length)
    }
    }
    a = c.join("");
    }
    b = b < a.length - 1 ? b : a.length - 2;
    while (a.charAt(b - 1) != " " && a.indexOf(" ", b) != -1) b++;
    a = a.substring(0, b - 1);
    return a + "...";
    }
    //]]>
    </script>
  • Farid Wajdi Kardbri

    kalau untuk meratakan postingan auto readmorenya gimana?
    kan gambar diatas terlihat cuplikan postingannya tidak rata (align:left) nah kalau buat jadi rata (align:justify) gimana yah??

  • Taufik Nurrohman

    @Farid Wajdi Kardbri Letakkan kode ini di atas ]]></b:skin>:

    div[id^="summary"] {
    text-align:justify;
    }
  • Farid Wajdi Kardbri

    @Taufik Nurrohman wah makasih banyak yah mas :) sekian lama ane tunggu jawaban dari mas... udah keliling nanya sana sini gak ada yang bisa akhirnya sekarang kesampean juga, skali lagi makasih yah mas :)
    ane jadi terharu :'(

  • Bayu Handono

    mas gmana caranya kalo pengen ngembaliin supaya postingan ngga pake readmore, jadi full post lagi?? :)

  • Unknown

    kunjungan rutin mas taufik...
    Pertanyaanya :
    kalau artikel tidak memiliki gambar.. pengganti gambarnya pake tambahan script gimana... ??

    • Taufik Nurrohman

      Gunakan else

      function createSummaryAndThumb(a) {
      var b = document.getElementById(a);
      var c = "";
      var d = b.getElementsByTagName("img");
      var e;
      if (d.length >= 1) {
      c = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="' + d[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
      e = summary_img;
      } else {
      c = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="URL-Gambar-Cadangan.jpg" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
      e = summary_noimg;
      }
      var f = c + "<div>" + removeHtmlTag(b.innerHTML, e) + "</div>";
      b.innerHTML = f;
      }
      function removeHtmlTag(a, b) {
      if (a.indexOf("<") != -1) {
      var c = a.split("<");
      for (var d = 0; d < c.length; d++) {
      if (c[d].indexOf(">") != -1) {
      c[d] = c[d].substring(c[d].indexOf(">") + 1, c[d].length);
      }
      }
      a = c.join(" ");
      }
      b = b < a.length - 1 ? b : a.length - 2;
      while (a.charAt(b - 1) != " " && a.indexOf(" ", b) != -1) b++;
      a = a.substring(0, b - 1);
      return a + "...";
      }

      Ganti URL-Gambar-Cadangan.jpg dengan URL gambar cadangan.

      • Unknown

        lebih singkat ya om ... saya bisanya gak pernah pake else.. gagal mulu atur script if else nya .. hehehe .. biasanya pakai seperti ini .. jadi dobel penggunaan if
        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");
        if(img.length < 1) {
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://css3-tutsplus.googlecode.com/svn/trunk/personal/images/css-tutsplus-no-image.jpg" width="' + img_thumb_width + 'px" width="125px" height="125px"/></span>';
        var summ = summary_noimg
        }
        if(img.length >= 1) {
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s200") + '" width="' + img_thumb_width + 'px" width="125px" height="125px"/></span>';
        summ = summary_img
        }
        var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
        div.innerHTML = summary
        }

        makasih ach.. izin praktek buat tutorial ya om..

        • Taufik Nurrohman

          Di tes dulu... :)

          • Unknown

            udah di tes di blog ini om http://css-tutsplus.blogspot.com/

            • Unknown

              hehehe.. script dari om taufik kagak berhasil.. hanya artikel pertama saja yang bisa di buat readmore.. kalau masalah gambar cadangannya sudah berhasil.. dan sebagian artikel selalu muncul duplikat judul post..

              saya coba utak atik lagi dech.. mungkin ada yang salah penempatan dengan HTML nya..

  • Unknown

    maaf sob mengganggu udah 2 hari 2 malem nyelesaikan masalah kok gak klar2... menu readmore mengganggu ditampilan page (halaman) mohon pencerahan. ini scriptnya disini http://gudang-informasi-blogging.googlecode.com/files/simple-white-infonetmu.xml

  • Anonim

    kang bisakah script ini di rubah

    $(document).ready(function(){$("img").each(function(){var b=$(this);var a=b.attr("src");b.attr("alt",a.substring((a.lastIndexOf("/"))+1,a.lastIndexOf(".")));b.attr("title",a.substring((a.lastIndexOf("/"))+1,a.lastIndexOf(".")))})});
    

    kalo script ini merename sesuai nama.jpg bisa kah jika di kodisikan dalam blog itu merename blog.title, tanda tanya lain bisakah srcipt itu fokus pada post.body

    ditunggu penjelsannya kang

  • Anonim

    apa benar begini kang

    
    function getTitle(str) {
    var a = str.lastIndexOf('/') + 1,
    b = str.lastIndexOf('.');
    str = decodeURIComponent(str.substring(a, b));
    str = str.replace(/\+/g, " ");
    return str;
    }
    var title = document.getElementById('image').src;
    document.getElementById('data:post.title').innerHTML = getTitle(title);
    
    • Taufik Nurrohman

      Bukan sama sekali! ~x(

      • Anonim

        wah gak etis banget serius ne kang,trus yang bener gmn yo

  • neylan

    nambahin jumlah komentar gimana caranya

    • Taufik Nurrohman

      Ganti kode ini:

      <span class='rmlink'>
      <a expr:href='data:post.url'>Baca Selengkapnya</a>
      </span>

      dengan ini:

      <span class='rmlink'>
      <a expr:href='data:post.url'>Baca Selengkapnya</a>
      <a expr:href='data:post.url + &quot;#comments&quot;'><data:post.commentLabelFull/></a>
      </span>
  • Unknown

    mau nanya...
    kayak mana cara nya agar auto readmore nya...
    ada di halaman laman.... om.... :(

  • Anonim

    Kalau Metode Readmore Seperti Gambar Dibawah ini Gimana Mas Taufik ...???

  • Abdelghafour

    Thank you for this tutorial.
    I have got a problem in the widget, The problem is when I add an anchor in the article it doesn't show up in home page you need to enter to the article to be able to click on it.
    My question is how I can show the anchors in the home page.

    Thank you.

    • Taufik Nurrohman

      It will not work becase this script will strip out all of the HTML tags of the post content. You can use the native Blogger feature for cropping the post content using the <!--more--> marker.

  • Cahya Septyanto

    Permisi bang, ane kan udah ngikutin sesuai dengan tutorial di atas, tapi kenapa gak ada efek perubahan apa2 ya ?
    FYI, Template ane masih dasar atau bawaan dari pertama kali buat blog, terimakasih..

    • Taufik Nurrohman

      Mungkin bagian yang kamu ganti itu adalah kode posting untuk tampilan seluler.

  • Unknown

    Permisi Mas, saya berhasil memasang auto read more ini, tetapi tampilan responsive untuk gambar didalam postingan saya tiba tiba hilang fungsinya. Lainnya responsif Mas, hanya gambarnya saja. Padahal kode .post-body img sudah saya ganti menjadi .post-body img {
    padding: 0;
    width:auto;
    max-width:100%;
    height:auto;
    }

    Tapi setelah memasang auto readmore ini tidak berfungsi, apakah gara-gara javascript tersebut ya Mas ?
    Mohon bantuannya :)

    • Taufik Nurrohman

      Coba ganti:

      width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"

      menjadi:

      width="'+img_thumb_width+'" height="'+img_thumb_height+'"

Komentar telah ditutup.