Cara Mudah Membuat Read More di Blog

fiantutorial.blogspot.com - Hai sobat Fian, banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang mebahas bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Ngomong-ngomong mungkin blogger pemula atau newbie masih bingung apa itu readmore? Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll.

Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Cara Membuat Readmore Otomatis dengan Gambar

  • Silahkan buka template kalian. Pilih: Template >> Edit HTML.
  • Cari Kode </head>. (Pakai CTRL+F)
  • Copy paste kode dibawah ini tepat di atas kode </head>

    <!--ReadMore http://fianfain.web.id-->

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style>
    .post-body{text-align:justify;}
    .post-body img{max-width:none;width:auto;}
    .read-more{float:left; padding-top: 10px;}
    .read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
    .read-more a:hover{text-decoration:none;background:#666;}
    .pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
    .grow img{height:165px;width:250px;transition: all 2s ease;}
    .grow img:hover{width:400px;height:250px;}
    </style>
    <script type='text/javascript'>
    var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
    summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
    summary_img = 250; //banyaknya huruf jika ada gambar
    img_thumb_height = 165;
    img_thumb_width = 250;
    </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(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
    //]]></script>
    </b:if>
    </b:if>

    <!--Auto Read More Akhir-->

  • Save Template kalian.
  • Kemudian scroll template kalian ke bawah, cari kode seperti berikut:
 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
  • Jika suda menemukan kode seperti di atas silahkan klik anak panah kecil warna hitam sebelah kiri (sebelahnya angka/urutan).
  • Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
  • Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
  • Selanjutnya akan terbuka kode kode yang lain. Scroll ke bawah dan cari kode

         <data:post.body/>
  • Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:

        <!-- Auto read more Mulai -->
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <data:post.body/>
        <b:else/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
        <b:else/>
        <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>
              <div class='read-more'>
              <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
              </div>
        </b:if>
        </b:if>
        <!-- Auto read more Akhir -->
  • Klik SAVE dan lihat hasilnya pada beranda blog kalian.
Terlihat sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya. Sekian dulu tutorial tentang cara membuat readmore di blog dengan mudah semoga bermanfaat dan jika masih ada yang tidak dimengerti kalian bisa tanya di kolom komentar.
Terima kasih~

    0 Response to "Cara Mudah Membuat Read More di Blog"

    Post a Comment