Add AddThis Welcome Bar to Blogger



AddThis welcome bar

Blogging isn't just about building traffic. it is also about maintaining it. But for that traffic to be of any use to you, you should a good conversion rate, whereby visitors to your site at least take some action such as following you on Twitter, subscribing for your newsletter, visiting your old posts, and so on. There are many ways to increase your conversion. Here's another one. Add a welcome bar at the top of your website, and include calls to actions, such as sharing your page or liking it. That way, people can have easy access to your pages and links. The bar is provided by AddThis, a large sharing platform, and we have been showing you various sharing options for your blog that they provide. Here, we will show you how to use, and customize this bar.
The welcome bar is as yet in its beta form, but it works with all major browsers except Internet Explorer 7 and below. You can add custom greetings with it and hence increase your conversion rate. You can invite people to visit a certain page on your website, or share your page on a social media, or to follow you on a certain social media. You can set customized greetings, so visitors from a particular website get a specific message.

How it works?

It works in a very simple way. You simply paste a piece of JavaScript and CSS code anywhere on a page you want the bar to show up on. Ideally, you should put it on your homepage, but you are free to add it anywhere you like. It works like this. When a visitor from Facebook lands on your page, he sees a response relevant to Facebook, such as "Like us on Facebook" of " Share this page on Facebook" etc. Similarly, Twitter users will see a Tweet button, and so on. These responses are totally customizable, and so are the websites users are coming from.

Adding the welcome bar

To add a welcome bar to your blog, visit the AddThis page, and log in, or create an account if you don't already have one. You can create one through Facebook if you like. You will then be taken to a dashboard-like page, where you can create a custom welcome bar for your blog.

Customize Messages

customize messages

In this region, you get the option to customize your messages. From the left sidebar, you can add a website, so that visitors from that site get a specific response. For example, if you wrote an article on EzineArticles, and people are coming from there to your site, then you can add a message that says something like "Thank you for reading our article and visiting us", or something similar. it's up-to you. The sky's the limit. Select each website, and you will see its options on the right.

On the right side, you can change the message text, and the button text. The button is what will contain the call to action, such as "Share us" or "Follow us". You can select from three button actions, Share, Follow, and Go to URL. Custom responses for Facebook, Twitter and Google are already there. All the changes that you make can be seen on the live preview on the right.

You can add another by clicking Add visitor type. It will then show you a pop up.

add visitor type

if you click on "Any other Visitor", you can customize messages for all people who have not landed via your listed websites.

Finalize appearance and add to your site

finalize appearance

Once your messages are done, you can move on to customizing the look of the bar. You can change the background and text colors, button color, and button text color. You can choose from a full set of Hex colors (16 Million colors).
Colors

Notice that you also have the option to auto-hide the bar after a set amount of time. Once you are done with the design, you can see the live preview in the Customize messages section. If you like it, you can simply copy the code generated, and paste it into your template.
  1. Go To Blogger > Template 
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. Paste the code just below
  5. Done!

We advise you to backup your page source code or template before pasting, so that you can revive changes if you accidentally overwrite a piece of code.

It's a simple enough process. If you want to further customize the bar, or if you want to know more, just take a look at the Welcome bar API. And if you have questions, feel free to ask them in the section below :0

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

