Mostly Minimalist - Free 2 column blog template

This template is simply simple - very minimalist and nothing pretentious.  It includes a wide "main blog" column for your blog posts and a sidebar with light grey banners in the background.

click above for a live demo site

• To download the xml template: click here (zip folder)
• Preview the site here
• Need help installing this? Click here
  

BONUS BLANK HEADERS:

I have also included some blank pre-made banners for this template which look quite nice too.  These are made using dingbat font "Adhesive Nr Seven" and can be found here. 

Here are the 6 headers I have made:

If you would like to use one of these header images instead of the boring old plain-text header that comes with the template you will have to follow these instructions:

1. Pick the header image you want to use.  There is a folder within the downloadable zip folder called "HeaderImages" - the blank header images can be found in here.
   
2. Edit the image to include your header/description.  You can use various graphics programs like Photoshop, Photoshop Elements etc, or you can use free online applications like Aviary (use Phoenix) or Editor by Pixlr. There may be more out there that I don't know about.
   
   
3. Upload your new header image into your blog:
   Go to the LAYOUT then PAGE ELEMENTS window and click on “EDIT” in the header area:
   
   
   
   
   A pop-up window will appear (see below)
   
   
   
   Browse for the header image file on your computer and make sure you select “Instead of title and description” is selected (also, do not select ‘shrink to fit’).
   Click SAVE.
   
   
4. Done!
   

BYO Background with Changeable Google Fonts

 

Remember BYO Background? 

Well, I have re-made it to be friendly to Google Fonts!  So now the blog title, sidebar headers and blog post headings aren't locked into Century Gothic like the original template is!

WOOHOO!

All fonts can be now changed within the Template Designer area (under Design > Template Designer).

If you know what you are doing, download the updated version here.

Using one of Totally Severe's backgrounds this is what I have come up with:

If you have no idea what the deal is - in a nutshell: this template is a blank canvas and with a few edits you can fully customise the colour of the header and the background image and it can be easily transformed.

HOW TO USE THIS:

1) Install the template (as per normal)

2) Find a background image you'd like to use on your blog. Of course it's your responsibility to make sure it can be used for a personal (or commercial) site.

For this example, I want to use this background by Totally Severe.


{STOP THE PRESS: Just look at some of the freaking amazing backgrounds you can find on Totally Severe here, here and here! I AM IN LOVE!}

3) Download the image, save to your computer. You will need your own image hosting. I like Photobucket. It's free. Whilst Totally Severe seems to already host their images on Photobucket, it's good manners to host images for your own site yourself.

4) Put the background image code into your blog.

Go back to blogger and click on the "Design" > "Edit HTML" tabs.

Scroll down the big box of code until you find the /* ---( page defaults )--- *:

*/ /* ---( page defaults )--- */
body { margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: $textcolor;
background: #CCC url() repeat fixed;
background-attachment: fixed; }

You will see there are two brackets with nothing in them (in bold red, above)

Paste your direct image link in between the brackets. My code now looks like this:

*/ /* ---( page defaults )--- */
body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: $textcolor;
background: #CCC url(http://www.image_url_here.jpg) repeat fixed;
background-attachment: fixed; }


Click SAVE.

5) Add your header colour background

In the zip folder you downloaded, you will see a folder called "HeaderImages". Have a look in there and you'll see loads of different coloured header images. They all have curved corners:

(many more colours in the folder)

Pick one you like (or better still, pick on that matches your background image).


DONT SEE ONE YOU LIKE?  Just make it yourself!

Click on the "Design" tab and then "Page Elements".

Follow these instructions (click for a bigger image):

THAT'S IT!

OK SHARNEE SHUT UP AND JUST GIVE ME THE TEMPLATE!

• To download the xml template: click here (zip folder)
• Preview the site here
• Need help installing this? Click here
  

Want to have a custom color Blogger nav-bar? Yes it is possible!

