Wednesday, May 12, 2010

How to make photos appear bigger in blog?

When I first started blogging, I had zero knowledge on how to blog. Be it from writing an entry, uploading photos or even change the background! But I love to learn. All these blog makeover were self thought. I learned practically everything from the net. From A to Z. Now I can even change the html codes myself ! :P

Sometimes I do got few emails from readers on how to change the fonts, how to change the background etc and I would love to received such mails! Honestly! So if you have any inquiry on blog design, please do no hesitate to drop me a line. I will try my best to assist you :)

Anyways, today's blog tutorial is about how to make your photos appear bigger in your blog entry. It's really simple.

Step 1 : You must know your main wrapper's width so you can set your photo width to fit your blog. What's main wrapper? (see red arrow below)


im using 2-column template, the main wrapper is where your blog entry is and side-bar wrapper is where you place your gadgets, ads etc.I set my main wrapper to 610px. To find this html codes, Go to your Dashboard. Click on Layout, then Edit HTML.

Look in that code and find the line that says <#main-wrapper>
(Quick Tip: Click CTRL-F to search for <#main-wrapper> to easily find it in all that code)


Step 2 : Now I want to upload this photo to my blog post and make it bigger


The button will appear on the screen once the photo being uploaded (see below), then click large.


Step 3 : When the photo has been enlarged, look at the codes by clicking Edit HTML button next to the compose


Those highlighted in red needs to be changed in order to make the photo bigger.However, before you change it, you need to know the size of your photo that you want to upload in the blog by right-click on the image you want to upload. I use photoshop to edit the photos to the desire size which is width 600px.


I changed my photo to 600px width because my main wrapper is 610px. Normal blog template is 450px. So it's up to you to change it to which size you desire.

It is important to change s400 to s800 because this will effect your image quality!

Now my photo is already enlarged! Wasn't that easy? :)


Drop me an email if you didn't get it the first time :)

Thank you for looking and good luck!!

19 comments:

Suzie said...

i tgk codes tu pun pening..hehe..selalu rasa takut nak try tapi u ni kira fast learner juga la ya,semua thru net.i cuba jgk nak tukar buat writing curly2 tu tapi tak tau nak tempek kat mana code tu.

::Ida:: said...

hehehe... takpe... i 1st time try pon tak jadik jugak tapi determined or org kedah kata pulun nak buat jugak :P

CiKaYu said...

npk cam senang, try dulu baru tau..heheeh...thanx

::Ida:: said...

hehehe... senang je cik ayu. try dulu baru tau :P

*Idina* said...

Idaaa!! You are my saviour!!

Mmg tgh melalui masalah ni! ( sila melawat blog saya =/ )

Will try this tonight!! (Due to the complicated codings, haha!)

Thankss!!

fiza said...

wahhh..this post is very helpful..

aku dh la buta IT..
so, dgn pembelajaran hari ni blh la aku update blog bersawang aku tu..

thank you! :)

::Ida:: said...

idina : really??? waahh im soo happy i made some1's day!!! hehehe.. yess.. i tgh tengok blog u skarang jugakk :DDD

fiza : hahaha.. wehh.. hg dah boleh bukak blog tu kira oklaa.. mana buta ponn.. hehehe.. sila update blog anda sekarang yerr... :P

aNnAsUe'G said...

nak senang, i suke2 hati tukar no.size tu. main agak2 je. hihi.

-ilyannur- said...

wah! Nk try. Slalu pakai photobucket tp mcm ada limitation.hehe..

fairy said...

thanks for sharing.
memang puas hati tengok pic yang besar2 ni dalm blog, tapi masalah lainnya..blog lambat loading pula..

::Ida:: said...

sujie : hahaha.. betol2. as long as u tau baca code senang jeee kann :)

ilyannur : haa sila cuba ok? than let me know jadik ke tak :P photobucket mmg limited. kalau dah exceed bandwith nnti ilang abis gambar

fairy : so far ok je yang.. takde plak slow. depends on internet connections kot :)

Shareen Mohd Saleh said...

This is very helpful, Ida. I didn't know we can change the image quality. Cool!

BTW, I have that same building block set from ToysrUs at home hehe

::Ida:: said...

hehhee.. really glad i could help in any way.

that block set tu my sis bought for her daugther. pastu mai datang main kat umah i :P

~Erna~ said...

TQ k.ida..nk try gaklah :)

miralatiff said...

Thanks Ida..Mira dah try and it works wonder!..Gambar landscap memang cantik kalau guner care ni..BTW mira smalam baru ade kesempatan nak try betol tukar font kat blog..Alhamdulillah it works!!
memang pening nak tgk code2 tu but kalo kite tau mane yg nak kena tukar actually tak la susah sgt..
lepas ni boleh la tukar2 font yg comel2..hehe THANX AGAIN Ida!! LOve u~~Kiss Lil' Hariz for me..

:: LadyVerde + Mr.Doc :: said...

huwaaaa...nk try tp i tak erti...buta it sebenar nye...i use only the default setting je...hehehhe

hmmmm
tgk kalo satu hari tgh rajin akan i gagahi jua!
:D

::Ida:: said...

erna : heheh.. try erna jangan tak tryy.. senang jer.. dah buat nnti bgtau ekk :)

mira : yeahh!!! hehehe.. tu la baru bukak blog mira.. dah ada fonts yg comel2 itu.. ee.. tak takot ke p nigeria..seram tengok :P

verde : lol. senang jee verde!! u follow the tutorial insyallah berjaya. hehehe.. u should try coz u ade banyak gambar cantek2. sayang ooo kalau kecik2 :P

fairy said...

a ah..mmg depends pd connectiom, sbb skrg sy guna broandband yg ____
malas nak explain :p

::Ida:: said...

yeke... hehehe.. ok takpe paham2 :P