37 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. I recently saw this welcome bar inviting me to share the post but I really didn't knew this is provided by addthis. Let's see what more we can do in advanced customization with that API.

    Thanks for the info :)
    --
    Top Blogging Ideas

    ReplyDelete
  2. Does it work with Blogger's Dynamic Views templates?

    ReplyDelete
  3. I am not using AddThis, but this feature is really awesome.

    ReplyDelete
  4. Good post brother. I am interested to using it in my blog.

    Visit: 5 Hostgator Web Hosting Account Giveaway .

    ReplyDelete
  5. @Kansas Bob yes, works with nearly everything that you can change the source code of

    ReplyDelete
  6. Hi friend i will try this trick in my blog called quizvook.blogspot.com

    ReplyDelete
  7. Nice post
    this is good widget to welcome returning visiters
    -----------------
    Do you know why i spam here?
    Internet Dreamz | free style blog

    ReplyDelete
  8. Googlesri website is the Number one aggregator in Sri lanka. So share your multi lingual post with brilliantly Peoples from now and search so many latest news and articles. Please send your E-mail ID to rss4sk@gmail.com if you want to become an author of this platform.

    ReplyDelete
  9. Sorry but i couldn't do it in my blog i tried many times before and now i again tried it but no use :( my blog >> http://uniquechess.blogspot.in/

    ReplyDelete
  10. @Qasim Zaib - The Blogger Dynamic Views templates allows additions to CSS but not changes to the template. Would this work for it?

    ReplyDelete
  11. you are using adsense below your post title.is it is not against TOS.
    Google New Penguin Update

    ReplyDelete
  12. @Kansas Bob Correction! This bar doesn't seem to be working with Dynamic views

    ReplyDelete
  13. Hello Mohammad Bhai,

    Eid Mubarak - Wishing You A Fresh, Happy and Prosperous Eid 2012

    Regards
    Gagan Masoun
    Eid Mubarak - Wishing You Happy And Prosperous Eid

    ReplyDelete
  14. Eid Mubarik Muhammad :) and MBT team :), keep updating us with such posts I loved this ad this bar.

    Rcent Post: Creating Ad Spots Like Buy Sell Ads With CSS

    ReplyDelete
  15. @Gagan
    Khair Mubrak brother. Wish you an abundance of joy and happiness in this EId. Stay blessed =))


    @Meesum
    Oh thank you meesum. Wish you too a happy and delighted EID buddy. Do take the EIDI because at least you can! :D

    Update
    I have updated the post. The code must be pasted just below the opening head tag. This is true that the bar works after a lot of trial and errors because it is still in beta. One way by wish it worked in our test blog was when we selected all options from Addthis control options and set a time when the Addthis welcome bar should disappear. If this did not work then refresh the page and reset the options and then try again.

    ReplyDelete
  16. Welcome Bar Not Loading to Blogger Dynamic or Other Customized Template, I'm Added that's Script to Below <head> & <body> Tag, Same Problem, Not Loading, Why that's, How to Fix it, Welcome Bar It's Very Usefully, @Blog Admin, Plz Added New Post, How to Added Welcome Bar Correctly to Blogger, It's Useful More Other Visitor, Thanks !

    ReplyDelete
  17. Works on my blog thanks a lot.

    Watch live asian tv channels on http://netbloggerz.blogspot.co.uk/

    ReplyDelete
  18. Great post, but can i use this bar for my blog http://game-einherjar.blogspot.com in dynamic view style?

    ReplyDelete
  19. yaar where to add in template after or bfore what ??

    ReplyDelete
  20. @Kashif Khalid anywhere. But before head tag would be fine

    ReplyDelete
  21. My feed burner says 0 so does your any clue why?

    ReplyDelete
  22. Where to enter the code.... Just "BELOW"????

    ReplyDelete
  23. Nigeria Immigration service Recruitment form, for 2013/2014 Recruitment. Call Mr.Abubakar on how to purchase and apply. For Both Junior And Senior Cadre. The Federal Ministry Of Interior As Announced The Registration Process And Shortlist For Immigration Recruitment 2013. People who really have a passion to become a perponnel and want to apply for any of this placement should for e-Registration...... Or Contact+2348082317906 +2348142419588 for further enquiries and process and how to purchase a scratch card pin. Empowered By The Federal Ministry Of Interior Wuse Zone:5 Abuja.

    ReplyDelete
  24. Nigeria Immigration service Recruitment form, for 2013/2014 Recruitment. Call Mr.Abubakar on how to purchase and apply. For Both Junior And Senior Cadre. The Federal Ministry Of Interior As Announced The Registration Process And Shortlist For Immigration Recruitment 2013. People who really have a passion to become a perponnel and want to apply for any of this placement should for e-Registration...... Or Contact+2348082317906 +2348142419588 for further enquiries and process and how to purchase a scratch card pin. Empowered By The Federal Ministry Of Interior Wuse Zone:5 Abuja.

    ReplyDelete
  25. NOT WORK FOR ME... I can't believe it...

    ReplyDelete