rss

Membuat Read More dengan Thumbnail

Minggu, 15 November 2009

Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama. Bila versi terdahulu kita harus memenggal tulisan menggunakan cara manual dengan melakukan pemanggilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual ke dalam halaman postingan. Yang menjadi masalah dalam Read More versi lama adalah kita sering dipusingkan dengan rusaknya kode HTML di kotak postingan karena kode penutup "span" atau "div" akan bertabrakan dengan penutup div div lain. Hal ini dapat menyebabkan postingan rusak. Karena itu, sebelum mempublikasikan tulisan, saya harus lebih dulu memeriksa baik-baik, apakah semua kode HTML di posting telah sesuai.

Untuk versi Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode <div class="fullpost">..</div> atau <span class="fullpost">..</span>, disamping itu fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan, dengan mengubahnya menjadi image thumbnail. Tidak hanya itu saja, kita dapat juga mengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.


Sekian cuap-cuapnya, kita langsung take action key...


Bagi yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan 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;'/>



Pertama :

Buka tab Edit Html kemudian tandai/ cek di samping tulisan “ Expand Widget Templates “.

Kemudian cari kode </head> kemudian letakan script dibawah ini di atas kode </head>

<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>


Cari kode <data:post.body/>. Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini


<b:if cond='data:blog.pageType != &quot;item&quot;'> <div
expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script
type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a
expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span>
</b:if> <b:if cond='data:blog.pageType ==
&quot;item&quot;'><data:post.body/></b:if>


silahkan disimpan dan lihat hasilnya :)


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)









0 komentar:


Posting Komentar

Jika sobat blogger menyukai artikel ini atau mempunyai pertanyaan ttg artikel diatas, silahkan poskan komentar sobat blogger. Respon kalian sangat berarti untuk blog ini. Cara mem poskan komentar silahkan KLIK disini...

Komentar SPAM di larang masuk!!
:)) x( ~x( x(( :@ :) :x :| :$ :f
:* =( :D :~ :s 8) =(( x) :? :t :o ;;( ;;)

 

Recent Comment