Minima : Hanging Sidebar on the Left

This article presents an interesting modification to give you a non-conventional three column layout. The idea is to add a second sidebar to a default Minima template offered by Blogger, to make it appear as hanging by the side of the blog. The figure below has a preview of the finished modification and visit the Hanging Sidebar Demo blog for an online demo.

The following steps are tested on a default 2 column Minima template but this conversion should also work on Minima Black, Minima Blue and Minima Ochre templates.

1) Add a new CSS id selector for the 2nd sidebar wrapper.

• Go to Layout -> Edit HTML
• Locate the #sidebar-wrapper section (Do a Find using your browser)
• Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #left-sidebar-wrapper
• Change the float: $endSide to float:$startSide of this newly copied section (See the code snippet below)

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... float */
}

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for long ... float */
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar

• Locate the <div id='main-wrapper'> element.
• Copy the code shown in red, above that section (this has to be above)
  

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

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

<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>

3) Add a new CSS section for an outer header wrapper which will encompass the existing header wrapper

• Add the following code below the existing #header-wrapper section

#outer-header-wrapper {
width:880px;
margin:0 auto 10px;
}

4) Add a div section as the placeholder for this outer header wrapper

• Locate the section <div id='header-wrapper'>
• Copy the code shown in red, above and below that section
  

<div id='outer-header-wrapper'>
<div id='header-wrapper'>
<b:section class='header' ... >
<b:widget id='Header1' .../>
</b:section>
</div>
<div class='clear'>&#164;</div>
</div>

5) Adjust the other wrappers to accommodate the new sidebar

• Locate the CSS sections called #outer-wrapper, #header-wrapper and #footer
• Do the modifications/additions highlighted in red
  

#outer-wrapper {
width: 880px;
margin: 0 auto;
...
}

#header-wrapper {
width: 664px;
float:$endSide;
margin: 0 auto 10px;
...
}

#footer {
width: 664px;
clear: both;
margin: 0 auto;
...
}

6) Do necessary adjustments to margins, padding etc

• Locate the #main-wrapper section
• Insert a left margin of 12 pixels.
  

#main-wrapper {
width: 410px;
margin-left:12px;
float: $startSide;
...
}

7) Adjust the max width of the header description to center it in the new adjusted header

• Locate the #header .description section
• Change the max-width property to 644 pixels.
  

#header .description {
...
padding:0 20px 15px;
max-width:644px;
...
}

8) Modify the CSS rules for the wire frame layouts editor.

• Locate the end of the skin denoted by "]]>"
• Add the following code above that line.
  

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #left-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and move some widgets on to the left sidebar. Then view your blog to see the hanging sidebar in full swing!

(Note: This modification was applied to a default Minima template and was tested on Firefox 3, IE 8 and Chrome 3)

Moving to a Custom Domain

When you decide for sure that you will switch for a custom domain, the next thing is to plan and implement the move. Given below is a brief checklist for the domain transition process.

1. Purchase the Domain (if you don’t own already) – If you use the Blogger wizard the purchase (and setup) is quite trivial. But if the top level domain you want is not provided by the wizard, then you will have to purchase it from an external registrar.
2. Reconfigure External Services – It is most likely that you will have several external services such as visitor meters, feeds etc installed on your blog. Update the respective accounts of those services to reflect the change of blog URL. Some examples for such services are:
1. AdSense (if you have limited the URLs which can publish ads)
2. Google Webmaster Tools – re-submit the blog and sitemaps
3. FeedBurner or such feeds
4. Technorati, Alexa and other such rating services
5. Google Analytics, SiteMeter, Cluster Maps and similar visitor meters
3. Inform your Readers – Even after you switch to a custom domain, Blogger ensures that your previous BlogSpot URL will be redirected to the new domain. Nevertheless, inform your readers about the forthcoming change, say, by writing a post in advance.
4. Effect the Transition – Go the Settings -> Publishing section on your blog’s admin console and enable the custom domain. If you purchase the custom domain via Blogger, setting up your blog to use it is a no-brainer as Blogger will do the required technical configurations for you. However, if you buy it from a third party, then you will have to manage it yourself.
   

Last, but certainly not least, is the most important question; what will happen to your existing PageRank (PR) because of this move? You will have a temporary drop in PageRank as your custom domain is new to Google. But the good news is that you will very quickly recover the PR as Blogger will setup a 301 Redirect – Moved Permanently on its servers. (Update: See this review of an actual domain change to learn more about PR recovery)

The transfer of PR can happen as quickly as within a couple of weeks as confirmed by a Google employee on the Google Webmaster Help forum.

References:
Custom Domains - The Real Blogger Status

Related Posts

• Custom Domains for BlogSpot
• Deciding to Move to a Custom Domain
• Experiences of an Actual Domain Transfer

Deciding to Move to a Custom Domain

If you are starting a fresh blog, then publishing it on a custom domain straight-away is not much of a problem. If you already own a domain or do not want to use the blogspot.com domain, then switching to a custom domain right at the beginning is a safer and simpler method.

If, however, your blog has been running for a while under blogspot.com and has incoming links, some PageRank and also installed third party widgets, then moving to a custom domain needs some planning.

First, let’s have a look at some reasons that will make going for a custom domain worthwhile.

• Independent domain – Unlike a yourblogname.blogspot.com URL which is just a sub-domain under BlogSpot, a custom domain gives the chance to publish at an independent domain
• Ability to integrate with an existing domain – If you already have a web site, say at www.mydomain.com, then a custom domain gives the chance to integrate your blog to the same domain, say at blog.mydomain.com
• Intangible asset – In this information age, a popular domain is a valuable asset. So if you own a custom domain and your blog ramps up in popularity, that is added value for you
• Good for branding – If you are using the blog for some business/freelance activity, then a custom domain related to your business brand is better than a blogspot.com URL
  

Once you decide that you want to go for a custom domain, the next step is to prepare a checklist of things to do for the transition, which is going to be the focus of the next article in this series.

Related Posts

• Custom Domains for BlogSpot
• Moving to a Custom Domain