Add picture to Customizable Header with free program GIMP

**Special thanks to Alison from Template Mama for giving me this tutorial for my followers.

There is a image manlipulation program called GIMP that you can use for all your graphic design needs. It's a great program and is free to download at www.gimp.org. Try it. You'll like it :)

Here are instructions on how to put your own picture into one of my customizable headers in GIMP :)

Click the "read more" button below for instructions:

Saving Widgets/Gadgets Tutorial

This tutorial is to show you how to save your widgets for installing my blogger templates. It's super easy to follow and you will never lose widgets. (2 & 3 column blogger templates images shown)

Before installing a blogger template, follow these instructions to save your widgets.

1. Click on 'Layout' tab.

2. Select on 'Edit HTML'. Now you see a code box, scroll down until you see the code shown in the images below:

(2-Column code shown)


(3-Column code shown which you would still need to find the 2-Column code)


3. Copy all the widgets (highlighted in yellow, yours will be different) Paste what you copied into Wordpad, Notepad or some kind of document. (All widgets start with b:widget id.)

4. Follow my instructions on how to install my blogger template you've chosen and DON'T SAVE.

5. Before saving, go back to your widgets in the document to copy and paste them over the widgets in my 2-column or 3-column code (what I have in yellow).

6. Preview to make sure everything is in it's place. If it is, you can save now. If not, you can always click on 'Clear Edits' and start over or go back to see what your mistake is.

7. Click SAVE.

It's possible Blogger may give you a warning that you are about to 'Delete Widgets'. If that happens you know you made a mistake along the way. Look at the widgets that Blogger tells you that are about to be deleted and add them to one of your sidebars in the code. Continue this until Blogger does save for you without warnings.

8. Now you're finished and enjoy your new template

**Special thanks to Template Mama for some of her lingo**

How to add Snow Effect to your blog

I found an awesome tutorial about adding a snow effect to your blog.
Thanks to Chic Boutique Designs for introducing me to this holiday tip.
Now, I get to pass it on to my followers.

Here is how to add it to your blog:

Go to Layout > Page Elements > Add a Gadget > Select HTML/Javascript


Now you copy the code.
<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript"> /*********************************************** * Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript * Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/ * Please keep this notice intact ***********************************************/ </script>

Paste the code in the empty HTML/Javascript box
Once you paste the code, Click SAVE.

Now you have snow falling on your blog. This snow is very delicate so it shouldn't bother your readers.

Disappearing Nav Bar

Here is a cool trick that I am using now to get my NavBar to disappear but not completely gone! For those of you who are unfamiliar with the NavBar (or navigation), it's that colored strip at the top of your blog that is really handy, but not very cute ;) Some people don't like it to show up but love the handy links it provides, well Megan over at Shabby Blogs has a great tutorial for it to disappear when not using it. It only appears when you hover over it at the top.

Click here to go to the tutorial.

*New* NavBar Option

Today, I found a new option in changing your NavBar color choices that I have to share with everyone. Now, there is an option for Light Transparency or Dark Transparency. See my previews below on what each option looks like.

Label Cloud in Blogger

What is a Label Cloud? Group of labels in a cloud-like form.
Example:



Adding a Label Cloud is very simple now that Blogger has added a SPECIAL feature to the Labels Gadget.

First make sure you add Labels to your post, which when creating a new post, down in the bottom right corner you will see LABELS with an empty box to write in. Choose descriptions for that post and add there to make a LABEL.

• Go to Layout tab of your blog.
  
• Click Add a Gadget
  
• Choose Labels gadget.
  
• Configure Labels box will pop up.
  
• Now in the Display section change List to a Cloud, click on the cloud option.
  

Amanda over at Beautiful Blog Designs posted this so I was letting all my readers know as well. If you haven't already, follow Beautiful Blog Designs. If the above tutorial doesn't work, please go to Phydeaux3 Tutorial for Creating a Blogger Label Cloud

Creating Bullets in a Post

If you like to have bullets in your post and don't know how to achieve this. You are in the right place.

What a Bullet List looks like:

• Bullet 1
  
• Bullet 2
  
• Bullet 3
  

Code to use for Bullet posting: <ul><li>Bullet 1<br /> <li>Bullet 2<br /> <li>Bullet 3<br /> </li><br /> <br /> </ul>

How To Hide Blogger NavBar

1. Click on "Layout" > ''Edit HTML".
2. Add this code below right before,
Variable Definitions as shown in image:
#navbar {
height: 0px;
visibility: hidden;
display: none;}

