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!

15 Reasons to Use Windows Live Writer for Posting to Blogger.

Windows Live Writer is a client software used to post to blogs on various platforms directly without using a web browser. Here wre the advantages of using it for creating posts on your blog................

1.   It is free.   You can download it here.

2.   Insert tables without coding :

A table	made with	Windows
Live	Writer	.

 

3.    Make image gallery easily by inserting images in tables :

Photo by MousyBoyWithGlasses.	Photo by Pier Biter.

 

4.  Customize hyperlinks to open in new window and add nofollow and title tags to it without coding it in the html for the link :

 

5.   Post to multiple blogs.

6.   Save bandwidth by publishing post once only instead of continuously saving posts as you make them in a web browser Post Editor.

7.  Add Technorati/ Delicious/Flickr/Live Journal/Ice Rocket etc Tags to posts.

8.   Add Labels in Blogger or Categories in Wordpress using the post properties toolbar below the main Writer window.

9.   Insert Maps/Videos/pictures in post

10.  Set the publish date for the post

11.  Publish Post as draft or as a post directly

12.  Ping as soon as post is published. Go to Tools---->Options----->Ping Servers and copy the URLs below and paste them in the box and save :

http://ping.feedburner.google.com/
http://rpc.pingomatic.com/
http://blogsearch.google.com/ping/RPC2
http://www.bloglines.com/ping

13.   It has plugins to enable you to add more functionality.  Be careful of third party plugins.

14.   Makes you more productive.  You can add more posts and also create your posts offline as soon as ideas strike you.

15.  Can be used to publish posts to  private blogs also. If by some reason your posts got deleted you can republish them from the copy in Windows Live Writer.

Add Background Picture to Header in CSS.

In Blogger you can directly upload a picture to the Blog Header. A few bloggers have been reporting problems with this method. Hence here is the old method brushed up for use with Classic or Layouts Template........

REMOVE HEADER PICTURE

The first step is to remove the old picture. Sometimes the picture refuses to get removed. Then the first remedy is to clear the cache. Always use Firefox browser for optimum logging experience.


If clearing the cache does not help login at Blogger.com and click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code :

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>

Change this to :

 <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='My Blog (Header)' type='Header'/>

Save Template. Switch to Page Elements tab. Click Edit link in the Blog Title widget. In popup window click Remove button.


Then click 'Add Page Element' link in the header. In pop up window choose 'Page Header' widget and choose the options and save. Here in the options you can add a new image or you can add it as in the next step.

ADD PICTURE AS BACKGROUND

If you want to add a picture that can be easily removed you can add it as a background in the CSS part of the template.



First create your header picture and upload it to Googlepages or Photobucket.com and copy down it's link. Make sure that the width of the picture is the same as that of the header-wrapper. (See code in next step for width of header-wrapper) If the width is not the same the picture will protrude out on one side.


Then login at Blogger.com and click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code :

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background:url(LINK_OF_PICTURE) no-repeat;
height:200px;
}

Add the background line as shown above. Replace 'LINK_OF_PICTURE' with actual link of your uploaded picture. Change the '200px' in the height line to the actual height of the picture. Save Template. Clear Cache and view blog.


The Blog Title and description will be shown on top of the picture. If you wish you can hide the Blog title and description to show only the picture.

Different backgrounds in each post!

A background put in your blog serves as a sort of branding for your blog. For example if it is a travel blog a background picture of the Eiffel Tower can serve very well. You can also have transparent backgrounds in your blog over which the blog text scrolls.



What if your blog posts are on different topics? Then you can put a different picture as the background for each post.......

SOURCE THE PICTURE

First step is to search for an appropriate picture for your post. Use Google to search for copyright free images.

UPLOAD PICTURE TO FREE HOSTING

Next step is to upload the picture to a free web host and copy down the link. You can use Googlepages or Photobucket.com for this.

PUT CODE IN POST TEMPLATE

1. Login at Blogger.com.

2. Click on Settings link on the Dashboard.

3. Click on the Formatting subtab of the Settings tab.

4. Scroll down in the Formatting tab to the Post Template at the bottom.

5. Paste this code at the top of the box :

<div style="background:url(LINK_OF_PICTURE) no-repeat;">

and paste this code at the bottom of the box :

</div>

6. Save Settings.

