Welcome to BloggerGarage.com
Blogger Garage contains tips and tricks to customize your blog as well as instruction for beginners. Explore by browsing through the topics on the side bar. Blogger Garage is just getting going so come back soon for more articles.
Have a cool customized blog? Send your link to feature (at)
Learn How To:
- Add audio / video
- Utilize feed / RSS
- Customize your template
- Analyze and develop readership
- Discover new blogging tools
... and much more!
basic html
You don't have to know a lot of HTML but knowing the basics will definitely help.
Listed below are a few good online tutorials:
HTML Colours:
Like a color that you've seen and want to use it on your site? While viewing the page with the color you like, hit print screen. Open up Microsoft Paint and paste the screen shot. Use the water dropper tool and select the color you like. In the menu, click Colors, then Edit Colors. On the color window, click Define Custom Colors. The RGB values will be on the right side of the window.
Remember the RGB values and click here to convert them to into a hex value. The resulting hex value can be used in HTML. Check out a page of HEX color chips here.
Creating an Image Header
To learn how to place an image header in blogger beta, click here.
To create a header for your blog, first design your graphic that you want to display. It is best to make your graphics width 740 pixels, at that size it will fit most Blogger templates. The height is up to you but the smaller the better, it's best to not go over 400 px. A good program to create your header in is GIMP.
Note: If you want rounded corners on your header -
In Microsoft paint start a new file and click on Image on the menu bar then attributes. Enter in the size of your header (ex: 740X200). Use the method found here to find the RGB values of the color of your blog background. On the menu, click Colors then Edit Colors. Enter in your RGB values in the text field indicated below:
The color of your Blog's background is now selected in the bottom left hand corner of paint.
Select that color and then select the rounded box tool
Starting at the top left corner (0,0) drag the square all the way to the bottom right corner (ex:740,200). You'll have a thin one pixel border around your graphic with the corners rounded in. Use your custom color to fill in the corners.
Save your header as a jpg, blogger will not accept any other format. Note: If you decide to do rounded corners, it's best to do that before putting text onto the header, Windows Paint will distort the letters. Use GIMP or some other image program to put the text onto the header.
Adding Video
If you are new to Blogger you may soon want to put some video in a post. The three best known and reliable options are Google Video, YouTube & Blip.TV. With all three options you can upload and post your own videos as well as share other users videos. To view specific instructions select one of the following options:
To upload your content to Google video you will need a free Google account. Click here to sign up. Once signed up, go to Google Video and selection 'Uploaded Videos' from the top right corner of the screen as shown:
Read and accept Google Video's Terms of Service and you will enter the Google Video Upload program. Select 'Upload Video' and you will be given two options: web based upload or the desktop uploader. Use the desktop uploader if you have huge video files to share, otherwise select the web-based option.
This tutorial will continue with the web-based option. Click the 'Upload your video' button and you will proceed to the Upload form. Click 'Browse' and select the video you'd like to share and fill in the rest of the form with details about your video.
Once you have completed the form, click 'Upload video' and your video will begin to upload. Time to upload will vary depending on the size of your video. Do not close this page while it is uploading. Once it is finished you are taken to the following page:(click to enlarge)
You now have the option to put your video onto your blog. You have a couple of options: you can either get the code by clicking 'embed this video on your website or blog' or you can click 'blogger' in the post to: section. If you click 'blogger' you will log in with your blogger ID and video will automatically be posted for you. If you clicked 'embed this video...' you will be given the code. Create a new post, click the the 'edit html' tab for the post and paste in the code you were given. Your video is now posted on your blog via Google Video.
Blip.tv is my personal favourite for video sharing because of its simplicity, ease of use and versatility. It can convert your video for you into other file types and gives you the code to embed your video into your blog and even has code specific for myspace.
On the main page, select sign up from the top right corner and fill in the required fields from their simple sign up page:
You are now a part of blip.tv! Select upload from the top menu bar and fill in information about your video. Click 'browse' and find your video on your computer. At the bottom click 'Post the File'
You will see a status bar for your video upload, once it is complete you will be given the code to place in your blog post
Log into Blogger, create a new post and in the 'edit html' tab paste the code you copied from Blip.tv.
Note: When you try to post you may get an error message from blogger, just click the box for 'stop showing errors for this post' and publish again.
Blip will create a thumbnail for you and your video is now posted!
Youtube is probably the most popular video uploading site on the web. You can sign up to YouTube by clicking on 'sign up' in the top right corner of their home page. Fill out the required fields in their form:
You are next given the option to invite friends or family, you can do so if you'd like or click 'skip' at the bottom of the page. To upload a video, click the 'upload' tab at the right of the screen. Before you begin your first upload you have to verify your email address. Click 'send email' and you will be sent a verification email. Go to your inbox and confirm by clicking on the link in the email. Upon clicking that link you will be taken to the video upload page. Fill out the first page with information about your video. Click 'continue' and you will be taken to the second page where you can select your video by clicking 'browse'. Click 'Upload Video' and the transfer will begin.
You will see a status bar of your upload, once it is complete you will be taken to the Video Details page for the video you just uploaded. At the bottom you can find the html to paste into your Blogger post.
Copy the html and log in to Blogger to create a new post. Click the 'edit html' tab and paste the code from Youtube. You will likely have to adjust the width and height in the code so that it fits in your post. Adjust the code highlighted below until it is the way you like it:
A width of somewhere around '400' is usually best for most blogger templates.Click publish and you now have your video post via YouTube.
Change the Sidebar Layout
In the default layout in Blogger Beta, you get two sections in the side bar where you can add elements: the profile box and and one other side bar box. For some templates it would be nice to section off your side bar like this:
It is not too difficult to create new sections in your side bar so that instead of this:
You can get this:
NOTE: This code has been tested only on the 'rounders 1' blogger template. Let me know if you try it on another template and we can work to customize to your blog. Thanks!
In the 'edit html' view first click the 'expand widget templates' and then scroll down until you find the following code:
#sidebarbottom-wrap1 {
background:$mainBgColor url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}
#sidebarbottom-wrap2 {
background:url("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding:8px 0px 8px;
}
background:$mainBgColor url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}
#sidebarbottom-wrap2 {
background:url("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding:8px 0px 8px;
}
Copy the code you found in your template and paste it below itself (make sure you copy the code found in YOUR template, not the code above because code may vary slightly depending on your template). In the code you just copied change #sidebarbottom-wrap1 to #sidebarbottom-wrap3 and #sidebarbottom-wrap2 to #sidebarbottom-wrap4
A few sections below this find:
#sidebar h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}
Once again, copy this code and paste it immediately below itself. Change #sidebar h2 to #sidebar2 h2
We are now ready to create the new section. Scroll down until you find the existing side bar section which begins with this:
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
and ends with this:
</b:section>
</div></div>
Under the exsisting side bar section paste this code:
<div id='sidebarbottom-wrap3'><div id='sidebarbottom-wrap4'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
</div></div>
Save your template and go to the 'add elements view', you now have a new section in which you can add elements. To add even more sections repeat the above steps but change the numbers in the code that you just changed to new numbers (ex: from 3 & 4 to 5 & 6 and so on).
Submit a Tip
Have a cool tip or trick you'd like to share with the world? Submit your idea and it may be posted on Blogger Garage with a link to your site!
Fill the form below:
Header
This tutorial shows you how to place an image header in place of the current text header. To see how to make an image header to use, click here
Click the template tab and go to the page element view. Click 'Add a Page Element' and select the picture option. Click browse and select from your computer the picture you just created, make sure that you uncheck the box that says 'shrink to fit'. To make it easy to find in the next step, place the element you just created above the body element.
Click on 'edit html' and then click 'expand widget templates'. Scroll down until you find the code for the picture you just added. It will look something like this:
(click picture to enlarge)
If you have trouble finding it, search for div id='main-wrapper' this signifies the start of the code for the main column which is where you placed your picture. Under the code the starts the main section find . Depending on how many pictures you've put on your blog it may not be image1 but something like that. As in the picture above, cut (make sure you cut, not copy) this code and paste it over this code: 
You have just pasted your picture code ontop of the code for the old header. Make sure that the code is moved, not just copied. You can check to see if it is in the right spot by going to your 'add element' view and see where your picture is, it should look like this:
If you have trouble finding it, search for div id='main-wrapper' this signifies the start of the code for the main column which is where you placed your picture. Under the code the starts the main section find . Depending on how many pictures you've put on your blog it may not be image1 but something like that. As in the picture above, cut (make sure you cut, not copy) this code and paste it over this code: 
You have just pasted your picture code ontop of the code for the old header. Make sure that the code is moved, not just copied. You can check to see if it is in the right spot by going to your 'add element' view and see where your picture is, it should look like this:
To remove the default background for the header delete the following highlighted code from your template:(click to enlarage)
remove nav bar
To remove the blogger navigation bar in Blogger Beta place the following text in your template:
<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
</style>
You can do this by going to your layout tab and selecting 'Add a Page Element'.
Select 'Add HTML' and paste in the above code. It doesn't matter where you place the page element, it won't be seen by your readership.
This code resizes the iframe that the navbar is in to 0px, effectively removing it.
The following tutorial is for blogs not using Beta:
To remove the blogger navigation bar, paste the following text between the style css tags as shown below:
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
Feed Button
Do you have countless feed chicklets on your site for users to subscribe to your feed?
Feedbutton will help you turn this:
into the 'feedbutton' you see at the bottom of the sidebar of Blogger Garage.Check it out!
Clocklink
Have friends or family that live in a completely different time zone? Add a clock to your blog using Clocklink. Clocklink offers a large gallery of free clocks that come in many different styles. You can select a clock from one of the categories listed and pick your color and time zone. You are given the code and all you must do is log into Blogger, click template > page elements, select add page element and choose the html option then paste the code! Here are a few examples
Flickr Badge
Flickr is an online photo sharing community where you can easily upload photos, create albums and share in a variety of ways. Learn more about flickr here. An easy way to share photos on your blog is through a 'flickr badge'. The flickr badge can be customized to suit your blog and comes either as a flash badge or as html. Create an account - flickr is owned by Yahoo! so you can use your yahoo ID if you want. Once you are logged in, go to http://www.flickr.com/badge_new.gne to create your own badge. Once you are given the code log into your Blogger Account and go to template > page elements. Click add element and select the html option. Just paste in the code you were given and you now have a flickr badge. Check out an example here.
Contact
Help:
help (at)
Comments & Suggestions:
comments
submit
Have a cool idea from your blog for Blogger Garage?
Submit your idea below and if accepted your example will be featured on Blogger Garage with your blog as the example
Include your blog address and email
create your blog
Don't have a blog but want to get started?
Start at Blogger.com and click on 'Create Blog Now'
Fill in the required information, your user name is what you use to log in, no one else will see that name. The display name will be your signature that follows each post and will be what people see in your profile.
Fill in your Blog Title which will be what you want your blog to be called. Next is the URL, which is the web address for your blog.
Next you will choose your template. Don't worry too much right now, there are more options with in blogger and you always will have the ability to change it
Your blog is created! For a basic blog, there is nothing left to do, just type your post and hit 'Publish Post'.
Return to the main page to learn how to customize your new blog!