The Blog Doctor.

How to Change Slideshow Size?

The slideshow gadget in Blogger is quite small and may look minuscule in larger width templates. If you have a large width sidebar and wish to increase the size of the slideshow within it here is how you can do it.........

Step 1. Add Slideshow Gadget to sidebar :

Login at Blogger.com.
Click Layout link under Blog Title on Dashboard.
On Add Page Elements tab click 'Add Gadget' link.
In popup window click 'Slideshow.
Configure your slideshow.
Click Save button below.
View Blog.

Step 2. Find width of your sidebar.

To increase the width of the slideshow you have to first find width of the column containing it. To do this go to Layout----->Edit Html subtab. In Template Code box scroll down to the CSS code for the sidebar which may look like this :

#sidebar-wrapper {
 width: 220px;
 float: right;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

See the number in the width line '220px'. That is the width of the sidebar. You cannot have your slideshow inside the sidebar with more width than this or else it may break the template and your blog sidebar may fall down below the posts column.

Step 3. Define slideshow size in CSS part of template.

The last step is to define the new size of the slideshow in the CSS part of the template. In your Template Code box paste the code given below immediately above the ]]></b:skin> tag :

.slideshow-container {
 width: 200px !important;
 height: 400px !important;
}

Preview and adjust the width and height numbers. Save Template. View Blog. Enjoy slideshow!

Three Column Sand Dollar Template for Bloggers.

A reader wanted to modify the Sand Dollar Template to show three columns. This is a Fluid width template which resizes the blog according to the monitor resolution of the viewer's machine. It has two columns. The sidebar is at the left and occupies 31% of the screen width. The Main or Posts column is to the right and is sized at 66%.

View After Modification. Click on Picture to enlarge it.

Since a Fluid or Stretch Template occupies the full width of a computer screen we need not increase the width parameters in the template..........

Instead decrease the size percentages of the post column to accomodate the new sidebar. This is the opposite of the method we used in Three Column Template in Three Steps. There we had to increase the width of the outer-wrapper to add a third column.

1. FIRST STEP

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

@media all {
div#main {
float:$endSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Change the width line from 66% to 35%. This is because we will make the second sidebar of the same width as first sidebar (31%). Save Template. Next this Posts column is at the right ($endside). We want this to be in middle so we change the float line to ($startside). After modification the code will look like this :

@media all {
div#main {
float:$startSide;
width:35%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

2. DEFINE NEW SIDEBAR

To define a new sidebar copy the following code and paste it immediately after the code for the Main Column shown above in the first step :

div#sidebar2 {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $endSide;
width: 31%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

We have floated this new sidebar to the right (float: $endSide;). It has same width as the first sidebar (31%). Also it mirrors the first sidebar in other parameters.

3. MODIFYING THE BODY CODE

Scroll down to see the code after the <body> tag. Use Edit--->Cut (Ctrl+X) to cut out the code for the Posts Column (Main) :

 <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

and paste it after the first sidebar code block :

 <div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Save Template.

4. THE NEW SIDEBAR CODE

Lastly to show the new sidebar column on the blog copy and paste this code after the new position of the (Main) Post Columns code :

<div id='sidebar-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
      </div>

Save Template. Note the 'sidebar2' in the above code. Perform this step only AFTER completing the THIRD STEP.

Enjoy!

Cool Blue Web 2.0 Fluid Template for Blogger.

Fluid Width Three Column Blog Template.

Many bloggers have been asking for a three column template. So I brushed up on my XML and XHTML and made a fluid width three column template.

A fluid width template is one which fits all screen resolutions without breaking. The columns expand and contract as the window is resized. You can test it out by going to The Fluid Width Three Column Blog and then type this in address bar of the browser without the quotes :

"javascript:top.resizeTo(800,600)"

and press ENTER on keyboard. The window will resize to 800 x 600 resolution without having a horizontal scrollbar at the bottom..........

You can see the full view of the blog below :

The widgets seen above are not loaded with the template. You have to add your own widgets after uploading this template. Remember to backup your widgets first before changing templates. After resizing it looks like this :

Download Link : Fluid Width Three Column Template. As you can see there is no horizontal scroll.

Right Click the above link and choose 'Save link as' and save it on your PC. Upload to your blog as shown in How to Change Template.

I have also included a Navigation Bar at the top where you can add links to your important posts. To do this login at Blogger.com and click on Layout on Dashboard. Then click Edit Html subtab of Template tab and scroll down to this code in the template :

<div id='Nav'> <a href='BLOG_URL'>Home</a> | <a href='LINK TO SUBSCRIBE POST'>Subscribe</a> | <a href='LINK LABEL 2'>Label 2</a> | <a href='LINK LABEL 3'>Label 3</a> | <a href='LINK LABEL 4'>Label 4</a> | <a href='LINK LABEL 5'>Label 5</a> | <a href='LINK LABEL 6'>Label 6</a> </div>

Change the code in red to the respective links to your posts. You will have to create and publish these posts first and then copy their links and paste them in the above code.

At the bottom of the template are links to 'About Us', 'Contact', Sitemap and Privacy Policy which you can modify in the template by scrolling further down to this code :

<div id='siteInfo'> <a href='LINK TO ABOUT US POST'>About Us</a> | <a href='LINK TO SITEMAP POST'>Site Map</a> | <a href='LINK TO PRIVACY POLICY POST'>Privacy Policy</a> | <a href='LINK TO CONTACT US POST'>Contact Us</a> | <a href='http://betabloggerfordummies.blogspot.com'>Blog Design</a> | 2007 Company Name </div>
<br/></div>

Change the parts in red in the same way as before. I know you will be gracious enough to leave the credit intact.

Another version of this template for those who do not want the stretch version looks like this :

The download link is Fluid Width Central template.

Search Engine Optimized Advantages

This template is optimized for the search engines as :

1. The posts column comes first and hence the search spiders first feed on the content.

2. NO JAVASCRIPT in the template making all the links in text and indexed by the search engines.

3. Follow further tips for SEO for blogs to further customize this template.