Tutorial ini aku dapat dari Kang Jaloe ( Readmore Liberal ), namun disini penerapannya di template untuk scriptnya tidak saya upload. Jadi langsung saya masukkan pada bagian <head>. Disini saya juga akan menjelaskan berdasarkan pengalaman saya saat saya mencoba membantu mendesain blog ini maupun blog saya yang lain yang telah menggunakan readmore, termasuk blog ini
Oke, saya akan mencoba membahasnya secara bertahap :
LANGKAH BAGI YANG BELUM MEMASANG READMORE
1. Login ke blogger
2. Klik Layout
3. Klik Edit HTML
4. Download/ backup dulu template anda
5. Klik pada Expand Widget Templates.
6. Copas kode dibawah ini dan letakkan sebelum kode </head>
<script type='text/javascript'> var thumbnail_mode = "no- float" ; summary_noimg = 350; summary_img = 250; img_thumb_height = 100; 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:15px 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>
7. Cari kode <data:post.body/> di template anda, gunakan Ctrl + F dan masukkan kode <data:post.body/> kemudian enter.
8. Setelah ketemu ganti kode tersebut dengan kode berikut :
<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:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
9. Simpan template anda.
Keterangan : Untuk kode dibawah ini, bisa anda sesuaikan selera anda.
summary noimg= 350 = Tinggi pemotongan artikel tanpa menggunakan gambar
summary img=250 = Tinggi pemotongan artikel menggunakan gambar
LANGKAH BAGI YANG SUDAH PASANG READMORE :
Kerjakan langkah 1 s/d 5
Cari kode <div class='post-header-line-1'/> , bila sudah ketemu perhatikan susunannya adalah sebagai berikut :
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<div class='post-body' expr:id='"post-" + data:post.id'>
<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>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Ganti kode berwarna merah dengan kode baru pada langkah ke 8.
Bila anda kesulitan, silahkan ganti semua kode dari
<div class='post-header-line-1'/>
sampai dengan
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Dengan kode dibawah ini :
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Kemudian kerjakan langkah 7 dan 8.
Dengan demikian anda tidak perlu susah payah dalam mengupdate artikel dan secara otomatis bila dalam posting anda mengandung gambar, maka gambar akan muncul pada halaman utama sesuai ukuran yang anda format.
(Catatan : Bila anda ingin mempunyai blog dengan photo pribadi menghias pada headernya, bCOM siap membantu sepanjang tidak ada kata cela dan menyesal dihati anda. Ingat bCOM tidak mengharuskan anda untuk mengisi rekening Paypal bCOM, mengingat ini misi untuk memajukan blogger Indonesia... )
Bagus infonya...
BalasHapusmantap tipnya mas
BalasHapusDuuuh langkahnya panjang tenan...
BalasHapusbagus banget tipsnya, sukses yah
BalasHapusinfonya berguna banget neh, mas
BalasHapusgIMANA KALO MAU DIUBAH AGAR GAMBARNYA GAK TAMPAK, MAS
BalasHapusThank u soooooo much deh. Saya dah muter2 mau buat read more dari sekitar 20 blog sdh yang memberi solusi tdk ada satupun yang bisa digunakan di blog saya. Akhirnya dengan tanpa putus asa saya temukan juga blog ini yang benar2 sukses telah membantu saya. Makacih yaw :)
BalasHapus