Kita pasti sering menjumpai website/ blog yang ada kata read more dalam artikelnya, mungkin banyak dari kita yang belum mengetahui cara menambahkan Read more atau Baca selengkapnya dll, untuk itu disini saya akan mencoba menjelaskan secara singkat Bagaimana Cara Mudah Membuat Read More di Blog berbasis Blogspot.com
Tapi sebelumnya saya ingin memberitahukan bahwa Read More yang akan kita buat ini otomatis, dengan menggunakan bantuan dari jump link yang ada di blogspot itu sendiri.
Dalam artikel kali ini saya menggunakan Template Sederhana (standar) dari Blogger.
( baca juga : Cara Memasang Icon Sosial Media di Blog )
mari langsung saja kita mulai pembahasan mengenai Cara Mudah Membuat Read More di Blog berbasis blogspot.
silahkan simak cara berikut ini:
#. Masuk ke Template (1) dan klik Edit HTML (2)
#. Setelah Edit HTML Kawan akan dibawah ke tampilan seperti dibawah ini lalu Klik CTRL + F (3) dan cari kode html </head> (4)
#. Selanjutnya Letakan kode dibawah ini, tepat diatas kode html </head> seperti gambar berikut (5)
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 275;
summary_img = 275;
img_thumb_height = 120;
img_thumb_width = 120;
</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 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>
#. Lanjut dan cari kode <data:post.body/> (6, 7) dan ubah dengan kode HTML di bawah ini seperti no (8)
<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>
<div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
#. Jika sudah tinggal kawan klik Simpan Tamplate (9), sekarang silahkan lihat hasilnya. Jika cara membuat read more di blog Kawan berhasil, maka hasilnya akan seperti gambar dibawah ini.
Sebenarnya untuk kode javascript diatas bisa Kawan ubah sesuai selera, misalnya kita ingin membuat thumbnail-nya lebih besar, caranya mudah tinggal Kawan ganti img_thumb_height = 120; menjadi img_thumb_height = 250; dan img_thumb_width = 120; menjadi img_thumb_width = 250;
Mungkin itu sedikit penjelasan dari saya mengenai Cara Mudah Membuat Read More di Blog, untuk lebih detail dan lebih jelasnya silahkan langsung di praktekan sendiri, jika ada hal yang ingin kawan tanyakan seputar cara membuat read more di blog, silahkan jangan sungkan-sungkan untuk menanyakannya melalui kolom komentar dibawah ini secara gratiiiis pastinya.
Akhir kata saya ucapkan terimakasih banyak sudah bersedia meluangkan waktu kawan untuk membaca artikel Cara Mudah Membuat Read More di Blog semoga bermanfaat.
ijin nyoba ya min mksh
ReplyDeleteSiaapp kawan.. silahkan langsung dipraktekkan
Delete