Sebenarnya, alternatif untuk membuat "Read More" di blog blogspot/bogger sudah banyak, apalagi secara default blogger sudah menyiapkan fasilitas itu. Akan tetapi, yang akan saya paparkan (cie, yg lagi pemaparan...hohoho) kali ini berbeda dengan yang lain. Membuat Read More Otomatis (Auto Read More) dengan gambar/thumbnail ini termasuk teknik terbaru untuk blogger.
Apa sebenarnya Read More Itu....??? ( Itulah pertanyaan yang mendasari proses pencarian saya akan teknik ini....!!! )
Ada beberapa keunggulan atau kelebihan Read More Otomatis (Auto Read More) ini, yaitu:
Kita tidak usah repot membuat atau memasukkan kode Read More setiap kali memosting karena aplikasi ini akan bekerja otomatis (namanya juga Auto Read More, Iy G?, hehe).
Kita dapat mengatur jumlah karakter tulisan yang dimunculkan
Jika dalam postingan kita terdapat foto atau gambar, secara otomatis gambar tersebut akan berfungsi sebagai thumbnail dengan ukuran yang dapat diatur atau disetting se-suka kita.
Pada akhirnya, ini akan membuat blog kita terlihat cantik dan profesional, hihi
Penasaran ingin melihat contohnya? Silahkan lihat di blog saya yang lain, di sini dan di sini (klik aja sob jika pengen bukti). Jika sobat tertarik Membuat Read More Otomatis (Auto Read More) dengan gambar / thumbnail di blognya, silahkan ikuti langkah-langkahnya berikut ini:
1. Masuk ke halaman Edit HTML di blog sobat, centang "Expand widget template", Kemudian cari kode <head> kemudian copy dan paste kode berikut di atas kode
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>
2. Kemudian cari kode data:post.id'>
<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>
Label: IT
0 Comments:
Posting Lebih Baru Posting Lama Beranda