Showing posts with label Gadgets for Blogger. Show all posts
Showing posts with label Gadgets for Blogger. Show all posts

Tuesday, 12 August 2014

Add a Categories Section to a Blogger Blog (Blogspot Blog)







Blogspot blogs at Blogger.com have no categories only labels. This Blogger tutorial will show you how to manually create categories in Blogger from your existing labels so that all the articles listed under a particular label will be displayed.

While this way to add categories to Blogger is not an ideal solution it will mean that you can display a logical grouping of your most popular articles under the one heading.

This article is aimed at new bloggers and beginner bloggers although it is suitable for all Blogger bloggers (Blogspot bloggers). No changes to the template are required to add these categories to your Blogger blog (Blogspot blog).

How to Create Categories from Labels in Blogger
One easy way to create a categories section in Blogger is to simply rename the title of the labels widget as categories. This solution does not work for me because on this blog I have a huge number of labels and I don't want to show this widget at the top of my sidebar.

An easy way round this problem is create a separate categories section. If you look at the sidebar of this blog you will notice that I have several major categories at the top so that a new visitor will find what they are looking for quickly under these broad headings.

Example of Categories Section from Blog Know How sidebar
To add a categories section to a Blogger blog (Blogspot blog) follow these simple steps:

1. Decide how you want to group your articles according to the labels applied and what group heading you want to give to each grouping of articles.

2. For the first category navigate to the individual page of the label you wish to use by clicking on the label in your sidebar. Copy the URL address of this page from the address bar in your browser (right click and select copy). For example the URL address of the label of Blogger Tutorials on this site is:
http://blogknowhow.blogspot.com/search/label/Blogger%20Tutorials

3. From the Blogger Dashboard go to Design > Page Elements

4. Click Add a Gadget in the sidebar and select Links List

5. In the Configure Link List dialog box that appears paste the link to your label into the New Site URL box

blogger Configure Link List to Add New Categories Section to Your Blogger Blog

6. Enter the name of your label or some alternative text if you wish into the New Site Name text box. 

7. Enter Categories as the title

8. Choose between sort alphabetically, reverse alphabetically or don't sort

9. Click on Add Link to add the link to your new categories list

10. Click on Save

11. For every label you wish to put into the Categories Section copy the link and add it to the Configure Links List. By the end you will end up with two or more categories in your list

12. Use the up and down arrows for each link to shuffle them around until you find the desired order

Blogger Configure Link List - Added Links to Create Categories in Blogger

Limit the Number of Posts Displayed in the Categories Section
To put a limitation on the number of posts displayed in the new categories section you will need to adjust the URL's of each label as follows:

From:
http://yoursite.blogspot.com/search/label/CategoryName

To:
http://yoursite.blogspot.com/search/label/CategoryName?max-results=max number of posts to display

So for the category Blogger Tutorials on this site for example I would enter the following to have only 25 posts displayed:
http://blogknowhow.blogspot.com/search/label/blogger%20Tutorials?max-results=25

This Blogger tutorial has shown you how to manually add a categories section to the sidebar of your Blogger Blog (Blogspot blog) using the Link List widget.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add CSS Styling to Blockquotes in Blogger
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template

Solution to Missing Add a Gadget Feature in Blogger






If you are experiencing problems with the Add a Gadget feature not showing up in the Layout Screen of your Blogger Blogspot blog then read on as I have found the solution to this annoying problem.

The other day I discovered to my horror I had lost the option to Add a Gadget in the layout screen of all my blogs in Blogger. Typically it couldn't have happened at a worse time as I had just planned to sit down to write some new posts. I looked in the Blogger help section for the solution but could find no reference to the problem. I eventually found the answer, after about 15 minutes, buried in the Blogger Help Group section. I thought I would therefore post a short tip for anyone out there looking for a quick answer to the loss of the Add a Gadget function from the Layout Screen. 

Clear Your Browser's Cache 
When the Add a Gadget feature is missing from you Layout screenand you have tried refreshing it probably means you need to clear the cache of your browser. In Internet Explorer 6 you would go to theTools menu and choose Internet Options from the drop down menu. In the dialog box that appears select the General tab and then click on the Delete Files from the Temporary Internet Files Section (middle). Once done close the dialog box and refresh the Layout Screen in Blogger. With any luck you will now be able to see the Add a Gadget option once again. For other browsers follow the directions in the browser's help section on clearing the cache or check out Bloggers Help Article about clearing cache

Thanks to the Blog Doctor for this solution. You really saved the day! 

A short tip on how to fix the problem of add a gadget missing from the layout screen in Blogger.

Add Feedjit Live Traffic Feed to Blogger