Just a reminder that you can change that ugly blue Blogger Navbar (if you haven't already).  I guess it's a classic kind of blue, but it clashes with almost every single one of my templates and I hate it!

Want to change yours too?

To do this, all you have to do is log into Blogger, then go to the DESIGN and then PAGE ELEMENTS tabs. This is where you alter the positioning of your widgets and things.

Click on edit in the "Navbar" area:

This is what you will see:

Now that may be all fine and dandy if you live in boring-land and like boring things but if any of you know me well then you will know that I love to be a bit different :P

Yes, I have worked out how to change the background color (kind of):

1. I recommend you backup your template before making any changes.  You can do this by going to the Design tab then Edit HTML.  You can then download a copy of your full template.
   This is just a precautionary step in case you do something weird and muck up your blog.
   
   
   
2. To have our custom colour show up, we need to make sure that we have selected the TRANSPARENT LIGHT navigation bar choice above prior to adding the below code.  If you don't do this, your custom nav bar color will not be seen!
   
   NOTE: Please note that this is basically showing your background color of choice UNDER the transparent navbar.  Therefore the color is going to be slightly muted and not the exact color that you chose.  I think this is a good compromise.
   
   
   
3. We are going to paste some code into the big box of HTML.  Now this step is going to be different depending on what template you're using, but we need to paste some code into this box and we need to find a neat place to do it.
   
   
   
   (click for a larger preview)
   
   
4. Now as you will see from the above image, I have pasted these two lines of code in a neat spot (ie: after the curly bracket '}' and before the next one.
   
   The code you need to use is:
   
    #navbar-iframe {
   background: #XXXXXX;}
   
   #XXXXXX = the HEX colour
   
   ie: #FFFFFF is white and #000000 is black. You can find a list of tonnes of HEX colours on this website or this site OR you could even use ColorZilla in Firefox to pinpoint a specific colour in your blog, grab the colour code and use that!
   
   
5. Paste the code into your blog and alter the XXXXXX to be whatever colour code you want to use. Note that you should ensure there is a ';' at the end of the colour.
   
   
   
6. Click "Preview" to see if the changes are OK and then SAVE!
   
   
7. If you do not see your newly colored nav-bar then you should check that your Nav-bar is configured to be on "Transparent Light".

IT'S PINK, BABY!

To illustrate this works, I have put a bright pink nav bar color on my Blue Love Letter template.  Click here to view the template with pink navigation bar!

If you found this useful, please leave me a comment or re-tweet this link.  I want to share it with as many people as possible because I was never sure (before now) if this could be done.

How to change older, newer and home links to a graphic

First of all, I would like to announce that Suck my Lolly is BACK, baby!

For those of you who may have been following me for a few years, suckmylolly.com was my first site (some of my templates still link there). I loved that URL name, even if some people did not. Oh well, boo to them :P

I have decided to re-launch Suck my Lolly as my premium paid template site. I will be slowly adding my pre-made templates there, all newly buffed and polished (and eventually with some additional features) but check it out and help me support this site!

Templates are cheap, ultra cute and very different.

--------------- now, onto business ---------------

I was recently asked by a friend to change the links at the bottom of her blog for 'home', 'older posts' and 'newer posts'


This is what it looks like at the bottom of your blog (note: there is no 'newer posts' on the front page of your blog)

Here are the steps:

1. Log into Blogger. Click on DESIGN > EDIT HTML
   
   
2. Backup your template before making any changes. This means that if you stuff it up, you will be able to restore your blog to before when you changed it!
   
   
3. Ensure the "Expand Widget Templates" button IS TICKED
   
   
4. Search for the following code. If using a Mac use Command + F and if using a PC use Control + F:
   
   (HINT: Just search for the first line)
   

   <div class='blog-pager' id='blog-pager'>
   <b:if cond='data:newerPageUrl'>
   <span id='blog-pager-newer-link'>
   <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
   
   </span>
   </b:if>
   
   <b:if cond='data:olderPageUrl'>
   <span id='blog-pager-older-link'>
   <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
   </span>
   </b:if>
   
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   
   

   It's pretty self explanatory but orange is your newer entries link, green is your previous pages link and purple is your home link. Genius stuff!
   
   
5. Having a new text phrase as the link:
   Let's say you want to have a text link instead of an image link - erase ALL the coloured code and input a word. This would replace the 'Home', 'Older Entries' etc. You can use whatever word you want. Click preview and if it all looks good, SAVE.
   
   
6. Having an image icon as the link:
   Ignore point #5. We are going to insert an image instead of changing the text.
   
   Find some images that you want to use.
   
   Some good sites are:
   
   Upload your icons to your own hosting and grab the direct link to the image. You have to insert the following code into the coloured sections above (so orange is your newer entries image link, green is your previous pages image link and purple is your home image link)
   
   

<img src='http://www.YOUR_IMAGE_URL.jpg'/>

Don't forget the brackets and ' marks!


You can find some icons here:

• Knob Buttons Toolbar Icons
• Free Web Applications Icon set

(there are heaps out there but why not make your own!)

You can see a live example of how this looks here. Yeah I know it's not the fanciest example.

I will hopefully make some icons for you soon!

Have fun!

3 Column BYO background

Yes, some people asked for it, so here is BYO Background in a 3 column version! Hip hip hooray.

If you're new to this template please read this post about the 2 column version.

In a nutshell: this template is a blank canvas and with a few edits you can fully customise the colour of the header and the background image and it can be easily transformed into something like this......

click above for a live preview


FYI I have used a background from Ollibird and the header image is the 'LightSalmon' header.
The template does not come like this, you have to bring your own background, hence the BYO title.

• To download the xml template: click here (zip folder)
  
• Preview the site here
  
• Need help installing this? Click here

Coming soon.... a tutorial on how to change the text of the blog header with the Google Font Directory (good idea!)

BYO Background (use a background image of your choice!)

This is something pretty special!

I have created a pretty generic simple naked template that is waiting for a background image you have or may want to use.

It's pretty simple to do, but in a nutshell: this template is a blank canvas and with a few edits you can fully customise the colour of the header and the background image and it can be easily transformed.

1) Install the template (as per normal):

YES! IT IS COMPLETELY BORING!
(settle down, we'll now jazz it up)

2) Find a background image you'd like to use on your blog. Of course it's your responsibility to make sure it can be used for a personal (or commercial) site.

For this example, I want to use this background by Totally Severe.


{STOP THE PRESS: Just look at some of the freaking amazing backgrounds you can find on Totally Severe here, here and here! I AM IN LOVE!}


3) Download the image, save to your computer. You will need your own image hosting. I like Photobucket. It's free. Whilst Totally Severe seems to already host their images on Photobucket, it's good manners to host images for your own site yourself.

