Minggu, 05 Januari 2014

Cara Membuat Read More Otomatis di Blogger


,

Pada halaman awal (home page) yang berisi beberapa artikel mungkin akan sangat panjang untuk ditampilkan. Belum lagi pada setiap artikel tersebut membuat banyak gambar sehingga akan memakan waktu loading halaman yang cukup lama. Oleh karena itu fungsi Read More atau baca selengkapnya sangat dibutuhkan untuk meringkas artikel-artikel pada halaman awal. Ada dua cara dalam pembuatan Read More yaitu cara manual dan Otomatis. Pada posting kali ini Kak Hady akan membagikan cara yang otomatis. Berikut adalah langkah-langkahnya.

  1. Login ke Blogger akun anda
  2. Pada dasbor blog anda silahkan pilih Template
  3. Klik Edit HTML
  4. Cari Kode </head>
  5. Copy paste kode dibawah ini tepat di atas kode </head>
    <!--Auto Read More Awal-->

    <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-->
  6. Scroll ke bawah dan cari kode <data:post.body/> yang terakhir
  7. Setelah ketemu hapus kode <data:post.body/> dan ganti dengan kode di bawah ini:

    <!--Auto read more Awal-->
    <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-->

  8. Simpan Template dan lihat hasilnya.
Baca juga:

Kak Hady Berbagi

1. Terima kasih telah berkunjung dan membaca artikel ini

Judul : Cara Membuat Read More Otomatis di Blogger
URL :
Diposkan oleh : Kang Hady
Pada : Minggu, 05 Januari 2014.
Pukul : 09:38
Label/kategori : ,
Bagikan ke : Facebook | Google+ | Twitter | Digg

2. Saya mengharapkan kritik dan saran dari pembaca semua. Untuk itu silakan berkomentar pada setiap postingan blog ini;
3. Setiap komentar yang anda berikan adalah masukan bagi saya agar blog ini lebih baik.

2 komentar:

  1. terimakasih banyak mas gan tutor membuat auto readmore nya sudah saya terapkan di blog baru saya

    BalasHapus
    Balasan
    1. Sama2 gan. Trimakasih jga sudah berkunjung ke blog sederhana saya ini.

      Hapus