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.

Enable Search for Blog Pictures.

You have posted pictures in your blog, but they cannot be found via Google Image Search. Perhaps you have a photoblog and would like for people to find your blog by searching for your photos.......

Google offers enhanced search for images contained in your site, including advanced labeling techniques for images hosted by Google. If you want the images in your blog to be search enabled Google will use tools such as Google Image Labeler to associate the images included in your site with labels that will improve indexing and search quality of those images.



To have your blog pictures searchable via Google's Image search first you will need to submit your site to Google Sitemaps. To do this head over to Webmaster Tools - Sitemaps. Copy and paste your blog URL in Add Site box at top and click OK. Details are specified in How to Submit site to Google. The next page which opens is the Summary Page for your site showing all the statistics. Click on the last link in the sidebar which says 'Enhanced Image Search'. See picture below :


On the next page check the box for "I would like to enable enhanced image search on my site and am authorized to opt into this advanced service." and click on OK.



If you want to improve the quality of Google's image search results then head over to Google Image Labeler. You will be randomly paired with a partner who is using this feature and over a 90 second period asked to label images. When your labels match you will be given points and the next image will come up. If you are logged in you can keep track of your points, but you can also do this anonymously or with a nickname.


images, image search, google, google image search, picture, photo

Picasa Web Albums for Bloggers.

Have you uploaded lots of pictures to your Blog and now are worrying about how much space you have left in your quota? Worry no more for Google has provided the solution...........

You want to know how many MB of disk space your Blog pictures occupy? You want to see all the pictures in your blog in one space? You want to see a slideshow of all your blog pictures? You want to know how any pictures you can upload in the future without having to delete any?...


Logon to Picasa Web Albums. You will have to agree to the Terms and then provide your GMail password. You will get an interface where your photos are arranged in albums. Each album is associated with one of your blogs. Hence if you have four blogs you will have four albums. You can create a new album and upload photos to it. You can choose to share your albus or keep the private.


You now have 1GB of free storage space. You can paste your album cover link of one blog into another blog. See below :

Template tester

You can search your collections. You can purchase more space. Currently, photos uploaded to Picasa Web Albums can be no larger than 10MB. You can tag photos by clicking on them. This makes the searchable. You can even add captions by clicking "Add Caption" while viewing individual photos.

Logon and Enjoy!

Picasa Web Albums
Photo
Photo Album

Thumbnail Albums for Blogger.

Thumbnail albums can be created in Blogger using software or by hardcoding them in the Edit Html tab of the post Editor. It is preferable to do the latter as it gives you better control besides saving on the cost of third party software.....

The first step is to upload your image to a freehost like Googlepages. Do not upload to Blogger as it resizes your image to arbitrary sizes. After uploading image as described in Upload Files to Blogger copy down the link to the image. Then login to Dashboard of Blogger and click on +New Post link. The Post Editor opens and click on Edit Html tab ofPost Editor. Use the following code to paste the image in it :

<A HREF="URL OF IMAGE" target="_blank" title="Click to view" >
<IMG HEIGHT=50 WIDTH=50 SRC="URL OF IMAGE" alt="image name" /></A>

Adjust the numbers 50 by clicking on the Preview link in top frame of Post Editor. This uses HTML to resize your image. Because of this the image loads faster. As an example I have used this function to load a wallpaper of Andrea Rincon below.




The actual size of this image is 1024 by 768 pixels. Click on the image to see actual size.

THUMBNAIL ALBUM

To make a thumbnail album make a table and insert the above code in each cell. For example if you want a table with four images use this code for a one row by four columns table :

<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE>

Insert the code for the picture between each <TD> and </TD> tags. Type out the full code in one line in Notepad without pressing Enter and then paste it in your post. See Below :


For a two by two table use this code :

<TABLE> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE>

See example below :


To add table spacing and borders add this line instead of the first <TABLE>

<TABLE cellspacing=0 cellpadding=3 width="80%" border=1 bordercolor="#0000ff">

For example a three row by two column table will be :


To add a caption add this line after the first <TABLE> tags :

<caption>Picture Gallery</caption>

This will show as follows in a two by three gallery:

Picture Gallery

To add titles for each picture below it add two more rows by pasting this code :

<TR>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 1</b></font></TD>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 2</b></font></TD>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 3</b></font></TD></TR>

See the effect below :

Picture Gallery

WALLPAPER 1	WALLPAPER 2	WALLPAPER 3
WALLPAPER 1	WALLPAPER 2	WALLPAPER 3

Technorati Tags:photo, photo album, picture, thumbnails, Thumbnail Albums, tables