Log into Photobucket (or similar), upload your image and then grab the direct URL address of the image:

4) Put the background image code into your blog.

Go back to blogger and click on the "Design" > "Edit HTML" tabs.

Scroll down the big box of code until you find the /* ---( page defaults )--- *:

*/ /* ---( page defaults )--- */
body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: $textcolor;
background: #CCC url() repeat fixed;
background-attachment: fixed; }

You will see there are two brackets with nothing in them (in bold red, above)

Paste your direct image link in between the brackets. My code now looks like this:

*/ /* ---( page defaults )--- */
body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: $textcolor;
background: #CCC url(http://i200.photobucket.com/albums/aa231/free_blogger/redfruit.png) repeat fixed;
background-attachment: fixed; }


Click SAVE.

5) Add your header colour background

In the zip folder you downloaded, you will see a folder called "HeaderImages". Have a look in there and you'll see loads of different coloured header images. They all have curved corners:

(many more colours in the folder)

Pick one you like (or better still, pick on that matches your background image).

Click on the "Design" tab and then "Page Elements".

Follow these instructions (click for a bigger image):

THAT'S IT!

I added the red header image background and this is now how my test blog looks:

(click for a live preview)

Note: you can easily change the header text colour and sidebar bottom border colour by going to LAYOUT > TEMPLATE DESIGNER > ADVANCED. You will be able to change the colours to match your background there.


ALTERNATE HEADER IDEA: Why not take the header image and add your own text in a graphics program to reflect your own header title? It would look fancier this way! ..... then when uploading it select "Instead of title and description". Let me know if you want more info on that but it's pretty simple.

"OK Sharnee, that's amazing now please tell me where to get some awesome backgrounds from!!!!!!!"

• Totally Severe (in a word, AMAZZZZZZZING!)
• Ollibird backgrounds here and here (beautiful!)
  
• DinPattern - a great selection.
• Ava7 Patterns - loads of colours
  

• To download the xml template: click here (zip folder)
  
• Preview the site here
  
• Need help installing this? Click here
  
  

SHOW ME WHAT YOU DO! I WANT TO SEE!

Any questions or confusion, let me know!

PS: It's also a good idea to give the artist of your background a link, in the sidebar or footer. Don't forget ;)

PPS: Yeah I know I can't spell cappucino!

Joy n Balloon - XML blogger template

This is a very colourful template that is highly customisable by you! The background colours are all changeable from within the "Fonts & Colours" area, including the navigation bar, inner blog colour and post footer colour. As I have outlined below, you can use the header image of the girls and balloons or easily add your own. Enjoy!

click image for a live preview

This blog does not come with the header image installed! It is included in the zip folder, but you will have to install this yourself.


How do I install the header image?
Click on the LAYOUT > PAGE ELEMENTS tab. Then click 'Edit' in the header area. The 'Configure Header' pop up box will open (see below). Select the header image from the downloaded folder. Selecting the position of the header as 'behind title and description' will ensure that the title/description text can still be seen. If you want to hide it, select 'instead of'.

click for a larger preview

Easy!

Can I make my own header image?
Of course! That's the reason I have made this Blogger template without the header image automatically in the template. I advise you make your header image 800px wide for best results (otherwise, if you select "shrink to fit" it may skew and look weird).
Height does not matter, that is up to you.

Once you've made your own header image, you can just install the header as per instructions above.

Please ensure that you backup your widget data, as installing a new template will wipe/erase your current widget content.

• To download the xml template: click here (zip folder)
  
• Preview the site here
• Need help installing this? Click here

PS: If using the girls/balloon image (in the test blog) please leave the link back to the original artist of this photo: D Sharon Pruitt INTACT! (as per creative commons requirements). If you are using your own image you may, of course, remove that link.