There are few options available in Compose mode to change the attributes of an image on your blog post. But there are more options available on Edit html mode. In this page let's discuss about image settings on blogger post. you can read about inserting images and working with picasa web albums by the previous post. Read How to Insert images to blogger posts if you are new to blogging. After you have inserted an image to your post you can see image options by clicking on that image. Basic settings are image size, Image alignment and to Add a caption. Those are the only settings you can change on the Compose mode. Rest is available on Edit html mode.
Image properties on Compose mode.
When you clicked on inserted image you will see the basic image size and position attributes. There are five premade sizes available on that menu. also you can change the alignment of the picture. you can select right or left to Type something on a side with the picture like the first paragraph of this page. "Add a caption" will allow you to add a simple note below the image. I often use it to type "Click to zoom" on my posts.
Image settings on Edit Html.
When you change something in compose mode blogger will automatically create the html code for it. When you insert an image blogger will add the following html code for your post. this is the basic code to insert an image to a web page using HTML.
<a href="Target link"><img src="Direct link to the image" /></a>
Black color part is the code we use to link our image to a link. when you insert an image blogger will automatically add image location as Target link. so when someone click on the image, it will open the image on that window. if you change it and add another blog post link or another website link with http:// it will open that link in the same tab when you click on the image. Thats how we use an image as a Hyperlink. Red color code shows the direct link to the image. Now you are going to learn the basic html tags we use to change image attributes.
You can set the exact size to images using HTML code. you can use Height and Width options in <img> tag. Change Blue color values on html mode to change the size. If you can't see height and Width options in <img> tag, manually add it to the code.
<img height="180" src="Direct link to image" width="180" />
Now go to Compose mode and check your image size. you can learn more about image tag code by changing image settings on Compose mode and check the code again. you will see the changes added to the code. study them and try them with different posts and images.
<a href="Target link"><img src="Direct link to the image" /></a>
Black color part is the code we use to link our image to a link. when you insert an image blogger will automatically add image location as Target link. so when someone click on the image, it will open the image on that window. if you change it and add another blog post link or another website link with http:// it will open that link in the same tab when you click on the image. Thats how we use an image as a Hyperlink. Red color code shows the direct link to the image. Now you are going to learn the basic html tags we use to change image attributes.
How to Change image size.
<img height="180" src="Direct link to image" width="180" />
Now go to Compose mode and check your image size. you can learn more about image tag code by changing image settings on Compose mode and check the code again. you will see the changes added to the code. study them and try them with different posts and images.
No comments:
Post a Comment