How To Convert to 3-Column

This tutorial is from Blogger Busters!

The Minima template is the easiest Blogger template to customize, as this is the simplest two column template.

First of all, set your template to Minima (not the stretch template, but any color will do!), then follow these instructions:

1. Go to Template > Edit HTML, leaving the "Expand widget templates" box unchecked.

2. Now, find this section in the HTML code:

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

3. Change float: $endSide: to float: right; in the sidebar wrapper code above

4. Copy the code below, and paste it directly under the sidebar wrapper code above.

#left-sidebar-wrapper {
width: 220px;
float: left;
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 */ }

(this will make the new sidebar float to the left of the main column)

5. Now, you need to find this section further down the page:

<div id='main-wrapper'></div>

6. Copy code below and paste it directly above the previous code above:

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

7. If you preview your template, you will notice that the right sidebar will be beneath the main section at the moment. This is because the outer-wrapper is still only wide enough to accommodate one sidebar. So now we need to expand the outer wrapper to accommodate this new sidebar.

8. Find this section in the HTML code, scroll up a ways:

#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont; }

9. Change the width of the wrapper from 660px to 880px.

10. Now you need to change the width of the header-wrapper from 660px to 880px so that it spans the new width of your blog, you'll need to scroll up: T

#header-wrapper {
width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor; }

11. You should PREVIEW & then SAVE your template if all is okay. Your new sidebar will not be show as there are no widgets contained within it, though it will still be present in the markup of the page. Once you have saved your template, go to Layout > Page Elements in your Blogger dashboard and drag your widgets to the left sidebar.

7. If you add anything to this left sidebar, you will probably notice that it bunches up to the main section. This is because there is no space defined between the left-sidebar and the main section. We need to create this space in the template's HTML. To do this, we will add a margin to the left side of the main posts section . Find the following code below in your template's HTML and add the code defined margin-left:20px and change to float:left;; as shown below :

#main-wrapper {
width: 410px;
float: left;
margin-left: 20px;
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 */

This defines a margin space of 20px between the left-sidebar and the main column. You should also ensure you adjust the width of the outer-wrapper from 880px to 900px to ensure the width of your blog is enough to accommodate this margin too. Either that, or you could reduce the width of your main column/a sidebar by 20px to serve the same purpose. Now, PREVIEW your template.

8. Finally, SAVE your template and enjoy your new sidebar!

Also, you can configure your new sidebar to float to the right, and have two sidebars on the right of the main column if you prefer. Simply set the CSS of your new sidebar to float: right; instead.

Remove Border from Header

Click on "Layout" > ''Edit HTML". Find this part of the code. There are two parts.

Change the 1px next to "border" to 0px. Preview and save it.

#header-wrapper {
width:860px;
margin:0 auto 10px;
border:0px solid $bordercolor; }

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto; }

#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;

Applying Blogger Background

Blogger Backgrounds work well with minima template. This means you will need to delete your old background. Don't worry ~ you won't loose your side bar page elements!

Selecting Minima template:
Go to "Layout" > Select "Pick New Template" > Select "Minima" template > Save Template.

Next applying blogger background:
* Click "Layout'" > "Page Elements"
* Click "Add a Gadget"
* Find "HTML/Java Script" and click the "+" sign
* In the large empty box, paste the entire HTML code of the background you choose into that area.
*Click SAVE

HTML CODE Example below
<style>body {background-image: url("URL HERE"); background-position: center; background-repeat:repeat; background-attachment: fixed; }</style>

Applying Blogger Header

* Click on the Header preview to enlarge and right-click to save to your computer.
* Edit banner to your liking.
* Click "Layout'" > "Page Elements"
* Find "Your Header text" (under Navbar) and click "Edit"
* Find "Image" and click "Add from computer" search for the banner you saved to your computer that you edited or click "From the web" and enter URL.
* Find "Placement" and select "Instead of title and description"
* Click SAVE

TIP: To add your own TEXT & PICTURE to one of my banners/headers , simply open the saved Header in a program such as Photoshop, Paint Pro Shop or any photo/paint program. My headers are in PNG format so this means you can use the layers in the program you are using.

- Adding a picture, be sure the picture layer is under the header layers.
- Adding text, text layer should be the top layer above the header layer.

**Be sure to save as a PNG file to keep it transparent** If you can't, you can email me and I can customize it for you =)

If you need help, please don't hesitate to contact me by my email: butterflygirlms@yahoo.com