Add a Simple Drop Down Menu to Blogger

In today's Blogger tutorial I show you how to add a simple drop down menu widget sometimes called a select box to the sidebar of your Blogger blog (Blogspot blog). If you want to add lots of links to your Blogger blog but are worried about the amount of space this will take up on your blog this tutorial is for you. A drop down widget is a neat solution to the cluttered sidebar problem as it is both space saving and easy to install. The convenience of a drop down menu widget can be seen on many blogs where it is used for lists like a long Blogroll, Categories list, Labels list or a Recommended Posts list.

How to Add a Drop Down Menu Widget to Blogger
Adding a drop down menu to Blogger is well within the capabilities of even beginner bloggers. Most of the work is in cutting and pasting the links which is not difficult for anyone with basic computer skills. So let's get started but first here is a working drop down menu list with links to various posts in my blog:

- Blog Know How Tutorials -Twitter Badge or ButtonTwitter Retweet ButtonTwitter Updates Widget

1. Log in to Blogger if not already logged in
   
2. Navigate from the Dashboard to Layout > Page Elements.
   
3. Click on Add a Gadget in the sidebar or other location if you wish
   
4. Select a HTML/JavaScript gadget from the list of gadgets
   
5. Paste the following code into the content box of the widget:
   

   <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
   size=1 name=menu>
   <option>- Your Menu Title -</option>
   
   <!-- Change the following links to your own -->
   
   <option value="http://URL of link1">Link 1</option>
   <option value="http://URL of link2">Link 2</option>
   <option value="http://URL of link3">Link 3</option>
   <option value="http://URL of link4">Link 4</option>
   <option value="http://URL of link5">Link 5</option>
   
   <option value="http://blogknowhow.blogspot.com">Blog Know How</option>
   </select></form>

   
   
6. Replace _blank as follows:
   
   • To have a new window open leave the same
     
   • To have the new page appear in the same window replace _self
   
   
7. Replace - Your Menu Title - with a title of your own
   
8. For each instance of the option values highlighted in red substitute your own links and link names. For example:
   
   <option value="http://blogknowhow.blogspot.com">Blog Know How</option>
   
9. Click Save
   
10. Use drag and drop to position the drop down menu widget in the location you want it within your sidebar and save any changes
    
11. Click View Blog to admire the new drop down menu in the sidebar of your blog

In today's Blogger tutorial I have provided you with instructions to create and insert a simple drop down menu widget in the sidebar of your Blogger blog (Blogspot blog). This widget is ideal for reducing clutter on your Blogger sidebar and excellent for displaying long lists of links such as labels in a convenient, neat and space saving way. A drop down menu gadget is easily installed from the Layout > Page Elements page and can be customized to your own specifications. Any problems with this Blogger tweak please let me know. Enjoy!

Add a Twitter Profile Widget to Blogger

If you use Twitter then you are going to want to let your Blogger readers know about it. One effective way to show your Twitter updates on Blogger is to add a Twitter profile widget to the sidebar of your blog. This widget is quite a bit more fancy than the current Twitter Updates Widget available through Blogger which I showed you how to insert into your blog in my recent article Add a Twitter Updates Widget to Blogger. On the minus side the widget may slow your blog down so test it out first if fast loading time is crucial to you.


How to Insert a Twitter Profile Widget into Blogger

1. Go to Twitter Widgets and sign in
   
   
2. Choose Profile Widget and you will be taken to a default profile widget page where you can customize your Twitter widget according to your needs.
3. Choose Settings and make sure that your username is correct
4. Choose Appearance and make any custom color changes you need to so that the widget will blend into your blog. At the very least you will need to change the shell background and the links colors to suit your blog
5. Choose Dimensions and change the sizing of the widget if it is too large to fit into your Blogger sidebar. The default setting is 250x300
6. Click on Test Your Settings to ensure your new widget looks the way you want it to
7. Click the Finish and Grab Code button
8. Copy the code by right click the mouse in the code box and choosing Select All. Right click again and choose Copy
9. Sign in to Blogger. From the Dashboard go to Layout | Page Elements
10. In the sidebar choose Add a Gadget and then a HTML/Javascriptwidget
11. Paste the Twitter code into the gadget content box and click Save
12. Your Twitter Profile Widget will now be showing in your Blogger sidebar so click on View Blog to admire it

In this Blogger tutorial I have showed you how to add a Twitter Profile Widget to the sidebar of your Blogger blog (Blogspot blog). This Twitter widget will encourage your blog readers to visit your Twitter Profile and with luck you may get some new Twitter followers out of it.

How to Add a Flickr Slideshow Gadget to Blogger

In today's Blogger tutorial I am going to show you how to add a Flickr Slideshow (Flickr Photostream) to a Blogger blog (Blogspot blog). This Blogger tutorial is suited to beginners and newbies to Blogger and contains step by step instructions to create your Flickr slideshow.

This Blogger slideshow tutorial covers the steps to insert a slideshow widget (slideshow gadget) in the sidebar or footer of Blogger and display a set of images uploaded to Flickr. Note the maximum number of images displayed in the slideshow is 20.

There are several different methods to add a Flickr slideshow to Blogger. Which method you use is largely dependent on your own individual requirements. I cover two different methods in the tutorial.

Method 1 - Add a Flickr Slideshow Gadget to Blogger - Photos in photostream are not organized into sets

Method 2 - Add a Flickr Slideshow Gadget to Blogger to display images that are organized in a set


