Cara buat read more ini menggunakan gambar sebagai tombol jadi semakin terlihat menarik, bisa disesuaikan sesuai kebutuhan serta cukup mudah dalam membuatnya, tapi tetap harus di perhatikan dengan baik dan ikuti ketentuan yang penulis berikan untuk Anda, berikut adalah langkah-langkahnya.
1. Masuk ke halaman template
2. Backup template sebelum mendesain
3. Edit HTML → proses centang "Expand Template Widget"
4. Tekan Ctrl+F untuk mencari kode </head>
5. Tambahkan kode berikut tepat diatas kode tersebut atau dibawah kode ]]></b:skin>
<!-- kode Read More -->
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 250;
img_thumb_height = 60;
img_thumb_width = 60;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
6. Tekan Ctrl+F untuk mencari kode <data:post.body/>
7. Tambahkan kode berikut tepat dibawah kode tersebut dan diatas kode penutup </b:if>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");Hasilnya akan seperti berikut:
</script><span class='rmlink' style='float:right;padding-top:20px; border:1px solid #fff;'>
<a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkMTUJLOH6B7ndNLndk0n_MhM4KFjtUjLeLO_jdSfJJKCA6x8HzjcnQ4dS9inaE2iLOdLYafkkGe4yp6qOepNPqrOLElwnkXVpy7F5g351l6JTaUkZzs3NhtxYPp2t0KeeESKRKuRlGRk/s74/readmore_thumb.gif'/></a></span>
<div class='post-header'>8. Pratinjau dan simpan template selesai. Semoga berhasil sekian dan terima kasih. Keterangan:
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src='http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
1. Kode <data:post.body/> tidak hanya ada satu, pilih kode pertama atau sesuaikan.
2. Tulisan Warna Hijau Untuk link gambar. Bisa diganti dengan link gambar sesuai keinginan
3. Summary_noimg = 230; adalah jumlah karakter yang tampil, summary_img = 250; adalah gambar yang tampil di depan konten post jika posting menggunakan gambar, img_thumb_height = 60;, img_thumb_width = 60; adalah tinggi dan lebar gambar yang tambil di depan konten post.
Editor : Ananda Donie
Animasi|Artikel|Unik dan Menarik|Auto Text BB|Blog Code|Blog Info|Blog Tool|Cerita Rakyat|Cinema|
Download|P Ramlee|Mutiara Bijak|HJ-Split|Pendidikan|PTC|Sejarah|SEO|Kesehatan|Tutorial|
Idul Adha|Update Via App|Widget|Cerpen|News
Copyright © 2012 by Ananda Donie. All rights reserved
"
"
"
Tidak ada komentar :
Posting Komentar
Accept criticism and suggestions from friends for the perfection of this Blog.
Hopefully this article useful,
Thank you :)