Cara Pasang Auto Read More Terbaru (Part 2)
(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang usang (part 1). Bila versi terdahulu kita harus meng-cut goresan pena memakai cara manual dengan melaksanakan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana arahan ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini tampaknya lebih canggih lagi, sebab fungsi pemenggalan kalimat pribadi bekerja secara otomatis tanpa harus menambahkan arahan diatas.
Trus..hebatnya lagi, fungsi Read More ini bisa menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau simpulan postingan. Mungki lebih nyaman aku sebut saja dengan akomodasi image thumbnail.
Tidak hanya itu saja, kita sanggup juga pengatur jumlah huruf yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah huruf yang ditampilkan bila ada image yang diikutsertakan dalam postingan dan yang kedua jumlah huruf tanpa image. Masih resah maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, semoga sama2 gak pusing pribadi ke tutorialnya saja ok.
Penting! Yang sudah memasang Read More versi usang sebaiknya di kodenya kembalikan dulu ke menyerupai semula, caranya hapus arahan yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal diadaptasi saja)
<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;'/>
OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.
Pertama, silahkan tuju pribadi ke halaman EDIT HTML, Cari arahan </head> kemudian letakan script dibawah ini di atas arahan </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.
Langsung copy paste aja arahan dibawah 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>
Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan arahan menyerupai dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> dengan semua arahan 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>
silahkan disimpan dan lihat balasannya :)
Keterangan:
var thumbnail_mode = "float"; (kita sanggup memutuskan apakah letak thumbnail berada di (float) kiri atau bila tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak huruf akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak huruf akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Selamat mencoba..happy tutorial with o-om.com :)
Belum ada Komentar untuk "Cara Pasang Auto Read More Terbaru (Part 2)"
Posting Komentar