Skip to main content

Posts

Showing posts with the label Blog layout

Centering gadgets in Blogger

This article is about centering gadgets from 3rd parties that you install onto your blog. Previously, I've described how to put HTML code from a 3rd party into your blog . When code like this is put into a gadget , one common question is "how do I center it?" There are (at least) three options for doing this, ie for putting a gadget into the middle (horizontally) of the area it is located in.   These are described below. Option 1: Centre all the gadgets in your blog To center-align every single gadget in your blog, just, add a CSS rule to your blog .  The rule to add is: .widget {   text-align: center; }  This will centre the contents and title of every gadget on your blog. Option 2: Only center-align the specific gadget To only centre-align one gadget, which is made from HTML/Javascript code, you can just put the gadget-code from the 3rd party (eg PayPal, Amazon, etc) inside a centering statement, like this: <div style="text-align: center;"> PUT THE ...

Lining up the first post and the sidebar

In some Blogger templates, there is a big gap between the bottom of the header and the start of the first post, and this means that the posts and the sidebar are not aligned.  This article explains how to adjust the gap, and so remove that problem . In the templates that Blogger provides , as well as all third-party templates, the amount of space between elements on the screen is not accidental:   designers put a lot of effort into working out what spacing will look good, and then finding ways to put CSS code into the template so that the spacing they want is shown in any browser software that Blogger supports. But there are times when you may want to change this spacing, and this is easy to do, provided you are willing to accept the disadvantages of editing your template , and if  you can work out exactly which part of the template code to change. The pre-Header gap A pet-hate of mine is the blank space above the first post, which looks strange unless you put something...

How to put a gadget above your blog's header

This article is about how to put an item (any type of gadget) above the Title section in a blog made with Google Blogger. If your blog has a layout or designer template , then (almost?) all of Blogger's templates start out with a nav-bar at the top of the screen, followed by a Header section showing your blogs title & description, or a custom header image if you've uploaded one. And even if you go into the place in the layout-designer where you can re-arrange the layout by drag-and-dropping items, you cannot drag any gadgets to above the header . But this is easy to change, provided you are willing to accept the disadvantages of editing your blog's layout template . How to allow changes above your blog's header Follow these steps to make it possible for you (or any blog administrator ) to add gadgets to the area about your blog's heading section: 1  Edit your blog's template in the usual way 2   Find this code in your template: <b:section class='he...