Dengan semangat untuk blogging, saya mencoba memberikan tutorial yang merupakan postingan saya yang pertama di blog ini, tutorialnya yaitu kita akan belajar bagaimana cara pasang auto read more with thumbnail di blogger blogspot, fungsi auto read more ini juga saya terapkan di blog Komputer Teknologi yang rekan baca sekarang jadi untuk melihat contohnya silahkan buka halaman utama (index) nya.
Fungsi auto read more ini
bekerja secara otomatis yang langsung memenggal dan menampilkan sebagian
isi dari postingan kita di halaman utama (index) serta mampu
menampilkan image pertama dalam postingan dan mem-fload image tersebut
menjadi image thumbnail,
meskipun gambar yang kita letakan berada di atas, tengah atau akhir
postingan, jadi otomatis pasti lebih berkesan professional dan keren kan
dengan adanya image thumbnail tersebut.
Ok Langsung saja ketutorialnya :
Login>Tata Letak>Edit Html> dan jangan lupa centang kotak option
expand widget
Penting! Yang sudah memasang
Read More versi yang lain sebaiknya kodenya kembalikan dulu seperti
semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)
<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;'/>
Kalau sudah Cari kode </head> dan letakkan script dibawah ini tepat 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>
Kalau sudah cari lagi kode <data:post.body/> dan ganti kode tersebut dengan scrip di bawah 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>
Jangan lupa di Simpan dan kemudian lihat hasilnya
Keterangan:var
thumbnail_mode = "float"; (kita dapat memutuskan apakah letak
thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan
(no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
semoga bermanfaat dan semoga berhasil.
