cara-cara nak buat read more bergambar.



Hari ni aerol nk tunjuk ckit cara-cara pasang read more bergambar.... .trick ni memang agak lapuk sedikit..huhu bagi sesiapa yang belum tahu cara nak buat.. .ikut step-step bawah..

1.pergi ke design/edit html. ..

2.tekan expand widget dulu untuk mengembangkan segala html..

3.cari kode </head>
  (untuk menyenangkan pencarian,tekan ctrl dan f secara serentak,lalu paste code tadi kat kotak find)

4.salin kode bawah ni,dan paste di atas/sebelum </head> tadi

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

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


4.cari code ni <div class='post-body entry-content'>


5.dah jumpa.. . salin code bawah dan ganti kan code step 4 tadi...

<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'><a expr:href='data:post.url'><img src='http://i1117.photobucket.com/albums/k588/Aerol_Hafiezi/readmoreversiaerol-1.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6.kalau korang nak pakai imej read more t'sendiri,korang boleh gantikan tulisan yang warna biru tu pada url gambar kesukaan korang..then save template..

7.Kalau korang nak cuba imej readmore dari aerol,korang just pilih gambar dan amil url dibawah ni aja,dan paste pada url yang bewarna biru di atas tu yea :)


 http://3.bp.blogspot.com/-GHcN3RrTyl8/Tg8ZyobklVI/AAAAAAAAAtk/EmaFWbVyzKQ/s1600/1.png


 http://1.bp.blogspot.com/-CEsveCDOdj8/Tg8Zza1jzWI/AAAAAAAAAto/Wy_aZNFMrc4/s1600/2.png


 http://1.bp.blogspot.com/-FF5VU4g6eUw/Tg8Z0INXJ9I/AAAAAAAAAts/kgA2jetQn_A/s1600/3.png


http://1.bp.blogspot.com/-9ECmEx-_Vyc/Tg8Z01WbXfI/AAAAAAAAAtw/yJUiuc-V1rI/s1600/4.png

10 ulasan:

hannan_93 berkata...

x brape nk fhm la cre nk buat...??;)

Belog MTT berkata...

ko dah buang eyh kod tu kat photobucket?? Isyh !

Aerol Hafiezi berkata...

belum lgi lr laily..

mr.indipendent berkata...

abng aerol dah buang eak kod nyee ..sy bwu nak wat ... :'(

Aerol Hafiezi berkata...

@mr.indipendent

oke2 ...aerol buat semula..

Mimmy Mahayudin berkata...

aerol, tade pn code


--> div class = post-body entry-content -.-"

nurilahi berkata...

start ste4 tu tak faham laaa..knp tak jadi buat ek??

tak faham ayat

dah jumpa.. . salin code bawah dan ganti kan code step 4 tadi...

Read more: cara-cara nak buat read more bergambar. ~ Aerol Hafiezi http://aerol-rianbow.blogspot.com/2011/02/cara-cara-nak-buat-read-more-bergambar.html#ixzz1PKT8fKYl

FYA PELANG! berkata...

yes. yg ni ! tengs :) amik sikit ehh :)

nurul imani berkata...

x jadi pon

nurul imani berkata...

x jadi pon

Artikel menarik

Related Posts Plugin for WordPress, Blogger...

lik lak,kejap jeww ^^

Daisypath Anniversary tickers