Create Thumbnail Albums in Blogger with WLW.

To create thumbnail albums in Blogger posts we create tables and insert images in each table cell.  The process of coding a table in HTML is cumbersome and prone to errors.

In Windows Live Writer (WLW) this can be done with a few mouse clicks......

 

Start WLW. From the top menu click 'Insert'------>'Table'.  Choose how many rows and columns the table should have and it's width. Remember to keep the table width smaller than the post column width or this may break the template. Also you can choose whether to show table borders and/or the padding between cells.  Here I have inserted a two column-three row table.

Next click in each cell and choose 'Insert'----->'Picture'.

All Photos by law_keven

Select the file from your disk and click Open.  You can even select pictures from the web.

To add more pictures right click the last cell and choose 'Insert Row Below' to insert a new row in the table.

 

After inserting the pictures select each picture by clicking on it. In the right sidebar the Image Properties dialogue box opens. Here you can :

1. Resize pictures.
2. Rotate pictures.
3. Adjust picture contrast.
4. Frame pictures.
5. Add drop shadow to pictures.
6. Link each picture to any webpage or source picture.
7. Add watermark to pictures to deter copiers.
8. Add special effects like sepia, emboss, sharpen or blur pictures.
9. Add ALT text to the picture code. (This text appears if picture fails to load)
10. Adjust picture temperature.

 

If you are creating a photoblog you can create such a thumbnail gallery on the Main Page of the blog. Then link each picture to a post containing more pictures of the same kind.

 

For example first create a post containing a gallery of images like the one above.  This will be your animal gallery post.  Change the date of the post to a backdate so that the post does not appear on the Main Page. 

 

Then in your Main Gallery insert a small picture of an animal and link that picture to the post above containing many animal images.

 

Repeat the above two steps to create a whole photoblog containing picture-posts on various subjects all linked to the Main Gallery.

 

Enjoy!

Uploading Pictures To Blogs.

Many new users are confused about how to upload pictures to Blogger. There are three places in your blog where you may need pictures. One is in the template where you put pictures which can be seen from anywhere in the blog. You can put them in the header, in the background or in the blog columns. You can also make them into clickable links. The second place is in your profile. The third place to put pictures is in your post.................

At the outset let me reiterate that you can only upload pictures to blogger and for all other files see Upload files to Blogger.


To upload pictures to your post first login to Dashboard and click on +New Post. The Post Editor opens and click on the blue square icon in the top frame (see arrow in picture below :)




Click on picture (Image 1) to enlarge it.

You will get a Dialog popup window in which click the Browse button and locate your picture file on your disk and click Open. Then Choose layout and Image size options. You can only upload jpg, gif, bmp and png images, 8 MB maximum size. Then click the Upload button at the bottom. The image uploads depending on the size of the file and the speed of your connection. The default position for image is the top of the post after clicking the DONE button. Click on Edit Html tab of Post Editor to see image code at the top :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_J2kVk3AKsXA/Ri2KOKBwJGI/AAAAAAAAAYw/fM_9vI4F2hw/s1600-h/PostPictures.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://4.bp.blogspot.com/_J2kVk3AKsXA/Ri2KOKBwJGI/AAAAAAAAAYw/fM_9vI4F2hw/s400/PostPictures.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5056849932421440610" /></a>

The above code is for the Image 1 in this post. To reposition the image within the post select this whole code and cut and paste it to wherever you want in the post. You can also do this by clicking on Compose tab of Post Editor and using drag and drop.


Careful examination of the code shows two image links :
LINK 1

http://4.bp.blogspot.com/_J2kVk3AKsXA/Ri2KOKBwJGI/AAAAAAAAAYw/fM_9vI4F2hw/s1600-h/PostPictures.jpg

This is the bigger (actual) size image produced when clicked on the real picture above given by this code :
LINK 2

http://4.bp.blogspot.com/_J2kVk3AKsXA/Ri2KOKBwJGI/AAAAAAAAAYw/fM_9vI4F2hw/s400/PostPictures.jpg

If you wish to put this resized by blogger image in any other site use the second link above in code like this :

<img src="http://4.bp.blogspot.com/_J2kVk3AKsXA/Ri2KOKBwJGI/AAAAAAAAAYw/fM_9vI4F2hw/s400/PostPictures.jpg"/>

This will produce the resized picture below again ( Image2 ):



NOTICE again that the above picture cannot be clicked to produce a bigger image like Image 1 above.

If you want the same sized image to appear use the first link in the same code like this :

<img src="http://4.bp.blogspot.com/_J2kVk3AKsXA/Ri2KOKBwJGI/AAAAAAAAAYw/fM_9vI4F2hw/s1600-h/PostPictures.jpg"/>

NOTICE that the first link is the link to the unaltered image.



