Blogger: Simple Template, Remove Content Box Shadow

The Blogger Simple template has a box shadow placed to either side of the blog content. Some people like it, others hate it. I've removed it from all of my own blogs and helped a few others do the same. Luckily, it's a simple CSS Tweak you can do in just a few moments.

Making the Change
Open the blog in Design->Edit HTML view, hit Ctrl+F to search for .content-outer to find the below style:

.content-outer {
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .15);
margin-bottom: 1px;
}

Delete the four box-shadow lines, then preview your changes. Poof the shadow along the sides of your blog content are gone. Save the template and you're done. Short, sweet and simple.

Blogger: Remove Sidebar Widget Title Margins

Remove Excessive Title Margins from your Sidebars

I come across this problem pretty regularly while browsing the help forums. Blogger gave us templates with excessively large title margins. It breaks up flow with an often large empty space regularly bigger than the text title itself. Luckily, this is a simple enough problem to remedy with a little CSS.

Quickly Override the Title Margin

The simplest approach to the problem is to open up your blog Design->Template Designer->Advanced->Add CSS box and insert this single line.

.sidebar h2 { margin-bottom: 0px !important; }

You should see the empty space greatly shrink in the preview section. Adjust the 0 value to find the right look for your blog, then just click Apply Changes in the upper right corner and you're done! That was simple enough wasn't it?

Conclusion

This minor CSS change can have a strong impact on the flow of your sidebar. Try out new values and perhaps consider adding some color or an image to the background for even more impact. There are a lot of options in CSS and you can customize the sidebar titles with them. Just remember the .sidebar h2{ } element and experiment.

Blogger: Automatically Resize Images

Many bloggers struggle with images on their blog. I cannot count the number of times I've come across a blog with beautiful photos that completely ruin the flow and design of a blog because they are not properly sized. Blogger provides basic image sizing tools in the post editor, but this approach doesn't always fit the blog design well and requires each image be tailored individually.  Luckily, CSS makes it possible to tailor each image for a blogs design by automatically resizing posted images.

Limiting Where and How images Resize
It's important to limit automatic image resizing to specif images on your blog. You certainly do not want design graphics or profile pictures to appear the same as say a landscape photograph you've taken. Keeping this in mind it's important to limit the CSS code to just a specific portion of your page. I suggest focusing only on images in a post body, this way other parts of the blog are unaffected and you're free to customize other areas without messy style overload.

Blogger CSS Tweaks: Remove Border and Box Shadows from Images

Blogger templates such as Simple include a rather large box shadow and border around most images on the blog. I find this style suited best to photo blogging, but not so well fit to my topics and posting style. Many others I've encountered feel the same. Luckily, It's a simple matter of altering a key CSS style to remove this feature from your images.

Removing the Style
Open up Design->Edit HTML and search for .post-body img to find the responsible style. As you will notice this style is applied to several other images, so altering it will impact many parts of your blog. If that's what you want, scroll down just a few lines and delete these:

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

This takes care of the box shadow, but leaves the border intact. Just above the deleted lines you should see this border: 1px solid $(image.border.color);. Simply change the 1px to 0px to remove the border. Preview your changes and save if you're happy with the results, easy.

For more simple Blogger tweaks like this, follow this link CSS Tweaks.

Blogger CSS Tweaks: Remove All Caps Titles

The new Blogger Simple and Picture Window templates each include a feature I'm not particularly fond of. You see there is a style which causes titles throughout the blog to appear in all caps. This isn't a design decision I would make seeing as such typing is typically considered shouting. So, I endeavored to remove this capitalization which luckily is quite simple.

Make the Change
This simple tweak requires deleting a single line of CSS from the template. It could also be overridden but I chose to remove it entirely. In any case open up Design->Edit HTML and search for text-transform: uppercase; under the h2 style tag. Delete this line and viola no more all caps shouting titles.

For additional simple tweaks like this one, click on the CSS Tweaks label below for other topics.

Blogger: Hiding Label Page Status Messages

Label page links are a great way to provide readers an easy way to view specific posts of interest. Unfortunately, Blogger likes to stick an ugly page status message at the top. This breaks up the flow of the site and honestly looks sloppy in my opinion. Removing this eyesore luckily is simple, just open Design->Template Designer->Advanced->Add CSS then paste in the line below:

.status-msg-wrap{display: none;}

Apply the change to the template, then view a label page. The status message is hidden from view as simple as that. No longer will your readers see this unattractive message while browsing through labels. Give it a try!

Blogger: Hiding the Navbar

Hide the Blogger Navbar for a more Professional Look
The Blogger Navbar is a useful feature, though it makes a blog look less professional. I like many others wanted to remove it. It's a pretty easy change to make and you can undo it at any time with a few clicks. After showing another person how it's done today, I thought why not a brief post on the subject.

Hiding the Navbar
Open up your blog Design->Template Designer->Advanced->Add CSS window. Now, paste this code into the box #navbar {height: 0px;visibility: hidden;display: none !important;} The navbar should disappear from the preview and  the blog align to the top of the page. Apply the changes and you're done. It really is that simple!

3 Key Blogger Spacing Customizations

New Blogger templates contain a large amount of spacing, far too much for some designers. The source of the spacing isn't seen while editing a templates HTML. Instead a hidden style sheet included at run time by Blogger holds the key. Viewing source on a blog page finds a widget_css_2_bundle.css link inserted just below the <title>. Three key styles contained within control most of the spacing in new Blogger templates.

The Three Columns in new Blogger supplied templates include padding to the right and left. Two column designs hide a column by setting width to zero. In any case, override this style to either widen the gap or tighten things up.

.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner{padding:0 15px}