Skip to main content

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 CODE FROM THE 3RD PARTY HERE

</div>
Install the code into your blog the way you would usually install this 3rd party code.

This will centre-align the contents (not title) of the specific gadget that you add.

Note the American spelling of the word "center" - and don't forget to put the closing </div> statement at the end.

There may be some gadgets where it would be possible to add the centring statement to the gadget code itself, rather than putting it outside.    I don't recommend this (unless you're so comfortable with HTML and CSS that you don't need to be reading this article), because it introduces a risk that you will interfere with some other aspect, or that you will lose the centering if you ever need to refresh the code.


Option 3 - Make a new style rule just for the gadget

If you only want to centre one (or several) gadgets - not all of them - then it's best to define a new style that is to be used on specific gadgets:  put this new style into your template, and then apply it to the gadgets like this.
<div class="YourNewSytle">

PUT THE CODE FROM THE 3RD PARTY HERE

</div>

This approach will only centre the gadget contents - not any header that you give to it.

There are lots of options that you could put into the new style rule, but at a minimum it needs to have
.YourNewStyle
{
  text-align: center;
}
Notice that there is a "." (ie a full-stop) before the name of your new style.

Also, it's best not to use a number as the style-name (eg "2nd-gadgetStyle"), because this doesn't work with some browsers.


Related Articles

Putting HTML code from a 3rd party into your blog

Adding a new CSS style into your template

Centering the header in your blog

Putting a gadget above your blog's header

Removing the attribution gadget from Designer-template blogs 

Labels

Labels:

Comments

Post a Comment

Share or Leave Your Comment

Popular posts from this blog

How to rename picture files in Picasa-desktop

This article is about re-naming files from within Picasa-desktop, to provide SEO benefits for your blog. Picasa's desktop software is a good tool for organizing and editing photos on your local computer.   And it is still available for you to use, even though Picasa-web-albums has been replaced by Google Albums + Google Album Archive. For pictures that are important in your blog, I still recommend preparing them in a tool like Picasa-desktop and then uploading the finished versions to Google Photos before putting them into a post, because: The desktop tool has better editing tools (cropping, zooming, auto adjustment, adding watermarks) and Picasa-web-albums does. It lets you control the size of the uploaded file It's easier to ensure sure that you still have full-size files on my local machine for printing etc, as well as smaller, more optimized, copies to use on web-pages. Picasa-desktop folders have a very nice relationship with files and directories with the Windows file s...
Post a Comment
Read more

Putting files into Blogger's root directory

This article explains the issues, and options, for putting a file into the "root directory" of your Blogger blog. Turnips (Brassica rapa)  from Wikimedia commons Originally posted to Flickr   by thebittenword.com.   Licensed under the terms of  the cc-by-2.0. If you are using certain non-Google products to enhance your Blog, they will sometimes tell you to put a file into your root-directory .   They may even tell you to use an FTP  tool to do this. Sometimes this happens when a product also gives you code to install into your blog  , This approach is used when the code is written for websites in general rather than specifically to work with Blogger: putting useful files into a place relative to the root directory makes it a lot easier to move a website from a test-address to the live one, so is a common approach outside of Blogger. Or maybe the other tool has been designed to verify that you do own the website in this way, rather than asking...
Post a Comment
Read more

How Do Insurance Companies Make Money? - How Does It Work Operationally?

How does it work operationally? Insurance companies can be much more complex than it seems. I won't go into details, but I will try to give a sense of the variety of things to do: Marketing and product development - we have to understand what our clients want and product design including "features" and guarantees (e.g., including dental health plan or not in limitation of the disease before the type of questionnaire that we ask clients to fill???), pricing, regulatory constraints, etc. and IT is, of course, for the system to support this product. Distribution - how we bring our products to the clients? Agents, brokers, direct sales channels are all there, plus the development of smartphone applications and internet sales. Customer service and claims that "the process of paper" including address change customer or telephone number, the call center for clients who have questions, people file to review and pay claims, etc. Finance   - n...
Read more