Our blog is looking pretty good now, but how about adding some fun links. This is where Blogger gadgets and widgets come into play.
It is pretty easy to set up gadgets. Some of them are easier to make than others. I thought I would show you how I have made each and every one of my gadgets on my blog.
You can add widgets and gadgets under the Layout and Page Elements tabs. All you have to do is choose whether you want the gadget on the right or left side of your blog, click Add a Gadget, and choose which gadget you want to add.
My blog has quite a few gadgets on it, so it’s best if I do this in separate sections. We’ll start with the right side of the blog.
1. Configure Text: My Bible verse has been added using the Configure Text gadget. It is very simple to use just add a title, some text, and click save. Super Simple!
2. Configure HTML/JavaScript: This is the most complicated of all the gadgets. Once you master this gadget, you can pretty much post anything on your sidebars.
I’ve used this gadget to post my Christmas in July button. To post a button to your blog you will need to upload your button picture to photo hosting site. I use Photobucket. Do not use Flickr! They do not allow it and will close your account if you are caught hosting pictures & buttons. (We’ll go over hosting pictures more in detail next week when we make a header and background). Once you upload the picture and get the url code, you are ready to post the picture.
If you just want to post your picture, you will just need to add the web address of your picture. I like to attach a blog post or website to my pictures. So, you’ll need the web address of whatever link you want to appear when someone clicks on the button. This is the code you’ll need to enter:
Want to add the text box under your button? Click here for a tutorial.
3. Configure HTML/JavaScript: This one’s for all the Etsy sellers out there. If you want to add a link to your Etsy items and pictures follow this tutorial. You’ll place the code in this gadget when it is complete.
4. Configure HTML/JavaScript: See what I mean about this gadget? I use it all the time! My Works in Progress bars are done very similar to my button (#2). I only need to list my picture URL, not a link to a project, though you could do that too. I also type the name of the project before listing the picture URL. You can find the progress bars here. You’ll need to add them to a picture hosting site too.
5. Configure HTML/JavaScript: Another button.
6. Configure HTML/JavaScript: I’ve configured my Blogroll by using HTML, because I wanted to make it colored and centered. There are two easier ways to list a blogroll, by using the Blog List or Link List gadgets.
7. Configure HTML/JavaScript: More buttons
8. Configure Followers List: This gadget lets people follow your blog. I really like it!
9. Configure HTML/JavaScript: More buttons.
Now, onto the left sidebar.
1. Edit Profile: Use this gadget to include your Blogger profile on your blog.
2. Configure HTML/JavaScript: I used the code from the right sidebar #2 gadget without the picture code. I just added each tutorial’s web address before every tutorial’s name.
3. Configure HTML/JavaScript: If you have a Flickr account you can showcase your photos using their Flickr badge. You can choose to set up a badge, here, and then post the code in this gadget.
4. Configure Labels: I’ve included labels to make it easier for others (and ME) to find previous posts.
5. Configure HTML/JavaScript: Another Etsy code.
6. Configure Search Box: This is a new gadget, at least for me. I like it because you can search on your blog or web. I think it’s cool and very helpful.
7. Configure Blog Archive: Another way to find previous posts. You can set up your archives monthly, weekly, or daily. I’ve got mine set up monthly.
8. Configure HTML/JavaScript: I’ve always got to have music on my blog, somewhere. This music playlist was made using MixPod. I like it because you can choose your music players. Many fit on your sidebar just fine. The one I picked for my Michael Jackson Tribute was a little larger than I usually use, but I wanted to be able to see all of the names of the songs. Just copy and paste the code into this gadget.
9. Configure HTML/JavaScript: Another button.
10. Configure HTML/JavaScript: You can use the Configure Text gadget to add your text, but I chose to use this gadget instead since I wanted to add a colored divider to my copyright info.
I hope these last four Blogger lessons have helped to get you on your way to designing your blog. Check back next week when we finally begin to tackle designing our header and choosing a background.
If you need some help with pictures and images, check out this post. I’ve included plenty of great links for you.
To all of us in the USA, have a very happy and safe 4th of July. And to everyone, have a great weekend!
Thank you for these terrific tutes. Although we had a wonderful friend set up our blog, it's nice to know where to go to learn another step so that I can do it myself and not ask for help. We'll see about that!
My kitty, Gretel, and I love your blog and are rethinking what to do with all her long hair…..
Carol
Thank you for these terrific tutes. Although we had a wonderful friend set up our blog, it's nice to know where to go to learn another step so that I can do it myself and not ask for help. We'll see about that!
My kitty, Gretel, and I love your blog and are rethinking what to do with all her long hair…..
Carol