tertarik ?….
-
Buka dashboard blogspot anda…
-
Pilih Tab menu : Tata Letak, dan di bawahnya Pilih Tab menu : Edit HTML
-
Centang di Expand Template Widget
-
Sebelum anda melakukan perubahan tersebut jangan lupa untuk melakukan backup template yang saat ini digunakan blog anda, sehingga akan memudahkan untuk restore nantinya. Untuk ini klik tombol download full template atau download template lengkap di halaman edit HTML blogger seperti gambar di bawah ini
- Oh ya…. bagi yang sudah pernah memasang Read More versi lama sebaiknya kodenya dikembalikan ke asal, biasanya kode-kodenya seperti dibawah ini
<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>dan juga
<a expr:href=’data:post.url’>Read More.. »»</a>
</b:if> - Temukan kode berikut di halaman Edit HTML ini dengan cara menekan Ctrl-F supaya cepat…. (soalnya kalau dicari satu persatu lama dong…..)
<data:post.body>
- Ganti kode diatas dengan kode dibawah 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>Pada script diatas setelah tulisan Read more… ada koding <data:post.title/>…. koding ini bisa dipakai ataupun tidak sesuai selera anda… nantinya dia akan memunculkan kata kata Readmore kemudian dilanjutkan judul postingan kita…
- Selanjutnya cari (dengan tekan tombol ctrl-F saja….) kode </head>
- Kemudian kopikan koding dibawah ini dan paste diatas kode </head> tersebut…. jangan ketuker dibawahnya ya… 🙂 dibawah ada contoh gambarnya kok…. :)… kodingnya seperti ini….
<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>
- Alternatif lain koding pada point 9 diatas adalah bisa menggunakan koding dibawah ini :
<script type=’text/javascript’>
summary_noimg = 450;
summary_img =350;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src=’http://sites.google.com/site/bodonbiz/autoreadmore.js’ type=’text/javascript’/> - Beda koding di point 9 dan point 10 adalah karena scipt auto read more nya ditaruh di hosting sehingga koding di point 10 lebih ringkas. Untuk hasil…. tidak ada bedanya…. 🙂
- File javascript auto readmore dapat juga didownload disini, jika anda ingin mempelajari lebih jauh
- Oh ya… jangan lupa untuk disimpan… dengan menekan tombol Save Template…
- dan blog anda sudah terlihat lebih rapih sekarang…. 🙂
Jika anda masih ingin mengutak atik koding diatas supaya tampilannya di blog lebih sesuai, maka beriktu ini adalah beberapa informasi tentang parameter yang digunakan di koding diatas
- 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)
Oke semoga bermanfaat
