Untuk anda para blogger mungkin sudah tak asing lagi dengan tulisan Readmore, selengkapnya dan sejenisnya yang ada pada postingan. kali ini saya akan membahas tentang bagaimana caranya membuat Readmore versi terbaru pada postingan. Readmore versi terbaru kali ini memang agak berbeda dengan Readmore versi terdahulu. karena pada system Auto Readmore ini kta tidak perlu lagi menulis sebagian postingan sebelum kode seperti <div class="fullpost"> dan sebagiannya lagi setelah <div class="fullpost"> karena dengan system auto readmore terbaru ini semua postingan kita akan ter-cut otomatis. selain itu juga, dengan Auto Reamore terbaru ini, setiap postingan kita yang terdapat gambar didalamnya. akan langsung ditampilkan dengan bentuk thumbnail pada halaman depan secara otomatis, tanpa harus repot menyetingnya lagi. contohnya seperti pada gambar dibawah ini.
Bagi anda yang berminat untuk memasang Auto Readmore Versi terbaru ini, silhkan anda ikuti langkah-langkah berikut ini.
Catatan : Bila anda pernah memasang system readmore versi lama sebelumnya. tolong anda kembalikan dulu seperti semula. yaitu dengan cara masuk kemenu tata letak/Layout >> Edit HTML. jangan lupa kasih tanda centang pada kotak "expand widget template" setelah itu hapus kode seperti yang berwarna merah dibawah ini pada system Readmore versi lama anda.
<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;'/>
Bila anda belum pernah memakai system Readmore versi sebelumnya untuk postingan anda. caranya adalah sebagai berikut.
1. Setelah anda login ke blogger, terus anda masuk kemenu tata letak/Layout >> Edit HTML. beri tanda centang "expand widget template, setelah itu anda cari kode </head>.
2. Copy dan paste kode dibawah ini tepat di atas kode </head> yang anda cari tadi.
<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>
3. Setelah anda mempaste semua kode tersebut di atas kode </head>. selanjutnya yaitu masih pada halaman HTML. anda cari kode <data:post.body/>. bila anda sudah temukan kode tersebut. anda ganti, timpah atau hapus kode <data:post.body/> tersebut 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>
4. Klik simpan/save template anda
5. Selesai.
Catatan : Kode yang dicetak tebal dan berwarna merah diatas yaitu dengan keterangan sebagai berikut ini.
var thumbnail_mode = "float"; (yaitu untuk menentukan posisi gambar di sebelah kiri.
summary_noimg = 250; (yaitu untuk menetapkan berapa banyak karakter atau huruf yang akan ditampilkan bila dalam postingan anda tanpa gambar. silahkan anda ganti sesuai keinginan anda)
summary_img = 250; (yaitu untuk menetapkan berapa banyak karakter atau huruf yang akan ditampilkan bila dalam postingan anda terdapat gambar, silahkan anda ganti sesuai keinginan anda)
img_thumb_height = 120; (yaitu untuk mengatur ukuran tinggi gambar yang akan ditampilkan)
img_thumb_width = 120; (yaitu untuk mengatur ukuran lebar gambar yang akan ditampilkan)
READ MORE = silahkan anda ganti misalnya menjadi selengkapnya,berikutnya dan sebagainya
Untuk lebih jelasnya silahkan anda praktekkan tips memasang Auto Readmore di atas pada blog anda.
Selamat mencoba dan semoga bermanfaat. salam blogger mania.
0 komentar:
Posting Komentar