Would you like to know more about the traffic visiting your Blogger blog (Blogspot Blog)? Feedjit is a free tracking tool that tracks visitors to a blog in real time and identifies what pages are visited. In this Blogger tutorial you will learn how to add a Feedjit widget to your blog which will track where visitors originate from and what pages they viewed. Adding a Feedjit widget to your Blogger blog is easy and takes less than 5 minutes. This tutorial is suitable for all Blogger bloggers (Blogspot beginners). Updated 10 October 2009.

Feedjit monitors traffic to your site and ranks it based on popularity and relevance against the traffic received by other Feedjit users in your local area. There is a choice of 4 different widgets: Live Traffic Feed, Live Traffic Map, Recommended Reading, and Page Popularity. Each of these widgets has different functions.

Feedjit Live Traffic Feed Widget for Blogger
Places a widget on your Blogger blog of the last 10 visitors. By clicking on the real time link you can actually view the last 50 or so visitors along with the keyword search phrase used to find your site. The Feedjit's Live Traffic Feed shows statistics in real-time about:
The city and country your visitors are in

The website they arrived from, if any

The page they visited on your website

Which external link they clicked to leave your site, if any

Feedjit Traffic Map
The Traffic Map widget places visitors to your site on a world map according to their physical location

Feedjit Recommended Reading
The Recommended Reading widget makes suggestions to visitors about what other blog posts they might be interested in based on general page popularity

Feedjit Page Popularity 
The Page Popularity widget lists the 10 most popular pages that have been accessed by visitors on that day.


How to Add a Feedjit Live Traffic Feed Widget (Gadget) to Blogger
  1. Visit Feedjit
  2. Select Live Traffic Feed.
  3. Click on the Customize It link under Live Traffic Feed. This will allow you to enter colors to match the theme of your blog. If you are in doubt I have found that the easiest method to get the custom colors of a site is to go to the Layout > Page Elements screen in Blogger and click on Add a Gadget and then Adsense. From the configuration screen that pops up you can get the colors of the background, border, title (heading in Feedjit), URL, text. If you use these same colors in your Feedjit widget it will blend in with the rest of your site. You can preview your widget to make sure it looks as you would like it before adding it to your blog.
  4. To automatically add the widget to Blogger select the Click to Add to Blogger Link and follow the instructions. Or to manually add it which I myself prefer right click the code in the box under the heading Live Traffic Feed and select copy.
  5. Navigate to Layout > Page Elements in your blog if that page is not already open
  6. Select Add a Gadget in the Sidebar and then HTML/Javascript
  7. Paste the code by placing the mouse in the box and right clicking and selecting paste
  8. Save the widget and then using the drag and drop feature of Blogger move it to your desired location. Note HTML/Javascript widgets are best placed after your other widgets for faster loading.
  9. Save Template
  10. Click on View Blog to view your newly created Feedjit widget
  11. Click on Options in the Feedjit widget and then Ignore My Browser otherwise the widget will record your visit each time you view your blog. The option on the widget will now change to Stop Ignoring Me which you can reverse by clicking on the link again.If you use more than one browser you will need to tell Feedjit to ignore you for each browser.

This Blogger tutorial has discussed how to add a Feedjit Live Traffic Feed widget, gadget or button to Blogger to track where visitors are being directed from and what posts they are most interested in. A Feedjit Live Traffic Feed will help you learn about the visitors to your blog and what search phrase they used to arrive. To add a Feedjit Live Traffic Feed widget to Blogger is simple and takes less than 5 minutes to install.

Related Articles
Add Google Analytics to Your Blogger Blog
Track Visitors to Your Blogger Blog
List of Blog Know How Tutorials for Blogger Blogs
Guide to Blogger Frequently Asked Questions

Add Paypal Donate Button to Blogger






If you want to make a few bucks from all the hard work you are putting into your Blogger blog then consider adding a Paypal donate button to your Blogger blog (Blogspot blog).

Paypal Donate ButtonAdding a donation button will encourage all those happy readers to say a big thank you for helping them out. Not everyone will donate but you will get the odd generous soul who will willingly donate some chump change to shout you a coffee.

In this Blogger tutorial we will be adding a gadget to the Blogger sidebar or alternatively you could place it in the foooter of your Blogger template. We will be using a widget to contain our Paypal Donate Button and will not be changing your Blogger template. If you wish to place the donate button into your Blogger posts see the end of this Blogger tutorial for details.

Skill level is rated easy.

How to Add a Paypal Donate Button to Blogger (Sidebar or Footer Gadget)
Note: Updated on January 20 2012 to take account of new Paypal interface

1. Get yourself a Paypal account if you don't already have one

2. Login to your Paypal account

3. Click on the Merchant Services tab

Select Paypal Merchant Services Tab
4. Choose Donations from the list of key features displayed in the right sidebar of the PayPal Website Payments Standard Option (first of 3 payment solutions)
Note Paypal have changed its interface. You now need to select PayPal Website Payments Standard from Merchant Services drop down and then under the buttons in option 1 you will see in pretty tiny writing I must say "There are also buttons for donations and gift certificates." Click on donations.

