This article is about centering gadgets from 3rd parties that you install onto your blog.
It is a simple trick that does not take up to 3 minutes
This will centre the contents and title of every gadget on your blog.
click save to blog and view, that is all
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.
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
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.
Have any other issue? post it as a comment i will respond
You may also like to read:
It is a simple trick that does not take up to 3 minutes
Option 1: Centre all the gadgets in your blog
To do this, add a CSS rule to your blog. as follow- log to blogger dashboard and click on template as indicated on the red circle line
- Click on advance as indicated bellow
- Scroll down to and click add CSS Code
Copy and paste this code in the white box
.widget {
text-align: center;
}
This will centre the contents and title of every gadget on your blog.
click save to blog and view, that is all
Option 2: Only center-align the specific gadget
Put the code from the 3rd party (eg PayPal, Amazon, etc) inside a centering statement, like this:
<div style="text-align: center;">
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
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 gadget like this.
<div class="YourNewSytle">
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.
Have any other issue? post it as a comment i will respond
You may also like to read:
0 Comments