Sebelumnya, thanks kepada semua nya yang telah mau bersedia membaca postingan saya kali ini. Yhups, anda sudah tahu khan ReadMore itu seperti apa?ReadMore adalah sebuah teknik untuk meringkas sebuah artikel. Ngomong-ngomong soal ReadMore, kalian sudah tahu dan bisa khan pasang readmore itu bagaimana?
Jika belum, mari saya tunjukan.
Ada beberapa cara untuk memasang readmore pada blog,
Salah satunya dengan memanfaatkan fitur Jump Break pada blogger, fitur ini adalah fitur yang baru-baru ini blogger launching kan untuk penggunanya.
Untuk membuat kode readmore default dari fitur yang disediakan blogger, anda cuma perlu membuat CSS nya saja.
1. Copy-paste kode dibawah ini diatas kode ]]></b:skin>
/* readmore ----------------------------------------------- */ .readmorecontent{text-align:right} a.readmore{padding:4px 15px;-moz-border-radius:9px;-webkit-border-radius:9px; background:#eae6e6; color:#776868; text-decoration:none; font-size:12px} a.readmore:hover{background-color:#8f2602; color:#fff}2. Dan jika anda ingin membuat readmore sendiri tanpa menggunakan fitur Jump Break, maka hal yang harus anda lakukan adalah men-check list "Expand Widget Templates".
Selanjutnya cari kode ini <div class='post-header-line-1'/><div class='post-body'> , Jika sudah menemukan kode tadi segera copy kode dibawah ini kemudian paste di bawah kode yang berwarna hijau tadi.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
Sesudah itu, copy kode dibawah ini dan pastekan kode nya dibawah kode <p><data:post.body/></p>
Sehingga Keseluruhan kodenya menjadi seperti Berikut
<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;'/>
Nah terakhir simpan hasil editan anda dengan mengklik SAVE.
By The Way, kita belum ke inti permasalahan nya, Inti permasalahan nya Anda tahu kan script auto readmore itu seperti apa?
Nah, Sebelumnya kita kan sudah buat kode manual readmore nya di template kita, Namun apakah kita dapat mengembalikan kode tadi ke semula, dan bagaimanakah cara nya untuk menerapkan kode autoreadmore pada template kita?
3. Sepertinya untuk menjawab hal itu, carilah terlebih dahulu kode berikut ini dan hal yang harus anda lakukan adalah tinggal meng-hapus kode-kode yang berwarna merah. Berikut adalah kode nya:
<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;'/>
Setelah anda meng-hapus nya, copy-paste kode dibawah ini diatas kode </head>
<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>
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)
Trick Rahasia
Jika anda ingin menambahkan sesuatu kepada kode auto readmore ini, anda cukup mengedit kode pada bagian ini:
imgtag = '<span style="float:right; padding:0px 10px 5px 0px;-moz-border-radius:30px;-webkit-border-radius:30px;background:#555;border:1px solid #ccc;padding:15px"><img src="'+img[0].src+'" /></span>';
summ = summary_img;}
Fungsi kode yang berwarna hijau adalah ketika auto readmore ini berjalan, maka thumbnail gambar akan mendapatkan efek CSS Rounded. Dan untuk menambahkan efek-efek lainnya, anda tinggal edit saja kode yang berwarna hijau ini.
Jika sudah, cari kode <data:post.body/> dan ganti dengan semua kode dibawah ini, Sehingga keseluruhannya menjadi seperti 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>
Kemudian jangan lupa untuk menyimpan hasil nya dengan menekan tombol SAVE.
Semoga tutorial kali ini dapat bermanfaat bagi anda, amien.
Happy blogging with ILHAMFILES ^_^.