Memasang Perintah Read More Artikel Blog Secara Otomatis





Read More merupakan sebuah penggalan kata yang biasanya terletak pada sebuah artikel/ postingan. Kegunaan dari Read More yaitu untuk merapikan dan mempersingkat artikel/ postingan yang panjang menjadi lebih singkat dan rapi. Biasanya artikel yang memasang Read More ini hanya menampilkan gambar dan beberapa kalimat penjelasannya.

Sebenarnya kata yang memasang fungsi Read More pada sebuah artikel tidak harus berupa kata Read More saja, tapi ada beberapa kata yang biasanya digunakan untuk fungsi ini, seperti: Baca Selengkapnya, Lanjutkan Membaca, dsb.

Untuk lebih jelasnya silahkan lihat contoh artikel dari saya yang memasang fungsi Read More dibawah ini:


Jika kalian ingin mencoba untuk menerapkannya pada blog kalian, silahkan ikuti langkahnya berikut ini:

PERHATIAN:
Back Up telebih dahulu Template HTML asli, langkah ini dimaksudkan untuk mengembalikan HTML seperti semula jika terjadi kesalahan. Lakukanlah dengan hati-hati dan penuh ketelitian.


  • Masuk ke akun Blogger kalian. 
  • Pilih Tempate > Edit HTML
  • Cari kode </head> "tekan Ctrl+F untuk mempermudah menemukannya"
  • Setelah kode ditemukan, kemudian Copy kode dibawah ini dan letakan/Paste tepat diatas kode </head>.
  • <!--ReadMore http://trikseosimple.blogspot.com-->

    <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:#FF0000;  text-decoration:none;font:bold 13px Arial;padding:5px;}
    .read-more a:hover{text-decoration:none;background:#71B;}
    .pic{border: 1px solid #f00;float:left;height:180px;width:275px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 1px 1px 1px #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 = 400; //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-->
  • Simpan/Save terlebih dahulu Template
  • Selanjutnya scroll kebawah pada template dan cari kode Blog Posts/Posting Blog. Jika sulit menemukannya, coba cari kode <b:widget id='Blog1' "tekan Ctrl+F untuk menemukannya"
  • Jika sudah ditemukan klik tanda panah warna hitam disebelah kiri
  • Selanjutnya cari kode post' var='post
  • Setelah menemukannya klik tanda panah hitam dikiri yang letaknya lurus dengan kode post' var='post tersebut.
  • Setelah tanda panah hitam diklik, maka akan terbuka kode yang lainnya.
  • Scroll kebawah dan carilah kode <data:post.body/>

  • Setelah kode ditemukan, hapuslah/gantilah kode <data:post.body/> 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 -->
  • Silahkan klik Save/Simpan Template kemudian ceklah hasilnya.

Related Post