Blogging 101 ~ Lesson #6: Design Page Layout & Adding Gadgets to Blogger

Now that you have your blog makeover done it is time to become familiar with adding and moving gadgets on your page.  Blogger offers many widgets that are easily added to your header, sidebar or footer.  Moving them, as well as removing them, is extremely easy.  For this lesson we need to go to our design page—you can find it thru
the Navbar or your Blogger Dashboard.


10 Minutes:  Become Familiar with Design Page Layout

You should see a gadget for your header and directly below that, if you published a page and had the pages gadget added in the header, you should see the pages gadget.  Below that are your blog posts box and your side bars which should contain a couple of default gadgets if you haven’t removed them all.  You should also see “Add a Gadget” links in the sidebars as well as in the footer below.  At the very bottom you will see “Attribution” which is the blogger template designer and "Powered by Blogger" link.

First I would like to point out that you can edit your header.  To the right of the header gadget you will see an edit link.  Click on this and a pop-up window will appear that gives you the option to change the blog title as well as the description.  You can also upload a banner you have made in place of the default title and description or behind it--see these examples of Blogger blogs with banners added:  The Aldi Spot, The Q-Tipping Mom, Saving A Bundle, Frugality is Free, Simply CVS.  So if you would like a photo behind your title here is where you would do it. If you are uploading a banner with the title in it, make sure you choose “instead of title and description” and also click “Shrink to fit” for either. (If you choose to do this now your time spent on this lesson will be increased, of course.)

I explained in the last 5 minutes of 101 lesson #3 that you can click on the edit link in the Blog Posts box to edit what appears below your blog posts.  Now that you have a post up you may want to look over the options again and see what you would like to have show.  If in the future you want to edit them this is the place to do it.

If there are still gadgets in the side columns you can edit them from here.  Click on the edit button of one and a pop up window will come up with the gadget information, you can edit or remove them thru this window.  You can also edit any gadget, except the “header” and the “blog posts” options, by clicking on the little tool icons beside each.

Notice that there are different sizes of add a gadget boxes.  This allows you to display different sizes of banners, pictures or lengths of text.  If you have two sidebars side by side you will notice a wide gadget at the top, you can also add a wide gadget in that box and drag it to bottom of the two sidebars even though there is not a gadget box showing there.

Another feature of the Design page is the ability to move the gadgets from one place to another.  Practice dragging one of the gadgets to several different spots on the page to become familiar with the program.  You can click on preview on the top right to see what they look like in the new positions.  If you move one and want it to remain in that position, click "Save" at the top right.

 

Notice that there is not always a little box with the add a gadget link in it where to which a gadget can be moved.  Try dragging one of your gadgets to the top of your blog posts—pull it over into the blog posts box and drag up above it and it will stay.  You can also drag one below the posts box and below the pages gadget found below the header. 

10 Minutes:  Become Familiar with Gadgets and How to Add Them to Your  Blog

When an “add a gadget” link does not appear in the area of the blog where you want to put a gadget, you need to choose one closest to that spot and add it there and then drag it to the spot you want it to appear.  Once you drag it you can click preview on the top right and see if it is where you want it and click save when you are satisfied.

Now let’s look over the many gadgets Blogger offers and how to add them to your blog.  Choose any one of the “Add a Gadget” boxes and click on the link.  A pop-up window will appear with the Basics gadgets offered showing.  To add one, just click on the  +. and the details of adding that gadget will appear with the options available to you.  Choose the settings you desire and click “save.”  You can also choose to “cancel” it or to go “back” to the list of gadgets.  Remember, if you “save” it you need to then drag it to the place on the page you want it to show and click save in the top right hand corner of the Design Page.

I’ll make a few comments on some of the basic gadgets.

     ·   Popular Posts—just what it says, a list of the most visited posts on your blog.  You can choose to       
             show from one to ten.

 ·   Blog’s Stats—You can choose to show the number of page views from seven days, thirty days or the blogs complete history of pageviews.

·       Pages—This should show already added if you added it when you posted your page in 101:  Lesson #2.  You can choose to have the pages listed under the header or in the side bar.  You can also choose which pages you want to include and in what order.

·      AdSense—This is Google’s ad revenue sharing program that we will be addressing later.

·     HTML/JavaScript—is the gadget you will use to add buttons from other bloggers or ads.  You can also add anything you can create thru HTML code that will fit in the space. 

o   If you want to center the gadget put <center> at the beginning of the HTML code and </center> at the end and it will appear centered.

o   Sarah, at Sarah’s Scribblings, has a fun gadget she added that shows the countries visitors come from complete with flags.  You can see it on her homepage and if you are interested in it you can click on it and it will take you to the website to get your own code.

·    Picture—You can add pictures from your computer or the internet.  You can also had a title and/or caption for each.

·    Blog List—This is actually an RSS feed of current posts of your favorite blogs or blogs you want to follow or want to share with your readers. As they post the most recent post title will show with the newest appearing on top.  

·       Link List—This is useful for many different applications.  I use it at Simply CVS for adding links to different categories on my blog for navigational purposes.  You can see it in use in the top of the right sidebar at Simply CVS.  It is easy to update and change if I want or need to.

·   Labels—These are the tags you put on your posts at the bottom in the “labels” window.  You can choose to show all or just some of them.  You can see an example of showing just some of them in different lists at Nurturing Cuisine in the right side bar.  By dividing them under different titles you can organize your labels for your readers’ ease in navigating your site.  You can choose to show the number of posts or not in each category.

You can also click thru and view those under the “Featured, Most Popular and More Gadgets” links in the top left side.  They are almost limitless.  There is even an “Add your own” gadget link by adding the URL of a gadget.

The more gadgets you add that require time to load, especially those drawing from another website, the slower your blog will load for readers.  So be sure the gadget is worth its weight in load time on your blog.  One day my blog was taking almost two minutes to load and I found it was an affiliate ad that was slowing it down and so I removed it and just don’t use them any longer.  The blog loaded just fine then.

10 Minutes:  Choose Some Gadgets and Add Them

These last 10 minutes can be spent choosing some gadgets to add to your blog, trying out other ones and moving them around to different spots on your blog.  These gadgets will become a big part of your blogging world so become familiar with their use.