Select Donations link in Paypal from Paypal Website Payments Standard Options 1 to add a donations button to Blogger Blogspot blog

5. From the Paypal Create a Donation Button screen choose Create Your Button Now link (one of two).



6. Stick with the default button unless you wish to customize it

7. Choose your currency depending on your needs and location

8. Choose Donors enter their own contribution amount radio button unless you want to have a set amount

Paypal Create Button Steps
9. Ensure the Secure Merchant ID radio button is selected. This will prevent spammers getting hold of your email address

10. At Step 2 it is worth saving your button

11. At Step 3 Customize your checkout page by allowing donors to write a short comment by selecting the Yes radio button to special instructions to seller

12. Select the No radio button for Customer's Shipping Address

13. Select the Create Button button

14. Once Paypal creates the donate button code copy it by right clicking your mouse and choosing copy

15. Logout of Paypal

16. Login to Blogger if you are not already logged in

17. Go to Design > Page Elements

18. Click on the Add a Gadget link in the sidebar

19. Choose HTML/Javascript widget from the list provided

20. Paste the button code into the Content box of the dialog box that appears by placing the mouse inside the box and right clicking the mouse and then paste

21. Select a title like "Shout Me a Coffee Today!" or whatever you would like

22. Click on the Save button

23. Drag and drop your new donation gadget into the spot you want it to appear in

24. Click the Save button to ensure your changes are saved

25. Click View Blog to see your new donate button in the sidebar of your Blogger blog

26. Click on your new donate button and you will be taken to the Paypal Checkout screen

Paypal Checkout screen

Tips and Troubleshooting
  1. To Add a Paypal Donate Button to Blogger Posts
    The following instructions will add a Paypal Donate button to all new Blogger posts. Note previous posts will not be changed. You will need to hard code the button into your Blogger template to have the Paypal Donate button added to every Blogger post. (Please ask if you need help with this)
    1. Follow the directions (steps 1-16) as above to get your Paypal button code
    2. In Blogger go to Settings > Formatting
    3. Paste the Paypal Donate Button code into the Post Template box
    4. Save changes 
    5. Click on New Post to see that the code will be automatically inserted at the foot of each new post. (you will need to be in Edit Html mode to see the code)

  2. To Add a Paypal Donate Button to Individual Blogger Posts
    1. Follow the directions (steps 1-16) as above to get your Paypal button code
    2. In Blogger go to the post you wish to insert the button code into
    3. Insert the button code taking care to change all instances of double quotes to single quotes
    4. Save post and publish as normal. (If you have trouble with the preview post button in the old editor in Blogger click on compose and then edit html)


This Blogger tutorial has walked you through the steps needed to add a Paypal donate button to your Blogger blog (Blogspot blog) including how to configure your Paypal button at Paypal. I have covered adding the button as a sidebar gadget or footer gadget or alternatively added to Blogger posts. Have fun!





Related Posts
List of Blog Know How Tutorials for Blogger Blogs
Tips for Adding Google Adsense to Blogger
Better Placement of Google Adsense in Blogger
Add Google Adsense to a Blogger Header
Bloggers Guide to Google Adsense Myths
Add Google Adsense or Banner Above Blogger Header
Blogger Guide to Better Google Adsense Placement
Make Money with Adsense Keywords and Blogger
Make Money By Adding Banner Ads to Your Blogger Blog
5 Easy Ways to Make Money from Blogger
Add Chitika Ads to Blogger Blogspot
Make Money Add an Amazon Widget to Blogger
Add Amazon Product Links to Blogger Posts

Add Outbrain Ratings Widget to Blogger






Outbrain provides a free and very stylish content recommendations and ratings widget which can be easily added to your Blogger Blogspot blog. In this tutorial I will discuss the benefits of Outbrain and also provide a step by step walkthrough of the process of adding an Outbrain widget to your Blogger blog and your Feedburner FeedFlare if you have burned your blog feed at Feedburner.
Outbrain Home Page
Benefits of Adding Outbrain to Your Blogger Blog
By adding an Outbrain content and ratings widget to your Blogger blog you will encourage visitors to record their reactions to a post they have just read. Along with features likes polls this is another good method of encouraging visitors to interact with your blog. Outbrain also makes it possible to display your most popular posts within the widget. In addition the Outbrain ratings widget may help drive more traffic to your blog when your visitors use the Recommended Posts feature which is embedded in the widget. By the same token it may also mean that the traffic doesn't stay long as visitors will be wooed away by recommended links so you will have to weigh up the benefits versus the costs for yourself. Outbrain also provides reports on widget activity

How to Add an Outbrain Ratings Widget to Blogger
1. Register at Outbrain. This is a simple sign up process that requires you to click on a confirmation email once you have requested sign up and filled out a simple form.

