Cara Membuat Read More di Blogspot

Cara Buat Read More di Blogger - Untuk membuat tulisan Read More otomatis di blogger dengan thumbnail mode yang work 100%, kita harus memperhatikan pengeditan HTM dengan menambahkan script thumbnail_mode dan summary, pada template Blogspot kita. Berikut ini, langkah-langkah untuk membuat read more otomatis di blogspot (work 100%) :

- Masuk akun blogger.

- klik Template »» cadangkan/pulihkan 

- Setelah template diback up »» Klik edit HTML

- Tekan Ctrl F bersamaan »» Cari kode ini »»  <b:template-skin>

- Jika sudah ketemu, klik tanda panah warna hitam yang sejajar dengan kode diatas.

- Copy kode dibawah ini, kemudian paste tepat sebelum / diatas kode »» ]]></b:template-skin>

.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;

}

- Setelah itu simpan / save template.

- Copy script dibawah ini:

  <script type='text/javascript'>
      var thumbnail_mode = &quot;yes&quot;;
      summary_noimg = 300;
      summary_img = 250;
      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>

- Paste tepat sesudah / dibawah kode »» ]]></b:template-skin>

- Simpan / save template.

Setelah itu cari kode <data:post.body/> (biasanya lebih dari satu), carilah data post body dengan itemprop='articleBody' yang berada dibawah kode id='post' var='post'. Kalau masih bingung, sobat bisa lihat penjelasan dengan gambar dibawah ini. Scroll perbesar gambar, untuk melihat kode yang kurang jelas.

- Nah jika sudah ketemu, hapus kode <data:post.body/> kemudian ganti dengan kode dibawah ini:

<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>

- Simpan Template
- Selesai, dan hasilnya akan seperti gambar dibawah ini:

Penerapan script read more dengan thumbnail ini saya aplikasikan dari blog trikseosimple. Sekian cara membuat read more dengan thumbnail di blogspot yang dapat saya ulas. Semoga bermanfaat.

Posted by Unknown on 18/04/2014- Rating:4.5

Title : Cara Membuat Read More di Blogspot
Description : Cara Buat Read More di Blogger - Untuk membuat tulisan Read More otomatis di blogger dengan thumbnail mode yang work 100%, kita harus me...