At the bottom of the Upload dialog window is listed your current Storage Usage. From this you can know whether you have no more space left to upload images. If you do not have any more space, upload image file to a free host and paste this code in Edit Html tab of your post :

<img src="LINK OF YOUR IMAGE"/>

Replace the caps with the link to your picture in the free host.
Add width and height parameters to the code to speedup the loading of the page.

PROFILE PICTURE

To put a picture in your profile use the second method by uploading to a freehost as it is easy to make a mistake while extracting image links from uploaded images in Blogger posts. Then login to Dashboard and click Edit Profile link in sidebar. Scroll down and paste your image link in Photo URL box and save.

Making an Image Link.

There are several situations where you may need to construct an image link in your blog. The most frequent is when you want arrows pointing to the next page or the previous page as navigation links.......

Other uses are when you wish to post the image as a preview. For example the image of a bookcover used to link to Amazon.com.

WHAT IS A LINK A link in a document to information within that document or another document. These links are usually represented by highlighted words or images. When a reader selects a hyperlink, the computer display switches to the document or portion of the document referenced by the hyperlink.

You can also use logos/banners as image links to other websites represented by the logo. I have covered this in Adding Banner links. The basic simplest link code is :

<A href="URL OF SITE">TITLE OF SITE</A>

CREATING THE IMAGE/LOGO

To create the image you can use online generators such as cooltext.com. These are websites which allow you to create a logo or banner for your blog. Most of them are free, others attach their own logo to the image created on their site. You can search for these sites by typing logo/banner generator in your Google search bar. After creating the image right click the image and choose Save Image As to save the image to your hard disk.

You can also create your own image using Paint or any other image editing program like Paintshop, Photoshop or Irfanview. After creating the image save it to your disk.

You can also search for and download navigation graphics like the following :

UPLOADING THE IMAGE

After creating and saving the image you have to upload it to a freehost on the Internet. This is because though your PC may be connected 24/7 to the Internet it is not a server which can serve your images whenever requested. Googlepages offers 100MB free space per account and you can create five such accounts at present. Other freehosts are Photobucket.com and Imageshack. You can upload your images to Imageshack directly from the link at the bottom of the right column in this blog. Another freehost is Flickr.com

You can also use Blogger to host your images by uploading them in a post. After uploading click on Edit Html tab of Post Editor and you will see the code for the image like this :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s1600-h/Blackberry.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s400/Blackberry.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5024576285117553666" /></a>

From this image code extract the url for the image which is :

http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s1600-h/Blackberry.jpg

After this Publish that post as a draft. When you publish post as draft your viewers do not see it though it is available. In the New Blogger when you delete a post you are given option to delete the images within the post. If you do not delete the image there is no guarantee that they will not be deleted.

If you have uploaded your image to a free host then copy down its link which will be in same form as above. You can test the link by pasting it in the address bar of your browser and hitting Enter. The image should display in your browser.

MAKING THE LINK

We have the image uploaded to a freehost and we have its link. Now to constructthe link code which is :

<a href="URL/LINK YOUR IMAGE IS POINTING TO"><img src="LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE" alt="TITLE OF SITE IMAGE IS POINTING TO"></a>

Replace URL/LINK YOUR IMAGE IS POINTING TO by the URL of the site your image is pointing to. Replace LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE with the link of the image you extracted from the blogger post or the link of your image at the freehost. Replace TITLE OF SITE IMAGE IS POINTING TO with the title of the site the image is pointing to.

Alt tags provide alternative text for images to visually impaired individuals, who reach the net through audio-based browsers. They also provide alternative text for individuals who have disabled image loading in their browsers.

GIVE YOUR LINK A TITLE

To give your link a title include a title tag. This will show the title when the mouse is over the link and also serve to give directions to the viewer eg:

<A title="GO TO THIS SITE FOR A WONDERFUL EXPERIENCE" href="URL/LINK YOUR IMAGE IS POINTING TO"><img src="LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE" alt="TITLE OF SITE IMAGE IS POINTING TO"></a>

LINK IMAGE TO A POST

To make an image link to a post in your blog use this code :

<a href="PERMALINK URL"><img src="URL OF PICTURE" alt="POST TITLE"></a>

Instead of PERMALINK URL paste the URL of the post. This can be obtained by opening the post in a browser and copying the link from the address bar.

NAVIGATION ARROWS FOR NEW BLOGGER

Perhaps you are tired of the Older Posts and Newer Posts links at the end of each post in the post pages of the New Blogger. Then you can replace them with navigational arrows as follows :

Go to Template------>Edit Html and backup the Template.

Then put a checkin Expand Widgets Template checkbox and scroll down till you see this code in the Blog Posts section :

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>

Replace the code in red with the following lines :


<img alt='OLDER POSTS/NEWER/POSTS/HOME' src='URL OF NAVIGATION IMAGES' />

Technorati Tags:older posts, newer posts, home, navigation links, image links