Sunday, November 4, 2012

Simple But Effective Subscription + Social Media Blogger Widget

This widget is very effective and easy to install in your blogger blog. The best part of this this widget is simplicity and compact size which means it's effective as well as very beautiful.

Simple But Effective Subscription + Social Media Blogger Widget


This tutorial shows you how to add this wonderful widget to your blogger blog. But if you have  a basic HTML and HTML5 knowledge, you can add it to your own blog or website too as this is simple widget created using HTML and HTML5.



Before going further, I would like to inform you that this is a edited version of the existing widget created by Mohammad at post 'No Ordinary' Social Sharing & Subscription Widget . I edited this widget to fit into sidebar of my blog having the width of 300px. You can add it anywhere you want.

Features:

  1. Subscription Box
  2. Facebook URL
  3. Twitter URL
  4. Google+ URL
  5. LinkedIn URL
  6. RSS URL

These are the built-in features you will get in this widget.

How it works

Enter your email ID, click submit and a pop-up will appear to confirm your subscription and done. The other social URL will simply open the links of the respective social media in new tabs, without disturbing your current page. 

Try all the features before going further to make sure you like it.

How To Add Widget To Your Blog

Adding this awesome widget to your blog is as simple as using it. Just follow below easy steps and find this superb widget on your blog.

1) Sign in to Blogger.com and go to Layout -> Add a Gadget.

Add Gadget in Blogger.com

2) A pop-up window will appear, select HTML/Java Script from it.

HTML/Java Script in Blogger.com

3) A Configure HTML/Java Script menu will appear. Enter the Title as per your requirement (I entered 'Subscribe') and paste the below code in the 'Content' section. Start copying from <!-- Start --> up to <!-- End --> tag.







Get Free Updates in your Inbox
Receive Quality Posts Straight in your Inbox by submitting your Email ID below

Follow us on:


It will appear like this.

Configure HTML/Java Script in Blogger.com

4) Now you need to do few changes in the above code. Don't worry, its just URL replacements. I have highlighted few things in code in RED color. What you have to do is,

  • Change 'howlog' to your Feed Title.
  • Replace 'http://www.facebook.com/HowLogOfficial' with your Facebook Profile/Page URL.
  • Replace 'http://www.twitter.com/HowLogOfficial' with your Twitter URL.
  • Replace 'https://plus.google.com/111024507538962714892' with your Google+ URL.
  • Replace 'http://www.linkedin.com/in/nikhiltamhankar' with your LinkedIn URL.
  • Replace 'http://feeds.feedburner.com/howlog' with your Feed URL.

One more thing to be noted. I have highlighted rel="author" to inform you that you can keep this code if you are the only author of your blog and wants Google Search Engine to catch your profile as Author when your page is appearing in Search Results as shown in figure below. Otherwise, just replace the code with rel="nofollow".

Author Program of Google

5) That's it !!! Click Save and View Blog. You will find the added Subscription Box wherever you added.

See Also: Tips For Becoming A Self-Made SEO Marketer


I have a heartily request. If you like this post, please Follow us on below Social Networks to never miss upcoming awesome posts by How Log.

  •  




Best Regards,
Nikhil Tamhankar

0 comments:

Post a Comment

 

HowLog : Tech How-To Guides Copyright © 2013 - |- Template created by O Pregador - |- Powered by Blogger Templates - |- Privacy Policy - |- Disclaimer