Home » » Read More Otomatis Bergambar

Read More Otomatis Bergambar

Written By Dea Maulana Syarif on 22 Mar 2010 | 5:10 PM

Sudah lama saya ingin share tentang hal ini. Namun karena aktifitas PKL, saya jadi jarang buka blog. Baru sekarang saya sempat memposting artikel ini. Sekarang read more sudah banyak macamnya. Ada yang biasa, peek a boo, read more yang simple (seperti yang di bahas kang rohman), read more otomatis bergambar, dan yang lainnya. Langkah - langkah untuk membuat read more pun beragam sekali. Klik disini untuk membaca artikel read more yang biasa, Klik disini untuk read more peek a boo, Klik disini untuk read more yang simple. Nah pada artikel kali ini saya akan sedikit share tentang bagaimana caranya untuk membuat read more otomatis plus gambar seperti yang ada di blog ini.

Pertama masuk ke blog kamu, dan klik Tata Letak / Layout
Kemudian klik Edit HTML, dan centang expand template
Setelah itu cari kode

<p><data:post.body></p> atau <data:post.body>

yang letaknya di atas kode

<div style="clear: both;"><span class="fullpost"> <!-- clear for photos floats -->


Lihat kode di bawah ini yang berwarna Merah


<div class="post-body entry-content">

<data:post.body>

<div style="clear: both;"> <!-- clear for photos floats -->
</div>





Kemudian hapus kode <data:post.body> tadi dan ganti dengan kode bawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-right:10px;'>

</div>

<data:post.body/>
</b:if>



Sehingga kode nya menjadi seperti ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin-right:10px;'>

</div>

<data:post.body/>
</b:if>
<div style="clear: both;"> <!-- clear for photos floats -->
</div>





Nah setelah itu taruh kode di bawah ini, diatas kode <body>


<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 530;
summary_img = 420;
img_thumb_height = 150;
img_thumb_width = 150;
</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(img.length>=1) {
imgtag = '<span style="float:left; padding:0px; margin-right:5px; border: 1px solid #E9E9E9;background-"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Kemudian taruh kode dibawah ini, dibawah kode
<div class='post-footer-line post-footer-line-2'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='more'>
<span class='rmlink' style='background:url(http://1.bp.blogspot.com/_ZndXpD4mctI/SwVZ026qMdI/AAAAAAAABA0/sjIBqh6pqaI/s1600/arrow_next.png) no-repeat; padding-left:18px; float:right'><a expr:href='data:post.url'>Baca Selanjutnya !!</a></span>
<span class='comment-link' style='background:url(http://4.bp.blogspot.com/_sunpK_FtO1E/SsxHnMKtFaI/AAAAAAAAATk/CpRUO6Xut14/s1600/27.png) no-repeat; padding-left:18px; float:left'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</b:if>

Simpan deh. Kata baca selanjutnya bisa kamu ganti.

Bagikan Artikel Ini :
Berikan komentar, kritik dan saran demi kemajuan blog ini. Tapi tolong diperhatikan.!!
- Dilarang meninggalkan link aktif pada komentar(komentar akan dihapus jika demikian).
Komentar Facebooker
3 Komentar Blogger
Facebook Comments by Deafile Bedah Blog

3 komentar:

  1. Thx's articlenya yang bermanfaat, tapi kalau bisa dikasih contoh hasil akhirnya biar saya mudeng mas apa yang dimaksud/seperti apa jadinya, maklup aq msih newbi...!!

    Sukses ych.

    BalasHapus
  2. ngikut yang atas....maklum anak sd baru mudeng cerita bergambar...sama..sama..sama...

    BalasHapus

 
Blog ini didukung oleh :
Google Alexa BloggerPhoto Blog Blogs Web Design Google PageRank Checker Powered by  MyPagerank.Net
TopBlogIndonesia.comdirektori+blog+indonesiaAHS BannerBLOGGER INDONESIA
Copyright © 2013. Deafile Bedah Blog - All Rights Reserved
DMCA.com Protection Status
Template Blog Asli : Johny Wuss
Edit Template Blog Oleh Deafile Bedah Blog
Untuk Tampilan Terbaik Gunakan Mozilla FireFox