Blogger Installation Instructions

First…

Sashwhy’s Studio will e-mail you the header image file (it will be either a .jpg or a .gif file) and HTML file (word document) (as well as any other graphics you ordered: button, signature, etc.)

Save these files to your computer

Second…

IMPORTANT. Backup your sidebar content because it will get lost when pasting in your new HTML. Do this by copying the codes from each sidebar item (or widget), and pasting the codes into a word document then saving it to your computer.

Third…

Install Your Design

• Log in to your blogger account
• Click on “Layout”
• Click on “Edit HTML”
• Delete the current HTML
• Paste the HTML that you were sent into the HTML box and click “save”
• You may be given a message saying that your widgets will be deleted, click “ok”

Install Your Header

• Click on “Page Elements” (still under “Layout”)
• Click “Edit” on the Header block
• Under “Image” click on “Browse” and find the header image that you saved to your computer
• Once it has uploaded, look under “Placement” and select “Instead of Title and Description”
• Click save changes
• View your blog to make sure that the design and header uploaded successfully

Install Your Signature (Deluxe Package only)

Click on “Settings” in your blog dashboard, and then “formatting”. Scroll down to the bottom where it says “post template.” Paste the signature code into that template. When you next go to make a new post, that code will already be in it. Just make sure you type your post *above* the code, or your signature will come first in your post.

Fourth…

Go to “Page Elements” and copy and paste the sidebar codes (that you backed up earlier) into the sidebars and organize them as you wish.

You’re all done!

We Can Install The Design For You

If you would like Sashwhy’s Studio to install it for you, send us an e-mail and we will be happy to install if for you. In order for us to log in to your account, we will need to know your login name and password.

Once the design has been installed, you will receive an e-mail from us stating that the installation has been completed. You will want to change your password at this time.

Sashwhy’s Studio Button

Most of our clients like to put a button in their sidebar stating that the header was done by Sashwhy’s Studio. This is always a blessing to us as it is a way to spread the word about our business. If you would like to add this to your sidebar, simply add the following code to your sidebar text widget (I will e-mail this code to you as well for easier copying and pasting):

Or choose a different button HERE.

To insert this code into your sidebar, go to “Layout” then click on “Page Elements”. Select “add a page element” wherever you would like to add the button. A new window will open – select “HTML/JavaScript”. A second window will open – click “edit HTML”. Now, in the “content” area, paste the code then click “save changes”.

DIY: Install a Custom Header (Blogger)

If you need to install a custom header into blogger, we have an easy tutorial for you. A custom header always gives that special finishing touch to a blog. The best part is, anyone can design and install their own header! Here are a few steps to help you on your way:

1. DESIGN A HEADER

You’ll need some sort of paint program. I use Photoshop, but you could use Paint or any other similar program if you do not have Photoshop.

I made my header size:

Width:  660 pixels
Height: 100 pixels

Once you are please with your design SAVE it by selecting “Save for Web & Devices” (this keeps the file size down which your help your blog remain fast-loading). It doesn’t matter whether you save it as a JPEG or GIF.

2. LOG IN TO BLOGGER ACCOUNT AND CHANGE SOME CODE!

Now you are ready to install your header…and do a little HTML editing.

• Click on “Edit HTML”
• Click on “Layout”
• Search for this code:

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

Now, change the width to whatever you set your header width to be (mine was 660 pixels, so I won’t be changing it).

Next, you’ll type in the height of your header as shown by example in the following code (in red) :

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

• Click “SAVE”.

3. Install Your Header

Now you’ll click on “Page Elements”
Then click the “Edit” button on your header box.

A dialogue box will pop up. Upload your file from your computer, select “instead of title and description” under Placement, then click “Save”.

Now take a look at your design to see if it uploaded correctly.

You’re all finished! Good job!

DIY: Remove the Blogger Navigation Bar

Have you ever wanted to remove the blogger navigation bar that is integrated into your Blogger design? Do you know what I’m talking about? Here’s a picture…

Well, if you’ve ever wondered if you could get rid of it, take heart,  you can! It’s fairly simple, though it does include a tad bit of coding.

1. Sign in to your Blogger account
2. Click on “Layout”
3. Click on “Edit HTML”
4. Copy the code below and paste it anywhere after the    /* Variable definitions code and just above the   body { code:

#Navbar1 {
margin: 0;
padding: 0;
display: none;
visibility: hidden;
}

5. Click Save. You’re all set!