YouTube, Flickr in Blogger Beta.

YouTube videos and Flickr photos can be put inside your beta blog.........

YouTube is a free video hosting and online video streaming service that allows users to view and share videos that have been uploaded by the members. Membership is free but there is a ten minute length limit on the video length. You cannot download the videos but you can view them in your browser. You can embed these videos in your blog. To see the videos the viewer has to be logged into YouTube and be part of the list the video is shared with (Friends or family). If they are not, the video will display "Loading," but the video will not load.

First Register and become a member and then upload your video. Then click on 'Post Video' link below each video. In popup window Click on click here link to add your blog. Then click on “Add a New Blog” link. Enter your blog account Username and Password and click "Add Blog". A list of your blogs will come up of which choose the one you want to add it to. Next add the Title and the text to accompany the video and click Post to blog.

Another method is to copy the code given at the side of each video next to Embed word. Then paste it in the the Edit Html tab of the Post Editor. click on Publish. I have a YouTube video on Beta Blogger at this post : Video on Beta Blogger. See Image below :




The embed code is similar to this :

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk"></param><embed
src="http://www.youtube.com/v/OdT9z-JjtJk" type="application/x-shockwave-flash" width="425" height="350"></embed></object>


To make it autoplay, just add "&autoplay=1" to the code so it looks like this:


<object width="425"height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425"
height="350"></embed></object>

For beta blogger it may show error in which case modify the code to :

<object type="application/x-shockwave-flash" width="425" height="350" data="http://www.youtube.com/v/OdT9z-JjtJk"><param
name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk" /></object>


PUT YOUTUBE VIDEOS IN SIDEBAR USING RSS FEEDS.

You can put Youtube videos in sidebar using their RSS feeds from here. Choose which videos you would like to put in the sidebar then right click the red RSS button next to it and click on Copy Link Location. Login to dashboard of Beta blogger and go to Layouts link of the blog you wish to add the videos to. Then click on Add Page Element in the sidebar and choose Feed. Paste the Feed url from Youtube and clck on save. Your sidebar will show the number of videos which you have chosen. See my Left column at the bottom where I have added the top three youtube videos.

You can also create a Youtube Badge which will show images of your six most recently uploaded videos. See how to here.

YouTube UPDATE

You can now set up one click video sharing from YouTube :

On YouTube Video Page click 'Share' button below the video on left hand corner of the bottom frame.

Scroll down and click "Setup your blog for video posting."

Click "Add a Blog/Site".

Choose 'Blogger' and put in your login information.

Choose which blogs you'd like to add to your YouTube account. You can choose more than one.

Now when you click Share you will get the option to add video directly to your blog.

CAUTION

After pasting YouTube code in Edit Html tab of Post Editor click on Preview link in the top frame of post editor. If it looks like this :


it will not play on publish. Click on Hide Preview to return to Edit Html tab of Post Editor. Click once just before the code line below the video and tap Backspace key once on keyboard. Click Preview again to check if there are any code lines below the video. If there are repeat to arrange the code without line breaks. On Preview no code lines should be seen below the video and it should look like this :


Now the video will play on publishing.



Flickr also has a similar method to post their images on your blog. Flickr is a photo sharing and hosting website enabling you to share photos with your friends and also put them in your blog. Go to Flickr.com and register to get a new account. Then click Upload photos to go to Upload window. Clickon Browse to locate the photos on your disk and then click open. Choose options to make them Public or Private and put tags on them and then click on Upload. Tags are words used to categorize and describe photos. After your photos are uploaded click on save after adding Title and description.

Click on the photo to open it and click on Blog This link on top of the photo. You will be asked to configure a blog to post to. Click that link. Choose your blogging application Blogger/Beta Blogger. If beta Blogger Flickr will ask to have access to your beta account. Click the Head over to Google link. Click on Grant Access. Put in your Username and Password and then go through remaining steps to post the photo to your blog.


The Daily Zeitgeist is a little bit of fun that you can add to your website. It is built in Flash, and displays recent photos from Flickr. Go to http://www.flickr.com/fun/zeitgeist/ You will be asked which photos you would like to be displayed and depending on that you will be given a snippet of code which you copy and paste into a Html/Javascript Page Element in the sidebar. See Image below :


You can also create your ownFlickr Badge of Photos by going to : http://www.flickr.com/badge_new.gne
Choose whether you want a Flash badge or a Html badge the former slows down your loading a bit. Go through a series of steps till you come to the code which you can copy and Paste as given for the zeitgeist. See Image below for flash badge :