Customising my blog

Considering I have just started playing around with blogspot, I feel like publishing the sites and information that I'm using/gathering.

Summary

1. Removing borders from your title and picture
2. Changing the width of the blog, the sidebar and the main menu
3. Archive entries into folders
4. Code Comment Box
5. Current Date and Time
   

• Removing borders from your title and picture
  Source: Customize your blogger template
  ------------------------------------------------------------------------------------------------
  
  Method:
  
  1. Customize -> Edit Html
  2. Search for #header-wrapper { and #header { for the title
  3. Search for profile-img { for the profile picture
     
  4. Remove or comment out the following line border: 1px solid $bordercolor;

• Changing the width of the blog, the sidebar and the main menu
  Source: Customize your blogger template
  ------------------------------------------------------------------------------------------------
  
  Method (using the minima template for inital size):
  
  The breakdown of the width of the blog is:
  Whole Blog - Text - SideBar = Extra
  660 -410 - 220 = 30
  If the extra is negative your sidebar will go to the bottom of the page, so try and keep some extra.
  
  Whole Blog:
  
  1. Customize -> Edit Html
  2. Search for #outer-wrapper { and #header-wrapper {
     
  3. Change width: 660px; to width: 700px; to change it to 700px
     
  4. As suggested in the original post the widest you should probably go is around 780 px, personally I went for 700px (remember people have different monitor and this is not a % its a defined width)
  Main Text:
  
  1. Customize -> Edit Html
  2. Search for #main-wrapper {
     
  3. Change width: 410px; to width: 430px; to change it to 430px
  Sidebar
  
  1. Customize -> Edit Html
  2. Search for #sidebar-wrapper {
     
  3. Change width: 220px; to width: 260px; to change it to 260px
  Final result
  
  Whole Blog - Text - SideBar = Extra
  700 -430 - 260 = 10
  
  So all good :D
  Use the Preview button to preview what it is going to look like an make small changes.
  

• Archive entries into folders
  Source: Catagories in Sidebar Blog Post
  ------------------------------------------------------------------------------------------------
  
  The Solution to this can be found in the source link.
  

• Code Comment Box
  Source: loadaveragezero
  ------------------------------------------------------------------------------------------------
  
  For my code I used loadaveragezero's code as a basis and modified is until I arrived at What I currently have:
  
  div.code-box {
  font-family: 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Monaco, Courier, monospace;
  white-space: pre;
  width: auto;
  line-height: 1.4em;
  margin: 1em 0;
  border: 1px dashed #aaa8a8;
  padding: 0.5em 0 0.3em 0.5em;
  font-size: 80%;
  color: #000;
  overflow: auto;
  }
  
  div.code-box {
  background: #fff url(http://loadaveragezero.com/img/cut.gif) no-repeat top right;
  }
  
  div.code-box a:focus,
  div.code-box:hover {
  background: #CFECEC url(http://loadaveragezero.com/img/cut.gif) no-repeat top right;
  }
  
  
  to use it I just use the div class i.e.
  
  <div class="code-box">
  
  Currently my only issue with it is that it can be difficult to scroll across occasionally.
  

• Current Date and Time
  Source: Blogger hack
  ------------------------------------------------------------------------------------------------
  
  Blogger hack has a good solution to this. In addition you can add the time by including the following addition to your js code:
  
  
  var seconds = themelib.getSeconds();
  var minutes = themelib.getMinutes();
  var hours = themelib.getHours();
  
  document.write(hours+":"+minutes+":"+seconds+" ",dayarray[day] + ", " + montharray[month] + " " + daym + ", " + year);