Artikel yang satu ini juga sedikit telat saya postinginnya, jadinya loncat-loncat deh, hehehe. Readmore atau yang biasa kita kenal dengan nama Baca Selengkapnya, berfungsi untuk menghemat space di halaman awal blog, jadi artikel yang kita posting tidak full tampil dan hanya paragraf awal saja yang terlihat.
Perlu diketahui, pemasangan Readmore Otomatis ini lebih mudah digunakan pada blog yang belum menggunakan fungsi Readmore, artinya kita tidak perlu otak-atik kode scriptnya terlalu jauh. Tapi apabila teman-teman sudah menggunakan fungsi Readmore sebelumnya, maka sebaiknya dikembalikan lagi kode awalnya dengan cara lihat kode di bawah ini : HAPUS KODE YANG BERWARNA MERAH SAJA !
<div class='post-header-line-1'/>Jika sudah maka lanjutkan dengan langkah-langkah di bawah ini:
<div class='post-body'>
<b:ifcond='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;'/>
1. Login ke Blogger, lalu seperti biasa, klik Design/Tata Letak >> Edit HTML,
2. Lalu cari kode berikut (Ctrl F): </head>
3. Selanjutnya letakkan kode di bawah ini persis di atas kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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>
4. Jangan disimpan dulu (masih di halaman edit HTML) dan lanjutkan dengan mencentang "Expand widget template" lalu cari kode berikut: <data:post.body/>
5. Ganti/hapus kode tersebut ( <data:post.body/> ) dan ganti dengan kode di bawah ini:
<b:if cond='data:blog.pageType != "item"'>5. Jika sudah selesai dan klik save templates.
<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'>Readmore --> <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
6. Sebelumnya juga teman-teman semua bisa mengubah beberapa atribut seperti keterangan di bawah ini:
- var thumbnail_mode = "float" - ("float" berarti image ada di sebelah kiri, jika tidak mau menggunakan image, silahkan ganti dengan "no-float")
- summary_noimg = 250; - (jumlah karakter kata yang akan ditampilkan tanpa image)
- summary_img = 250; - (jumlah karakter kata yang akan ditampilkan dengan image)
- img_thumb_height = 120; - (tinggi image)
- img_thumb_width = 120; - (lebar image)
Kira-kira seperti itulah Cara Membuat Readmore Otomatis Dengan Image Thumbnail di Blogspot, selamat mencoba dan semoga berhasil.
Tidak ada komentar:
Posting Komentar