This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 16, 2007

Digg This Story

Style and Position Sidebar Images

When a picture is added to the sidebar, using Template -> Page Elements -> Add a Page Element -> Picture, there is an option at the bottom of the panel for you to have the picture “Shrink to fit”. Choose this option and the image will be automatically resized so as to fit your sidebar. Otherwise, it might appear to exceed the width of the sidebar. Once the picture is added, when you view the picture, it may appear to be on one side, either to the left or the right.

Style and Position Sidebar Images

To adjust the position of the picture, you can insert a definition into the stylesheet. Under Template -> Edit HTML, scroll to any part of the <head> segment. For easy reference, we inserted it here:-

/* Sidebar Boxes */

.sidebar img {
margin-left:25px;
border:5px solid #e8baba;
}


All you need is to insert the portion in blue to adjust the position of the image. You can change it to margin-right too. The attribute text-align:center; is tricky as it is not supported in some browsers.

The part in red is the styling that you can do. You don't need this unless you want the sidebar pictures to be different from the Blog Post pictures. In this example, we have set a border of 5px and assigned a color (#e8baba). You can have no border by putting the value as 0px or you can have a different color to the border.

The result is a picture in the sidebar that looks like this:-

Style and Position Sidebar Images

© Tricks for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

16 comments:

Lindsay said...

Love your site! I've been poking around today, and the only problem I've got left is that my photo still looks to be too big for the sidebar. Any suggestions?

hppt://crawfordhouse.blogspot.com

bizwhiz said...

Hi Lindsay

The baby photo at the top of the sidebar? Looks alright but if you want a different size, try resizing it before you upload and uncheck the 'fit to frame' option.

seefoo said...

Your site has been a tremendous help for me as a newbie. Thank you very much. My problems are 1. my header dont fill up the whole length like yours. 2. my sidebar map always came up to the same size no matter how many times i edit. 3. The blog doesnt seem to be the same in Firefox and IE. Pls help.

hamlengong.blogspot.com

Demons Don't Dream said...

Hi, thanks so much for your website. Provided a lot of useful tips that I can't wait to try out! Went through quite a lot of pages in your website but couldn't find an answer to adress my query. Could you kindly pls help me to look at my source and see what's wrong with it? The sidebar is all the way to the bottom of my blog. Tried various ways to tweak it, but it doesn't work. Will really appreciate it!!! ;)

www.stillhopingndreaming.blogspot.com

Amy said...

HI. I'm trying to set up my blog and I have three columns. I'm trying to put an image in my sidebar for my about me title and I can't center it. I try your step here on the site and It makes the other sidebar have just a black line. I've loved all the help I've found so far on this site. It's been great!! Veru helpful!

theskidmorescoop.blogspot.com

Geri Atric said...

Would this work for repositioning a button I recently downloaded from blogged.com whilst claiming/verifying my blog on their site? I somehow got the button into a posting and not onto the sidebar with the permanent blog features.
Thank you for this very informative site!

The Foster Family said...

I have the Minima 3 column, when I add things like music, chat box, to my sidebars, they are getting a little cut off. I can't seem to find how to fix it on your site. I am assuming I need ti mnimize my margin and make my sidebars wider??
Thank You!

Jason said...

Hi,

Your articles are really interesting and a lots of tips & tricks. Thank you so much for sharing!!

I am just started a blog that am thinking to insert a background image from my PC.

How can I go for it?

Best Regards

{the sassy mom} said...

Thank you so much for the help on this...I had been looking for a couple days trying to figure this out!

Kindra said...

Do have any information on how to replace the dotted lines between each gadget on the sidebar and replace it with an image like ribbon or something? Please Help!

kindra.lee@gmail.com

ahmad tarmizi said...

Thank you very much. Your article help me alot. thanks again

Anthony said...

Thanks for the great information. I've used a load of information from this site so far - and i've only just started building my blog yesterday. One question - how can i vertical align images in a sidebar. On my blog http://www.australianbetfairrevolution.com some of my page elements would look much better if i could centre them vertically.

hopeful said...

I learned so many things here. Your blog is always my guide.

Thanks so much.

gapeach said...

Holy Cow - after three days of trying different code - YOUR worked! Thank you!

...Me said...

Thank you for all the tutorials! i have a question... tried centering the side bar icons and messed it up as I have a three column blogger account. Is there any different to do?
thank you so much ;D

PlayTheNifty said...

Your blog has been a tremendous help. ALL your tips and tricks work!! Thank you :-)