Home » , , » Auto Readmore Dengan Thumbnail

Auto Readmore Dengan Thumbnail

Monday, June 21, 2010


Salam..Malam ni mijie akan buat tutorial cara untuk membuat auto read more seperti yang anda lihat pada blog mijie. Ia lebih nampak lebih tersusun dan kemas kerana readmore ini terjadi secara auto tanpa kita setting @ potong perkataan secara manual. Oklah jom trus ke tutorial ini.

Step 1 ::  Login Dashboard => Design => Edit HTML => Klik pada Expand Widget Template.

Step 2 :: Cari code ini </head>

Step 3 :: Copy code dibawah dan paste kan sebelum code yang anda cari tadi.


<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>

summary_noimg = 430; adalah size post tanpa gambar
summary_img = 340; adalah size post dengan gambar
img_thumb_height = 100; adalah size tinggi gambar
img_thumb_width = 120; adalah size lebar gambar
.
Step 4 :: Cari code ini <data:post.body/>

Step 5 :: Copy code dibawah dan replace dengan code yang anda cari tadi.


<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<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:right;padding-top:20px;'><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>
</b:if>

Step 6 :: Klik preview untuk hasilnya. Jika tiada masalah. Boleh lah klik SAVE.

* Anda boleh mengubah perkataan read more dengan perkataan anda sendiri seperti seterusnya, baca lagi, dan sebagainya.
*Jika anda ingin masukkan images read more seperti blog mijie.tukar code read more “<data:post.title/>” dengan yang ini <img align='right' border='0' src='LINK IMAGES’>

Ok siap. kalu ada masalah boleh lah tinggal komen yer..InsyaAllah mijie akan membantu..

Lagi tutorial klik sini yer..

52 dah komen:

Azman Roslan 6/21/2010 10:38 PM  

thanks for share bro.. bagus ni, aku nak buat la nanti.


Cara Mudah Untuk Dapatkan Follower

kk 6/21/2010 10:39 PM  

wahhh!nice entry bro!;)

Lepat Pisang 6/21/2010 11:05 PM  

tutorial yg bagus..keep up good work!

zulkbo 6/21/2010 11:12 PM  

salam mijie..
terbaikk..
saya ada gunakan
di blog saya..
amat berguna
melajukan blog
kita nak loading

kasih suci 6/21/2010 11:22 PM  

tq 4 sharing... i like ~~

Mijie 6/21/2010 11:50 PM  

Azman :: emm..boleh je nk buat..simple je nie..:)

kk :: thanks yer kk..:)

Lepak Pisang :: thanks yer Lepat..:)

Mijie 6/21/2010 11:59 PM  

zulkbo :: wsalam..a'ah dh agak dh zul pon guna..nmpk kemas je kan..a'ah btol2..mijie pun guna utk cepat loading n nmpk kemas. tp xtau kot2 lembab jgk..mijie rse ok skit kot..hehe

kasih suci :: welcome..try lah bt..:)

miszlullaby 6/22/2010 1:12 AM  

mijie,xjumpe la yang data post body tu..ade banyak sgt post body,tapi xde pun yang sama mcm ni...die dekat part mane ek?

NaNaJoe 6/22/2010 1:27 AM  

good job mijie!!banyakkan lg tuto k~ :)

Mijie 6/22/2010 1:42 AM  

miszlullaby :: xjumpe ke..copy btol2 tau..kod nie ade x?..klu x silap ada 3 kali kod nie..jap2 mijie cek..

NaNaJoe :: thanks nana..:)

miszlullaby 6/22/2010 1:58 AM  

da copy da,expand widget pun da klik..

pastu try nak carik yang data post body tu...mmg ade,tapi xsama yang macam mijie suh cari..

sye nye ade mcm ni...


.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);

Mijie 6/22/2010 9:52 AM  

bkn yg 2..yg 2 css dia..emm ke awk guna template yg baru??..tp rasa nya yg baru pun ada juga..klu xde ssh sikit coz kene try n error ar..

yg nie ad x
class='post-body'

iniAKU 6/22/2010 10:02 AM  

if pkai code tu, dah jadi yg read more tu, tapi kat stiap nuff ads die kuar "Error matching blog to blogger entry.."

nape ek?

Mijie 6/22/2010 10:10 AM  

error 2 kluar masa preview @ save??

Mijie 6/22/2010 10:15 AM  

klu time preview kluar perkataan nie kan. Error matching blog to blogger entry. If u are the owner of this blog, please check that is no typo in your blog address......bla bla.....

ia adalah perkara biasa masa kita preview, so kira dah xde masalah lah 2. SAVE je.

klu rse confius lebih baik Download Full Template terlebih dahulu.:)

iniAKU 6/22/2010 10:21 AM  

time preview.ok, nnti try.thanks ye mijie :)

Mijie 6/22/2010 10:26 AM  

ok.. welcome iniAKU.;)

Mijie 6/22/2010 12:21 PM  

lagilagilagi apa akufobia??..hehe..:P

yastro 6/22/2010 12:24 PM  

Buat dah...he3!!! Tp cmne nk bg post tu x keluar penuh/semua bro? Nti tlg jampi2 sket bro...he3!!! TQ!!

Mia Liana 6/22/2010 1:16 PM  

mia dah cuba macam..tapi tak ok sangat... nanti nak cuba juga yg ni :)

