About   All Tips   Tips by Category   Tips by Ability   Help!

How To Center Your Header (New Templates)


Last week, I showed you how to easily widen your columns on the newer Blogger templates. Making modifications to widen your template might make you want to center your header. Fortunately, the Blogger folks have made it easy to do this, too! 

How to center your header: 

1. Visit your blog. Click on design in the top right corner.


2. Click on Customize (below the picture of your blog).


3. Click on Advanced. Scroll down and click on Add CSS.


4. Copy and paste this code into the bog box. Copy it exactly. Don't forget the period at the very beginning! If you leave out a character, it will not work.

.header-outer {
margin-left:85px;
}


5. Check out the preview below the box. If the header is centered, you're done! If not, increase or decrease the number 85 until the header looks the way you want it. Lower numbers move the header to the left. Higher numbers move it to the right.When you're finished, click on Apply to Blog (orange box in top right corner).

Enjoy your beautifully centered header! :) :) :) 

Related posts: 
 
Have you been helped by my tips? Consider sharing them with your readers by adding Sneaky Momma Blog Design to your blog list or by grabbing a button to display in your sidebar! 
 
ALL CONTENT © SNEAKY MOMMA BLOG DESIGN
Want to share this tip with others? I would be honored for you to do so by linking back to this post. Please do not copy and paste my words and images onto your blog/website. I work hard on my tips and want everything to remain here. Thank you for your cooperation! :)

Adjusting Widths on Your Blog (New Templates)


Adjusting the widths on your blog used to involve quite a bit of template tweaking. Not anymore! The widths on the new templates are SO easy to adjust with easy previewing and no risk to your template. Here's how to do it:

1. Visit your blog. Click on design in the top right corner.


2. Click on Customize (below the picture of your blog).


3. Click on Adjust widths.



4. Slide the little rectangle back and forth for each section that you want to change. Keep an eye on the preview and click on Apply to Blog (orange button in top right corner) when your blog looks the way you want it to.



5. Take a look at your blog to make sure that the changes look the way you want them to. If you need to fix something, just go back and repeat the above steps. :)

Related posts:
Spacing in Sidebars
Sidebars: Align Your Buttons!
How to Install a Background (EASY!)

Have you been helped by my tips? Consider sharing them with your readers by adding Sneaky Momma Blog Design to your blog list or by grabbing a button to display in your sidebar! 
 
ALL CONTENT © SNEAKY MOMMA BLOG DESIGN
Want to share this tip with others? I would be honored for you to do so by linking back to this post. Please do not copy and paste my words and images onto your blog/website. I work hard on my tips and want everything to remain here. Thank you for your cooperation! :)

Social Media Icons Gadget



I've gotten lots of requests for a tip on how to create a social media gadget, similar to the one at the very top of my sidebar. Facebook, Pinterest, and Twitter are all easy avenues for you to introduce your blog to new readers. It's important to give your blog as much exposure as possible.

What I like about this gadget is that it allows for me to pack a lot of information into a small space. A cluttered sidebar takes forever to load. Bulky gadgets can cause your readers to lose interest in your sidebar before they get to the stuff that you really want them to check out.

Before you begin: 

1. This tip can be super tricky. You probably won't "get it" the first time. It requires lots of patience and persistence. Go slow. If you don't get it right the first time, walk away, then come back later and start completely from scratch.

2. Find and download a set of social media icons that include everything you're wanting for your gadget. Check out this beautiful set of icons over at Craftiments. A search for "free social media icons" will yield pretty good results, too. Look for icons with transparent backgrounds. They all need to be the same size and shape for a somewhat painless installation. My gadget was created with icons from different sets. It took quite a bit of trial and error (and hitting my head against the wall!) to make them all fit. :)

3. Make sure that the place you wish to install the gadget is wide enough to accommodate it. For example: My social icons gadget is approximately 280px wide. My sidebar is bigger than that, so I know that it will fit.

4. You'll need html codes for all of the icons. If you need html codes, you can get them from an online photo storage site, like Photobucket. Click here for help with this. For each icon, you'll want to replace the url that follows <a href="  with the url to where you want your readers to go when they click on it.

Creating the gadget: 

1. Open a new word processing document on your computer. You can use any program, such as Word, Works, or Notepad.

2. Copy and paste all of the icon codes that you wish to include in the gadget into the document, one right after the other. Put them in the order you wish for them to appear. The rightmost icon needs to be at the very bottom, the leftmost at the top. It should look like a big paragraph. Here's what the code for my social icons gadget looked like at this stage:


Installing the gadget:

1. Go to your Page Elements page and click on Add A Gadget. Select HTML/Javascript.

2. Be sure that you are in html mode. If the upper right corner of the box says Rich Text, then you are in in the right mode. If it says Edit HTML, you'll need to click on that link to be in html mode.

3. Copy the code that you created above and paste it into the gadget. Add <center> to the very beginning of the code and </center> to the very end if you want it to be centered in your sidebar. SAVE.

4. View the gadget on your blog. Then edit it and tweak it to get it to look the way you want it to. Are your icons all bunched together? Try adding a space (&nbsp;) or two between each icon. The finished code for my gadget up at the top of my sidebar looks like this:
5. Move the gadget to wherever you want it to go. Click here for help.

Troubleshooting:

Can't get this tip to work for you? Start over from scratch, taking your time to read through each step. If you miss one tiny character or if you add one tiny invisible space, the gadget will probably not work. Make sure that your sidebars are big enough to accommodate the width of all of your icons.
 
Did you install your social media icons another way? I'd love to know how you did it! :)

Related Posts:
Side-by-Side Sidebar Buttons (ads, etc.) 
Promote Your Blog With Pinterest
Spacing in Sidebars


Have you been helped by my tips? Consider sharing them with your readers by adding Sneaky Momma Blog Design to your blog list or by grabbing a button to display in your sidebar! 
 
ALL CONTENT © SNEAKY MOMMA BLOG DESIGN
Want to share this tip with others? I would be honored for you to do so by linking back to this post. Please do not copy and paste my words and images onto your blog/website. I work hard on my tips and want everything to remain here. Thank you for your cooperation! :)