How To Center 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 

Komentar

Posting Komentar

Postingan populer dari blog ini

Finding A Picture's Location (Url) In Google+ Photos Or Picasa-Web-Albums

This article is about how to find the URL (web-address) of a picture that is stored in Picasa web albums.  It is written for Blogger users, but the same technique can be used by anyone who uses Picasa-web-albums. Google+ Photos, Picasa-web-albums and your PC An introduction to Picasa . describes the relationship between Picasa and Picasa-web-albums.  A key difference between is that : Picasa is a program, written by Google, which runs on your PC even when it's not connected to the internet, and  Picasa-web-albums is a Google program that you use through your web-browser  and some accompanying space on the internet where your pictures can be stored. Google+ Photos is another Google program that you use through a web-browser (Chrome, FireFox, Internnet Explorer, Safari, etc), and a space on the space on the internet where you can keep pictures.    Both Picasa-web-albums and Google+ Photos use the same space on the internet to store photos for each person.    This means t
Baca selengkapnya

Saving A Post If Blogger's Publish Button Doesn't Work

Gambar
This article is about how you can save a  post even if Blogger's Publish button won't let you save your work. Imagine you've been working on a Blogger post for several hours.    It's finally ready: you've got the wording exactly right, everything is formatted with bold, italics and bullet-points, your pictures and links are all correct, etc.    But then your internet connection stops working.   Or you click the Publish button - and get a message like  "Post cannot be saved due to HTML errors".   You can't work out how fix the problem, and you need to stop working on it now ! This may seem like a disaster - hours of work wasted. But luckily there's a very easy way to save your work, and tools to help you diagnose problems. Saving your work and recovering it later How to save the post that you have written Switch to HTML mode (this is a tab at the top left corner of the editing window.  Select all the text in the win
Baca selengkapnya

The Ten-Minute-Guide To Starting A Blog

Gambar
This article is a fast-and-furious guide to starting a blog - with a focus on getting started rather than researching to the nth degree. Months ago, I started a properly researched article about "how to started with blogging". It's still a work in progress, and when it eventually gets finished it will have some great advice about researching blog-concepts and choosing great names. But today I needed a quick-and-dirty version, for someone who doesn't need SEO or a fancy name. Here's what I shared with them. How to get started with making a blog Know your objectives Think about what you want to do, what you want to write about, and what you want to achieve from it.  Write this down. Be prepared to revisit these objectives every time you need to make a decision about something.  Imagine you need to choose between a girly-pink looking template or rugged-outdoors one.  Simple - just look at your objectives and see who you're writing for. Choose
Baca selengkapnya