7. Click on Posting tab at the top.

8. The Post Editor will open with the code already in it.

9. Replace 'LINK_OF_PICTURE' with actual link of the picture uploaded to your free host. If you do not want the picture to repeat delete the "no-repeat" in the code line.

Type in your post before the </div> tag at the bottom, give it a Title and Publish.


See the example in this post.

Enjoy!!

Transparent Background for Blogs.

You can put a picture as a background for your blog. After doing that you can make your blog transparent so that the picture shows through it.........

PICTURE BACKGROUND FOR BLOGS

The first step is to find or create the picture you wish to put up as the background. You can create a small picture in any graphics program. It should be small ( around 96x96 pixels would do) and 'tileable'. This means that it should repeat itself without any borders across your web page. To source such graphics from the Internet just do a Google search for 'graphic backgrounds'.



After finding the picture save it to your hard disk (make sure of any copyright conditions). Then upload the picture to Photobucket or Googlepages and copy down he link of the picture.



To put it as the background in your blog login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. The picture has to cover the whole body of the blog so scroll down to this code in the CSS part of the template :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

The CSS part of the template is the code which lies between <b:skin><![CDATA[ and ]]></b:skin> tags.



To the above code add these lines :

background-repeat: repeat;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;

so it looks like this :

body {
background:$bgcolor;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;
background-repeat: repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Replace 'URL OF PICTURE' with the link to your picture. The background-image line shows the location of the picture where you have uploaded it at Photobucket or Googlepages. The background-attachment line fixes the picture so that it does not scroll with the page. The background-repeat line tiles the picture vertically and horizontally if you give it a repeat parameter.


Click Preview and then Save Template. Clear cache and view Blog. Now that your background is ready it is time to make your blog transparent.

TRANSPARENT BACKGROUND FOR BLOGS

To create the transparent background I have used code from Mandarin Designs. To add this code login at Blogger.com and click on Layout link on Dashboard. Then click n Edit Html subtab of Template tab and scroll down to the part of the blog code which you wish to make transparent. To make the followng background transparent :




apply the code change to :

outer-wrapper

code. To apply it to the blog posts only, change the :

main-wrapper

code. This is what it looks like after applying it to posts section :



To apply it to the sidebar change the code in the :

sidebar-wrapper

section in the CSS part of the template. Similarly to apply it to the header or footer change the code in the :

header-wrapper

footer-wrapper

sections.

NOTE : The sections in your blog may have different names depending on the template. Add the code to a section and click on Preview button to see what parts of the blog become transparent.

This is the code to apply :

background-color: silver;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;

After applying it to the outer-wrapper it will look like this :

#outer-wrapper {
background-color: silver;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
width: 1024px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

You can change 'silver' to any other colour like 'blue', 'red' to see the effect with that color. This what it looks like with a red filter applied to the outer-wrapper :




Also experiment by changing '0.85' (opacity and moz-opacity) and '85' in filter: alpha(opacity=85) to any number between 0 to 1 in the first and 1 to 100 in the second to vary the transparency or opacity.


This is what it looks like in the demo blog outer-wrapper :



You can see the above code effect in this demo blog. I have given a white color to the various sections and the rest of the blog looks like a transparent skin sliding over a fixed wall (background).


Have Fun!

Add Blogger Play, in Gadget Form to Blog.

Many bloggers have enjoyed Blogger Play which shows recently uploaded photographs to public Blogger blogs. It was introduced last month and viewers could enjoy seeing pictures that were being uploaded in real time.


Now you can add this as a Google Gadget to your blog :

You can also add it to your iGoogle Home Page by clicking on the button below :

To add it to your blog click on the link below :

You can customize the width and the height so that it fits in your posts column. Click Preview button to see the changes and then the Get Code button. The code window will open and you can copy the whole code and paste in Edit Html tab of post editor to put it in your post. OR paste it in a Html widget in the sidebar. Make sure that the width of the gadget is less than the width of your columns or your sidebar may slide down to below your posts column.


You can also if needed increase width of your posts column to accommodate it. If you are worried that increasing width of blog may add a horizontal scroll at smaller monitor resolutions try a Fluid Width blogger template which matches any resolution.

Enjoy!

Blogger Buzz: Blogger Play, in Gadget Form

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

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 :