Method 1 - Add a Flickr Photostream to Slideshow Gadget in Blogger

If you will only ever add one slideshow to Blogger from Flickr and don't want to bother with sets use this method to quickly and easily add your Flickr slideshow to Blogger:

1. Go to Flickr and find your Photostream link. On your home page when logged into Flickr you will see Your Photostream at the top left under the Flickr salutation
   
   
2. Click on the Your Photostream link and copy the photostream id from your browser address bar.

   http://www.flickr.com/photos/27647187@N07/

   It will look something like this. Copy the identifier eg 27647187@N07
3. In Blogger go to Design > Page Elements
4. Select Add Gadget from the sidebar or footer depending on where you want to place your Flickr slideshow
5. Choose Slideshow from widgets in the Basics list
6. Choose a title for your slideshow or leave blank
   
   
7. Under Source use the drop down menu to select Flickr
8. Under Option select User
9. Under Username enter you Flickr Photostream id eg 27647187@N07.
   
   Note:If you have entered your Flickr Photostream id correctly you will be able to see a preview of your slideshow.
10. Click on Save and then View Blog to see your new Flickr slideshow in action on your Blogger blog
    
    

Method 2 - Add a Flickr Photostream Set to a Slideshow Gadget in Blogger

If you use sets in Flickr to organize your photos and images you will need to use a slightly different method to install a Flickr slideshow into Blogger.

1. Log on to Flickr
2. Upload your photos and create sets to organize your photos if desired
3. Go to view your sets in Flickr and select the set you wish to use for your Blogger slideshow
4. In your browser window you will see a URL address similar to the following:

   http://www.flickr.com/photos/27647187@N07/sets/72157624508265319/

   
   
5. There are two important parts to this address that you need to note because we will be using these to create our slideshow:
   • Your photostream - designated by something similar to 27647187@N07
   • The id of the set - designated by something similar to 72157624508265319
   
   
   
6. In a different browser window log on to Blogger if not already logged in
7. Go to Design > Page Elements
8. Select Add Gadget from the sidebar or footer depending on where you want to place your Flickr slideshow
9. Choose Slideshow from the list of Basics Widgets
10. Click on the blue plus sign to the right of the Slideshow gadget to activate and configure your Blogger Flickr Slideshow
11. Choose a title for your slideshow or leave blank
12. Under Source use the drop down menu to select Other (Note do not select Flickr if you are using a set as this will not work - see Method 1)
13. In the Feed URL section enter the following feed:

    http://api.flickr.com/services/feeds/photoset.gne?set=72157624508265319&nsid=27647187@N07&lang=en-us&format=rss_200

    
    
14. Substitute your photostream id (this will unique to your Flickr account)
15. Substitute the id of the set of images you wish to display
    
    
16. Leave the speed of the slideshow at medium unless you specifically need it to be faster or slower
17. Click on Save
18. Click on the View Blog link to admire your new Flickr slideshow

In today's Blogger tutorial you have learned two different methods to add a Flickr slideshow to Blogger. Both methods use the Blogger Slideshow Gadget but the difference between them is that method 2 shows you how to use a selected part of your Flickr photostream to create a Blogger slideshow for your blog instead of your whole Flickr photostream. Hope you have lots of fun with this Blogger slideshow gadget. Enjoy!

How to Add Missing Quick Edit Wrench to Blogger

In this Blogger tutorial (Blogspot tutorial) I show you how to add a quick edit wrench to Blogger if it is missing from a Blogger gadget. Check here to find a solution for a missing quick edit pencil not showing in Blogger

The quick edit feature allows you to edit a Blogger gadget directly from the blog itself rather than having to go through the Design > Page Elements screens and then finding the actual widget itself before you can edit it.

Heaps of times I have downloaded custom Blogger templates only to find that there are lots of omissions compared to a default Blogger template. If you are using a custom Blogger template with the quick edit feature missing here is a step by step guide to insert the missing quick edit feature into your Blogger template

The quick edit can be missing from anywhere in your Blogger template. I have chosen to use the sidebar for this tutorial but the solution works wherever the quick edit feature has been removed or never inserted in the first place.

Tutorial Difficulty rating: Easy
Time: Less than 5 minutes
Suitable for all levels of Blogger expertise

How to Add the Quick Edit Wrench to a Blogger Gadget

1. Login to Blogger
2. Go to Design > Edit HTML
3. Check the Expand Widget Templates box
4. Using CTRL + F buttons together bring up the search box
5. Enter the following search term

   </b:includable>

   
   
6. Scroll through your Blogger template. You will see that every instance of </b:includable> is highlighted in yellow.
7. Once you come to the sidebar widgets which is the most likely place for the quick edit to be missing from look for something like the following (this will vary from template to template). This is the start of the first sidebar if you had a template with a two column sidebar
   
   <b:section class='sidebar' id='sidebar1' preferred='yes'>
8. Now look at the picture below. You can see that this is the code for a Javascript/HTML widget as shown in red
   
   
9. Just identify the widget that has the missing quick edit feature and add the following line of code immediately before the </b:includable>

   <b:include name='quickedit'/>

   
   
   
10. Use the Preview button to check your changes before committing to them
11. Don't forget to click on Save Template

In this Blogger tutorial (Blogspot tutorial) you have learned how to fix a missing quick edit button often missing from custom Blogger templates. No matter where the quick edit button has been omitted (sidebar, footer, header etc) it can be added in to a Blogger template very easily so that a Blogger gadget can be edited without having to go through the Blogger design screen.