Friday 1 November 2013

Stylish Jumping Social Share Buttons For Blogger

Social share buttons are the great widgets for promoting your blog on different social platforms. Although there are many social share buttons available online but the thing that we need to consider is to attract our blog visitors to share our posts. Attracting visitors to share our contents is not a big deal if you have stylish buttons that pull the visitors attention.
jumping social share buttons
Our social sharing widget must need to look attractive as well as allow the visitors to share your content with ease otherwise visitors might ignore sharing your posts. So, today i am going to provide you a fantastic share widget that can easily attract your visitors to share your posts. These social share buttons look very cool as well as they jumps whenever you move your mouse over them. These buttons are easy to customize and you can add as many as buttons you want. You can see the live demo of these button in this blog, just see below the post and decide whether they are cool or not. So lets begin the tutorial:

How to add Jumping share buttons to Blogger ?

  • Then you will find three options:  Related Content, Share Buttons, Social Analytics.
  • Select Share buttons as we are here to add share buttons to our blogs and then click on Get Started, however if you want to select other options then you can select them too.
shareaholic share buttons get started

  • Now it will ask you to create an account or log in with your Facebook or Twitter account.
  • Then create an account or simply log in with your Facebook or Twitter account.
Shareaholic member login

  • Then it will redirect you to Add a new website page.
  • In Add a new website page enter your blog URL, Blog name, platform, category and language as shown in screenshot and then click on Continue tab.
shareaholic add a new website page

  • Now you will be taken to Publisher Apps page.
  • In Publisher Apps page, enter the location where you want to show your share buttons that is below or above posts, theme, headline, alignment etc fields and then click on Save Settings.
Shareaholic publisher apps page

  • Now it will show you two codes, copy both the codes.
Shareaholic share buttons code

  • Now log in to your Blogger Account.
  • Then go to Dashboard >> Template >> Edit HTML.
  • Now in edit HTML section press CTRL + F and search the follwing code:
</head>
  • Then paste your first code just above </head>.
  • Now again in Edit HTML section search the following code:
<data:post.body/>
Note: This code appears three times in Edit HTML section, so search the second one.
  • Then paste the second code just below <data:post.body/> to show the buttons just below your posts but if you want to show these buttons above your posts then paste the second code just above <data:post.body/>.
  • Then click on Save Template tab and you are done.
Enjoy your new stylish share buttons !

Also read:

0 comments:

Post a Comment