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 

Getting the HTML code to put a picture into your blog's sidebar, header or footer

You can use the Post Editor to get the HTML code that you need to put a picture into your sidebar (or header or footer, or anywhere else a gadget can go).

The Picture gadget is the normal tool for adding a picture to your blog's sidebar.

But sometimes you want more control over the picture size or behaviour.  Eg, you may want to have two pictures very close to each other and guarantee that they're the same size.

To do this, you need to get the HTML code for the picture, and then put it into your blog as an HTML-gadget.  Fortunately, Blogger's Post-editor make it very easy to do this without writing the code yourself.

Using the Post Editor to generate the HTML for a picture

1  Start a new Post  (NB   you're not ever going to publish this:  it's just a work-area)

2  Don't enter any text:   just use the Picture icon on the toolbar to add a picture.   Blogger will prompt you to upload the picture, or to choose it from a Google-album-archive or to enter its URL:  add the picture the way that you usually would.

3  Switch to the HTML tab   (top left of the editing window).

This show you the HTML code for displaying the picture, as it is set to display in the Post (depending on the picture-settings you've chosen, it may be centered or right/left aligned, and the size may vary).

4  Copy the HTML.

5  Switch back to Compose, so that you don't get confused the next time you edit a post.

6  Return to the list of posts:  you may be asked if you want to leave the page without saving - the answer is Yes.  Or you may have a new draft-status post, which you can delete.



Job Done!   You now have some HTML code in your memory which you can paste into an HTML/Javascript gadget, or anywhere else that you may need it - even into another post that you are editing in a separate window, or into a totally different tool.

---

Related Articles

Stopping pictures on your blog from being "clickable"

Inserting a Picture into a blog Post.

Putting 3rd party HTML into your blog

Center-align the gadgets on your blog

Hosting pictures outside of Google / Picasa

Inserting a picture into your blog as a gadget

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='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Hint:  use the template-editor search tool, to look for a key phrase like "id='Header1'

4  Change it to

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Notice that there are two changes made:

• Setting maxwidgets to greater than 1, and
• Setting showaddelement to Yes, instead of No

Job Done:   after you have successfully saved this change, then the next time you edit your blog layout  (Dashboard > Layout  ), then you will find that you can add or drag-and-drop up to three gadgets to the Heading section of the blog, making a total of four.

You can add even more gadgets by changing the number for maxwidgets to something else.

Related Articles

Disadvantages of editing your blog's layout template

How to set up an extra administrator for your blog

Types of Blogger template

Planning changes to your blog - in private

How the data in Blogger blogs is organised

How to edit your Blogger template

Displaying a gadget only on the home page - or only on a specific page

This article is about how to set up a gadget / widget in Blogger so that it is only visible on the first place that a reader sees when they visit your blog (often called the "home page").  It is one of a series of articles about controlling what goes on the homepage of your blogspot blog.

Front Page Bob
By Paginator (Own work)
 [CC-BY-3.0], via Wikimedia Commons

There are a number of reasons why you might want to put a gadget only the screen that shows when a visitor first navigates to your blog's home page.

You may want to show a welcome message, or a topic-index page, or to give a view of your recent tweets or some other RSS feed.    

No matter what the reason, the process is very similar:

How to make a gadget only appear on the first page

Note:  in Blogger, the words "gadget", "widget", and even "page-element" all mean the same thing.  I generally use "gadget", because the Page Elements tab currently says "Add a Gadget".  But they're absolutely the same.

1   Add the gadget

Do this in the usual way.

2  Place the gadget

Drag-and-drop the gadget to the place where you want it.   It may be over or under your blog-posts gadget, or in a totally different place.

A popular place for a gadget that is going to look like a "home page" would be in the Body section, just above the Blog Posts gadget, where "Test Gadget" is in this example:

3   Find the Gadget-ID  in the usual way.


4  Find the code for your gadget:

Edit your template.

Click in the search box inside the template editor, and look for the widget name that you noted in step 3.   Once you've found it, notice what comes after it.   In this example, it's the line for Blog1:

          <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Use the expansion triangle at the left side of the template editor to expand this section of the code.  After you do, it will look like:

 <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

5   Add conditional formatting

You need to put conditional formatting code around the code for the gadget - makings sure that it doesn't go around the code for anything else!  (which is why you noted what comes afterwards in step 4)

And to avoid leaving blank space where the gadget would have gone, you need to update a "hide" instruction to apply it to the gadget-id you noted in step 3.

The code to use is this - except put the gadget-id instead of the XXX.

<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>

THE red CODE FOR YOUR GADGET GOES IN HERE 

<b:else/>

<style type='text/css'>
#XXXX {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>

The example above looks like this, when the code has been added:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>

<b:else/>

<style type='text/css'>
#Text1 {display:none;}/*remove blank space that the gadget leaves*/
</style>

</b:if>

</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

6  Check that it's worked

Preview your blog before you save the changes:  check that the the widget is visible.

Save the template changes, and look at your blog.  Check that

• The widget is on the first page
• The widget is not seen when you look at an older page (eg one from your archive)
• The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too.

If anything is wrong with how your blog is working, go back to the template editor (Layout > Edit HTML), and upload from the copy of your template that you made at the beginning of step 1.   This will let you blog work properly, while you figure out what went wrong.

How to display a gadget only on a specific post or page

Follow exactly the same approach as above.

But instead of  

<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>

Make the conditional statement based on something else.

This can be a different condition, or a specific page URL.    For example to display a gadget only on a specific page, use this code, and put the address of the page instead of POST-URL:

<b:if cond='data:blog.canonicalUrl == "POST-URL"'>>

Note:   for the address of the page, if your blog does not have a custom domain, then be careful to use the "blogspot.com" version of the address, not one with a country-level name  (eg the blogspot.in or blogspot.co.uk version)


To display a gadget on every page except a specifc one, replace the double equals signs (==) with the HTML code for not, which is an exclamation mark followed by an equal sign (!=).   For example:

<b:if cond='data:blog.canonicalUrl != data:blog.homepageUrl'>

Blogger have now provided an expanded list of conditional statements - you can find information about it:

• The support forum articles about tags https://support.google.com/blogger/answer/46995?hl=en
• and about expressions:   https://support.google.com/blogger/answer/6214580?hl=en
• Blogger Buzz about some more extensions:   http://buzz.blogger.com/2015/05/adding-new-expressions-to-blogger.html
• Another Blogger Buzz post - even more extensions:  http://buzz.blogger.com/2015/06/even-more-expansions-to-blogger.html

---

Where to get more information

Controlling what goes on the homepage

Adding a gadget / widget / page-element to your blog

Editing your blogger template

Putting a slideshow from Picasa onto your blog

Getting the HTML code to put a picture into your blog

Making a gadget that looks like a posthttp://buzz.blogger.com/2015/06/even-more-expansions-to-blogger.html

How to find a gadget in the Add a Gadget list - quickly

This article explains a quick way to find the widget that you are looking for in the list that Blogger displays when you use the Add a Gadget tool.

When you start to add a gadget to your blog, Blogger opens a new window listing all the existing page-elements that are available (in two tabs) and allowing you to upload a widget of your own (in a third tab.)

Currently, the first tab (called Basics) has 28 gadgets listed, while the second one (called More gadgets) has 899, displayed in pages of 30.

There is a search-for-gadgets feature available on the second tab - but it doesn't return gadgets that are listed on the first tab.   And even when it did, I didn't recommend it, because sometimes 3rd party gadgets with similar names were listed before the official widgets developed by Blogger.

So, to find a gadget that's listed in the Basics tab, you have to scroll down the list until you see the gadget you want.   However there are some problems with this.

• Given that there are 28 gadgets listed, but only about 4 shown at each click (may be different if you have a larger screen), this can be a lot of clicks.
• It's very easy to miss the gadget you want, and keep clicking through to the bottom instead.

But there is a very simple way to go directly to the gadget you want, provided you know what it is called, or some words that are shown in the description of that gadget and no other.

How to navigate directly to your desired gadget

Choose Add a gadget

When the new window has opened, use your browser's "find" command.

• In Chrome and Firefox, this is ctrl /f ,   ie hold down the Control key while pressing the "f" key once.

Type in a  few letters of the name (or description) of the gadget you want.  

Note:  these can be any letter, they don't have to be at the start.  But they must appear together.

Usually, as soon as you start typing, your web-browser will start scrolling down to the first place in the screen where the letters you type appear.   So if you choose the gadget details you type carefully, you should end up scrolled down to the gadget you want very quickly indeed.

The scroll bar at the side shows how far down the window you have come, and also if there are more cases of those letters further down the page.

And once you are at the gadget you want, you can just click the name or the blue plus-sign on the right side to open the gadget configuration page.

To sum up:

Use your browser's Find tool to go straight to what your're looking for in the Add a Gadget list. 
[tweet this]

What to search for to find popular gadgets

The words that I search for most often when I'm adding gadgets are:

• HTM - for the HTML/Javsascript gadget
• Ads - for the Adsense gadget
• Link L - for the linked-list gadget.

What about you - what gadgets do you most frequently add to your blogs?

---

Related Articles:

Backing up your gadget settings

How to add a gadget to your blog

Where to find the HTML code for popular Blogger widgets

How to add a Google Contacts button to your blog, website or desktop

This article shows how to add a button that takes a user straight to Google Contacts to your blog or website.   It also distributes a picture that you can use in other places (eg your PC desktop) to make your own Google Contacts icon.

Most people have a button on their computer or smartphone, which they use to start their email.  For some, this goes straight to their Gmail account in a web-browser, while others use an system like Thunderbird or Outlook to look at their email messages in a Gmail account and/or in email accounts they have with other services.

If you use Gmail as your email system, then Google also gives you an address book, which they call Contacts. This is not the same as the address book in Thunderbird or Outlook etc, which is saved on your local computer.   Instead, the Google address book is saved on the internet, in your Google account.

Google Contacts is tightly linked to your Gmail account, and the way that most people access it is by:

• Going to Gmail 
• Clicking on the Contacts button in the left-sidebar.

But you can go straight into your Google Contacts, without having to load Gmail first.   And I often find that it is faster, especially if I just want to look up an address or phone number and not send an email.

To go directly into your Google Contacts book, just type    www.google.com/contacts into the address-bar of your web-browser.

This is easy - but some people would prefer to have a button that they can click, rather than having to manually type an address.

So I have created a picture that can be used on such a button, and written up instructions on how to add it to your website, or your computer.   This is licensed under Creative Commons:  I am giving permission for it to be freely used on any website, so long as you say where it came from in the way that I've shown below.

(If you a wondering "why on earth would anyone want that" - then please don't waste time reading further - you are clearly not the target audience of this post!   I know that there are some people who will be delighted with the idea, and that's who I'm writing for today.)

How to add a Google Contacts button to your blog or website

Set up a place to put the button

If you want to add the button to Blogger, then just add a gadget in the usual way, and choose gadget-type of HTML/Javascript.

If you want to add it to some other type of blog or website, then you need to use whatever procedure is required to add 3rd-party HTML to your site.

Add the code

The HTML code to add is:

<div class="separator" style="clear: both; text-align: center;"><a href="https://www.google.com/contacts" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-_wwYm348HsY/U8BhN2lGEbI/AAAAAAAAS3o/FZNKRbtsiBk/s490/google-contacts-icon.png" width="50%" /><!-- Google Contacts Start button from www.areyoublogger.blogspot.com   Design © Blogger Hints-an-Tips, 2014.   Licensed under Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)  -->  </a></div>

Make sure you all all the code, including the Creative Commons license information - this is what says you are allowed to use the picture.

Configure the size

You can change the size of the button by changing the number in this statement:

width="98%"

On my sidebar in Blogger-Hint-and-tips, I have it set to 50%.

You can use either a percentage value, as shown, or a pixels or em measure, for example

width="50px"
width="10em"

Job done!

Save the change in the usual way, and you will have a button on your website which opens Google Contacts

How to add a Google Contacts button to your computer / laptop / desktop

This is a little more difficult to describe, because it depends on exactly what computer and operating system you have, and what you mean by adding the button "to your computer".   But here are some options.

Browser Favorites

One option is to go to  www.google.com/contacts   and then before you do anything else save it to the Favourites section in your browser - and then you know you can get to Contacts using your regular internet button and choosing it from your favourites.

In the Windows desktop

Right click on your desktop

1. Choose New
2. Choose Shortcut
3. In the screen that asks what you want the shortcut to, enter  www.google.com/contacts
4. Click Next
5. Enter the Name you want the link to have, eg "Google Contacts", and click Finish

The shortcut that is added to your desktop has a standard internet picture.   To change it to another

1. Download this file to your computer, and save it somewhere.
2. Right click on the shortcut that was created, and choose Properties.
3. Choose Change Icon
4. Choose the file that you saved in step 1

Note:   these instructions were prepared using Windows 8 - they may vary slightly for earlier versions.   But the same general approach applies.

 

---

Related Articles:

Copyright, blogs and bloggers

How to add a gadget to your blog