Friday, October 31, 2008

Wrap Images by TEXT can Snatch the User Attention, Catch the Eye Instantly and Prompt user to Read whole article


Images are the main part of any web site that is grabbing user attention instantly also it’s the part which indicates the consistency of a page. In blogger platform I noticed it is very powerful if we use image with warped text as a main picture. Warped text can add extra vivid and getting user attention instantly. In my site almost I preferred to put images at left side and warp image’s right and bottom structure. I think this is the best structure for placing an image in a web page and most web sites are usually using this pattern for place images.

I have hosted all my images at my “photobucket” account and linking them from here. Warping text around an image is a quite easy task.

Adjusting Blogger Settings for Warping Images:

First we need to adjust blogger setting for getting capability of warping images with text.
  • Go to Blogger Account and then click on the settings tab.
  • Within the setting click Formatting tab and under it check weather” Enable float alignment” Is set as yes or no. If it is no then change it to yes and apply the settings and save.


After adjusting the blogger settings we need to host image/s at an image hosting site first. As I mentioned earlier I have hosted all my site images at photobucket.com. After uploading get the direct link for it.
(Ex: http://photobucket/......../image.jpg)

[It’s not essential to host images at photobucket, I refer photobucket for explanation purpose only]

Place the Image URL in below code and place it in the blog post where you need to place an image in the post.
<img style="margin: 0px 10px 10px 0px; float: left;" src="Image URL" alt="" border="1" />

Above code will align your images for left side and warp text like in my site images. Instead of giving the code examples for every occasion I'll explain the part of this code so you'll be able to adjust the placement of your images without refereeing my site occasionally.

Margin: 0px 10px 10px 0px = This is the part of code that is define the margin area around the image. In sequence it is define the UPPER RIGHT BOTTEM LEFFT margins of the image. In this code I have define Right and bottom image margins are as 10px and 10px.

Float: left = this is referring for adjusting the place of images. We can define either left or right for images, as well as center is also can use for float value.

src = this is the part which is link to our image, in here we should put the direct link for image

alt = We can leave this as a blank also. But search engines are normally read this for define about the picture and site content when indexing the page. Place a small text about picture here.

border = Normally when define a border for an image it shows as black color.

Please comment if this is useful and any doubts questions you have regarding this.

5 comments:

brandikx said...

your code definition is very useful. Most of times I'm using this when I'm posting.

Paul & Marj Goss said...

Since the blogspot editor and display have different fixed widths, is there any way to makes sure the wrapped text displays the same way as the editor shows it. This would be very useful if you use multiple images in a posting and want text to end up next to the appropriate image.

Lori E said...

I hunted around for a long time and finally came upon your instructions for doing this. They actually make sense and they actually work. Thank you.
You can see it in action on my first post using it. http://www.familytreesmaycontainnuts.com/2009/05/three-or-more-tuesday-thats-lot-of.html

Evan Derek said...

Hey, i dont get it. What to do after i've hosted the images??

essay writer uk said...

Evan Derek, after hosted images you should format all using codes. How to do it is written above

Post a Comment