di Cyber Man yang menyediakan tutorial blogspot dan bisnis online terbaru dan terpercaya.
Sebenarnya banyak sekali tutorial tentang read more yang tersebar di rumah mbah google, tapi apa salahnya cyber man ikut membahas tentang itu siapa tau ada diantara cyber mania yang sedang membaca postingan ini tapi belum memahami tentang read more otomatis ini. Sebelumnya pada tutorial cyber man telah dibahas tentang
Membuat Read More Pada Template Baru dan
Cara membuat read more Versi Manual.
Pada kesempatan kali ini cyber man ingin mengembangkan tutorial read more dengan menjelaskan tentang bagaimana cara membuat read more secara otomatis. Pada jenis read more awal, kita harus membagi dua bagian setiap kita posting dan harus memasukan kode di setiap penggalan posting dan akhir posting. Tapi untuk versi otomatis ini, kita sudah tidak perlu melakukan aktivitas tersebut karena secara otomatis postingan akan terpenggal dan ada kata-kata read more di setiap penggalan.
Langsung saja kita capcups ke cara pembuatannya :
- Silahkan login ke blogger terlebih dahulu.
- Klik Tata Letak.
- Kemudian klik Edit HTML.
- Centang Expand Template Widget.
- Letakkan kode berikut ini tepat diatas kode </head> :
<script type='text/javascript'> var thumbnail_mode = "no-float" ;
summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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 10px 5px 0px;"><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>
6. yang sudah pernah menggunakan Cara membuat read more Versi Manual (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna merah di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
sehingga sekarang hanya ada satu <data:post.body/>
7. Kemudian hapus kode :
<data:post.body/> atau <p><data:post.body/></p>
8. Ganti kode tersebut dengan kode berikut ini :
<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:left'><a expr:href='data:post.url'>Read More … <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
- Kemudian Simpan Template.
Keterangan :
- summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
- summary_img = 360 –-> untuk tinggi postingan dengan gambar.
- img_thumb_height = 120 –> tinggi gambar.
- img_thumb_width = 150 –> lebar gambar.
- Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.
Silahkan sobat atur sesuai template sobat.
Selamat berkreasi.
Baca juga artikel terkait :
Afrika Selatan vs Meksiko 
Prancis vs Meksiko 
Argentina vs Nigeria 
Korea Selatan vs Yunani 
Inggris vs Amerika Serikat 
Aljazair vs Slovenia 
Serbia vs Ghana 
Jerman vs Australia 
Belanda vs Denmark 
Italia vs Paraguay 
Selandia Baru vs Slovakia 
Italia vs Selandia Baru 
Pantai Gading vs Portugal 
Brasil vs Korut 
Honduras vs Chile 
Spanyol vs Swiss 