2. Once registered click on Get the Widget from the footer menu

3. Choose Blogger as your Blogging platform

4. Select the language of your widget if other than English which is the default

5. Click on Get the Widget button and Outbrain will automatically refer you to Blogger in a new window. Sign in to Blogger in the new browser window. Don't close the Outbrain window as we will be returning here. 

Outbrain Get Widget page
6. Choose your blog from the drop down menu and click on the Add Widget button.

Add Outbrain Widget to Blogger
7. Navigate to Layout > Page Elements and reposition if necessary your new widget which will now be appearing in the sidebar of your blog. Save any changes you make.

8. Return to Outbrain in your open browser window and click on theclick here link to verify your blog. You will receive a message verifying that you have claimed your blog

9. Click on the View Blog link in the menu tab section and view your new Outbrain widget in action.

Outbrain Ratings Widget as it appears at the bottom of a Blogger post

Note that once your readers start to rate your posts by clicking on them the stars will become yellow. 5 yellow stars is an excellent rating


Customizing Your Outbrain Ratings Widget
1. Return to the Outbrain window in your browser

2. Navigate to Manage Posts using the Sidebar Menu on the lefthand side

3. In the list of blogs you will see your blog listed. Click on thesettings link
Outbrain Manage Blogs Screen
4. If you leave the default setting you will see recommended links appearing as pictured above in #9. If you don't want any recommendations you can set this to no.

5. If you have set up your blog with the idea of earning a little extra money you may choose to turn off sponsored recommendations. If you leave the radio button set to yes any proceeds from the sponsored links clicked on will go to charity. The charity sponsored can be selected via the drop down menu

6. Outbrain will show the most popular posts in the sidebar of your blog if this feature is enabled. To enable popular posts select theenable radio button.

7. Click on the Submit button


Adding Outbrain to Your Feedburner FeedFlare
If you already have a FeedFlare appearing at the footer of your burned Feedburner feed of your blog you can easily add Outbrain too. Check out my article on adding a Feedburner FeedFlare to Blogger if you are not sure what a FeedFlare is or how to add one to Blogger.

Go to Feedburner and choose your blog from the list of My Feeds. Select the Optimize tab and then FeedFlare from the lefthand sidebar menu. In the Personal FeedFlare section paste the following code (URL) into the text box:
http://widgets.outbrain.com/FeedFlareUnit.xml

and click on the Add New Flare button. Click on Save. Your readers will now be able to rate your blog straight from your Blogger feed.

Outbrain Troubleshooting Tips for Blogger Installation
  • When you install Outbrain on your blog resist the temptation to rate one of your posts as this vote can't be deleted once it is cast. Even when I tried uninstalling and reinstalling the widget the vote did not clear.
  • The Popular Posts feature takes a while to show any posts as it needs at least 2 visits before it will start rating the post
  • If you have other problems with Outbrain try this activeOutbrain support forum for answers

In this tutorial you have learned how to install the Outbrain Ratings widget on your Blogger Blogspot blog and customize it. Also some of the benefits of the Outbrain widget were discussed along with a couple of Outbrain installation troubleshooting tips. If you have a moment let me know how you get on installing this widget. Don't forget to bookmark this post for easy reference.

Related Articles
Add a Feedburner FeedFlare to Blogger Feed

Add a Twitter Followers Counter to Blogger






In this tutorial you will learn how to place a Twitter Follower Counter on your Blogger Blogspot blog to display the number of followers you have on Twitter. A Twitter count button will encourage readers to follow you on Twitter much in the same way as putting a Feedburner subscriber counter on your blog will encourage new subscribers.

How To Place a Twitter Followers Counter on Blogger

1. Login to Blogger if not already logged in

2. Navigate to Layout > Page Elements

3. Click on the link to Add a Gadget to the sidebar or footer

4. Select HTML/Javascript from the list of gadgets

5. Paste the following script into the widget content box depending on the button your prefer:
Standard Button
<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=yourTwitterusername"></script>


Black Button
Twitter Followers Counter Black Button
<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=yourTwitterusername&style=black"></script>


Big Bird Button
<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=yourTwitterusername&style=bird"></script>


If you would like to view more Twitter Counter badges you will find them at http://twittercounter.com/pages/buttons/

6. Replace the username with your own Twitter username. For example my username is blogwizz so I would enter username=blogwizz. If you are not already a member of Twitter sign up is a breeze

7. Enter a title for the widget if you wish

8. Click Save

9. Move your new widget into position on your sidebar by using Blogger's drag and drop feature

10. Click the View Blog link to admire your new Twitter Followers Counter 


In this tutorial you have learned how to put a Twitter Followers Counter on your Blogger Blogspot blog so that you can display an accurate count of your Twitter followers. This will encourage other readers to begin following you on Twitter.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs