Cara membuat readmore di blogger tanpa javascript dan dengan javascript

,

Gambar 0.1 image Readmore.
Cara membuat readmore atau baca selengkapnya itu sangat gampang asal artikel ini dipahami, soba pasti bisa ini khusus script untuk blogger yah / blogspot.

Saya akan kasih script 2 versi, yang satu dengan javascript dan yang satunya lagi tanpa javascript.
untuk blog saya ini saya pake yang non javascript karena lebih ramah lingkungan.

oke kita mulai dulu readmore tanpa javascript.

Readmore tanpa javascript

Kelebihan
» Loading blog cepat.
» Cara pemasangan gampang.

Kekurangan
» Tidak bisa membatasi jumlah karakter yang tampil.
» Tidak terlalu bagus di versi web, karena text terlalu sedikit.

Cara pemasangan:
Cari kode html <data:post.body/> yang kedua atau yang ketiga, biasanya untuk template standar data:post.body yang kedua, dan ganti dengan kode berikut.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px'

height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Readmore Dengan javascript


Dan yang pake javascript, kalo ini agak ribet, soalnya ada script javascript dan html.

Kelebihan
» Loading blog agak lambat.
» Cara pemasangan susah.

Kekurangan
» bisa membatasi jumlah karakter yang tampil.
» bagus di versi web, karena text panjang dan bisa disesuaikan.

Pertama cari kode </head> dan pasang script ini tepat diatasnya.

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

Belum selesai bro, masih harus cari kode lagi, Cari kode html <data:post.body/> yang kedua atau yang ketiga, dan ganti dengan kode berikut.

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

Semoga membantu , dan bermanfat, trimakasih sudah mau nyimak.

1 komentar:

  1. Saya lebih memilih yang tanpa script. Karena gampang dan gak ribet

    BalasHapus

Maaf, fitur koment hanya untuk pengguna akun goggle saja.
Dikarenakan untuk meminimalisir komentar spam.