Mijie 6/22/2010 2:13 PM  

yastro :: keluar penuh??..cam ner 2??..kn dh set size utk post kt summary_img dan summary_noimg..huhu

Mia Liana :: oo..cuba lah yg nie plk..yg ni mudah sikit coz dia auto. xperlu potong sndiri..nmpk kemas..

suka_haha 6/23/2010 8:31 AM  

mijie eh... nak letak link gambar x jdla.. leh x mijie letak kode mijie pnye yang ada kod gambar tu.. cmne mijie dpt link image tu?? sy dapatkn link tu dgn upload kat new post dan copy link address kat gmbr tu tp x jdla.. klua tulisan warna merah.. nk tgk kod mijie kat bhgn yang ada link tu boleh? nak tgk kat mana silap saya..

Mijie 6/23/2010 12:28 PM  

alamak xleh nk letak code dlm nie..awk letk link ini ek kt LINK IMAGES 2..

http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/readmore.gif

hati2 dgn " dan ". atau ' dan '..psti kan ia ada dan berpasang mksdnye ada buka dan ttup.

suka_haha 6/23/2010 12:54 PM  

dah jd hehe... imej guna power point dgn paint je hehe...

Mijie 6/23/2010 2:09 PM  

ok xpelah..asalkan size dia x besar..:)

Loyar Lawa 6/23/2010 10:38 PM  

waohhh toche...jazzakullah khair

fiq 6/25/2010 11:22 PM  

mijie..me dah bt..tapi awat tak justified cam mijie..camna nak bagi post tu justified..tq

Mijie 6/25/2010 11:38 PM  

cam ner 2..bg contoh skit..post 2 ke nk justified @ images?.

Norhayati Rostam 7/08/2010 6:40 PM  

tak sesuai untuk template yati la..

Mijie 7/08/2010 10:52 PM  

@Norhayati Rostam

owh x sesuai ke??..emm dh try ek..rasa cam ok je template ni..tp ikut yati ar..:)

Anonymous,  7/11/2010 11:59 AM  

mcm mana nak buat link read more tu auto open link new tab

Mijie 7/11/2010 12:22 PM  

@Anonymous

klu nk link read more new tab.. tambah target="_blank" sebelum >read more

yastro 7/12/2010 9:54 PM  

Dah jadi dah mijie..tinggal nak buat read more yg warne merah je pulak...sok2 sambung lagi...thanks!!!

Mijie 7/13/2010 12:27 AM  

@yastro

owh..dh jadi ke??..bgs2..klu nk warna mrah tambah font color="red" sebelum readmore 2..:)

Mijie 7/13/2010 12:27 AM  

@yastro

owh..dh jadi ke??..bgs2..klu nk warna mrah tambah color="red" sebelum readmore 2..:)

yastro 7/13/2010 1:06 PM  

Nak buang yang tajuk tu cmne mijie? tinggalkan read more tu jee..

yastro 7/13/2010 1:13 PM  

Ok bro...dh settle..time kacih bebanyokk!!! He3!!!sok2 dtg lagi nooo..

Mijie 7/13/2010 2:30 PM  

@yastro

bgs ar klu dh settle..:)..tp next tutorial ada mijie gtau cara nk hilangkan title..:)

Teqorox Angol 7/19/2010 11:17 AM  

dah wat tp time nak tukar code letak pic "read more" tu error.. byk kali cube tak boleh pulak.. sal ek?

.hana. 8/13/2010 2:45 AM  

dah ikut tutor mijie, thanx ;))

Mijie 8/13/2010 9:38 AM  

@Teqorox Angol

sory lmbt reply..xperasan plk..emm mungkin ada terting ' dan ' kot..kene berkati2 pasal 2

Mijie 8/13/2010 9:42 AM  

@.hana.

ok welcome..bgs3..;)

Anonymous,  8/20/2010 8:42 AM  

I like use viagra, but this no good in my life, so viagra no good.

Ahmad Zaki 10/02/2010 5:44 PM  
This comment has been removed by the author.
HaiDa HiDa 10/17/2010 8:20 PM  

terima kasih atas tutorial ni. akhirnya berjaya jgak.. :)

Easy XS 2/24/2011 12:27 AM  

hi mijie......dah jadi dah...tq.....
http://easy-xs.blogspot.com

tp kan mcammana nak buang tajuk sebelah read more tuh...tlg bantuuuuuuu

Dunia IT Untuk Anda 5/17/2011 12:25 AM  

saya dah buat n menjadi....
tapi bagaimana saya mahu menukarkan ke bentuk lain plak???

Mijie 5/17/2011 11:41 PM  

@Easy XS

maaf lmbt reply..klu nk buang tajuk sebelah tu..awk buang kod nie "" ..

Mijie 5/17/2011 11:47 PM  

@Dunia IT Untuk Anda

nak ubah bentuk lain?..maknenye nk ubah images read more tu ke?..

klu nk ubah images read more tu, 1st cari gmbr read more yg sesuai. pstu gnti je dgn images baru. cara nk letak images mijie dah hantar komen kan..tgk kt atas..

Post a Comment

Sila Tinggalkan komen korang kat sini yer..
InsyaAllah setiap komen dari korang aku akan blas..:)

DeSiGn By MiJiE BloG @ 2011. Powered by Blogger.