blog guide: November 2014

Previously I have shared many useful gadgets like popular post gadget, related posts gadgets, content slider, random post widget etc as it helps in increasing page views and every blogger need these gadgets. Today I am sharing a similar gadget which is also helpful in increasing pageviews, its a recent posts gadget. This is not an ordinary recent posts gadget, its special because it slides posts automatically. This gadget is widely used in blogs and is very popular.

It displays recent articles of a blog. It automatically slides posts which are created recently. It works on jquery, you don't need to update it for each time you create a post. It will automatically display your recent posts. You can see a snapshot of recent posts gadget below. To add this gadget in your blog follow below mentioned steps:

Snapshot:

How to add recent posts gadget in blogger

You may also like:

Step 1: Go to blogger dashboard.

Step 2: Select layout and click on add a gadget.

Step 3: Scroll down to Html/javascript and copy the below code.

Get code here.

Step 4: Paste it in the Html/javascript window.

Step 5: Replace http://101helperblogspot.com with your blog's link and also change http://yourblog.blogspot.com with your blog link in the end of the code similar to below shown code.

Step 6: Click on Save and you are done.

This gadget has cool effects also like when a thumbnail is hovered by mouse it becomes round and fades out. This gadget slides your content automatically and when a post is hovered its background color is also changed. You can customize it if you have a little knowledge about Css. Some easy things that you can customize in this gadget without having knowledge about Css are discussed below. If you want to customize this gadget as you like then learn it by reading below.

Customization:

To Change Number Of Posts:

Change 12 to desired number of posts in numposts = 12;

To Change Images Size:

To change thumbnail size make changes in below piece of code:

thumbwidth = 50;
thumbheight = 50;

To make change is Post's Summery:

Make changes in summaryPost = 40;

To Change Font Size:

Make changes in summaryFontsize = 10;

To Change Border Color:

Make changes in borderColor = "#232c35"; // Get Code Of A Color!

To Customize Time Interval:

Make changes in intervalspy=4000; // 4000 means 4 seconds!

To Change Font Size:

Make changes in fntsize = 15;

To Show Or Hide Number Of Comments:

Replace true with false in showPostDate = true;

You will find all the customizable part of code at the end of the code in Javascript section!

I hope you like this gadget. If you have any problem regarding this post ask me in comments or contact me. Share this post with others if you like it. Follow and subscribe to get latest news about blogger gadgets.

Search Tags: Recent posts gadget for blogger, how to add recent posts gadget in blogger, Display recent posts in blog, add recent posts gadget in blogger, free blogger gadgets, related posts gadget with thumbnails for blogger, 101Helper gadgets for blogger, how to increase blog traffic.

All in one social sharing buttons for blogger

Social sharing is very important for a website's traffic and popularity. A site with more social shares is more popular than the site having less social shares. Social networks are so popular that after Google Facebook is the second biggest website with respect to traffic. Its popularity can be evaluated from its number of users that it has more than 1.3 billion users word wide. Similarly other social networks like Twitter, Pinterest, linkedin etc have also many users and it is a great opportunity for bloggers and site owners to gain traffic from social networks. Although every blog and site has built-in social icons for sharing posts but people search and add other social sharing icons because of their responsive and stylish design.
Social buttons have become so common and are found in almost every blog or site. Social buttons are of different sizes, positions(horizontal or vertical) fixed, responsive etc and everybody has his own taste some like horizontal social buttons while some like vertical buttons, some like floating and responsive buttons while some like fixed buttons that's why in this post I will share almost every type of social sharing buttons along with the methods of adding it in blog and their features.

(1). Add-this buttons:

Add-this is widely used bookmarking service. It provides free website plugins like sharing buttons, follow buttons, content recommendations etc which helps you to get more likes, shares and increase your website/blog traffic. It provides data of your shares and followers also. It tracks all the shares and followers of a site or blog. To use these buttons registration is needed. It has different styles of buttons like horizontal sharing buttons, vertical sharing buttons, buttons with counters and without counters, mobile sharing buttons, newsletter buttons etc and follow buttons includes custom follow buttons(position them where-ever you want) on your blog, follow header buttons, horizontal follow buttons, vertical follow buttons and follow buttons toolbar for mobile. After follow and share buttons addthis also provides you with recommended content widget which shows recommended content to visitors it is of more than 7 types such as recommended content drawer(slides from left or right side of the blog when hovered with mouse), recommended content toaster, mobile what's next, desktop what's next(a slide on the bottom of the screen), jumbo recommended content slider(highlights content on whole page when someone share a post or follow you), horizontal and vertical recommended content widgets, recommended content content footer etc. Addthis provides marketing tools also like welcome bar on top of the page and lightbox conversation widget. Some of the buttons and widgets are free while some can be used after upgrading account to premium. I am not sharing code of any widget as every user should have his own account to get buttons and gadgets along with tracking service of shares and followers. To sign-up and get buttons click here.

(2). Add to any social buttons:

Add to any is similar to addthis but it doesn't require registration and it doesn't provide tracking records of shares and new followers. It provides social share buttons for wordpress, blogger,Drupal, thumblr, joomla and other websites. Add to any provides different types of buttons e.g vertical and horizontal buttons, subscription buttons, sharing buttons menu, Facebook, Google+,pinterest and twitter buttons. You can also decide the position of your widget. In this post I am sharing the code of each widget, choose your style, copy the code and follow simple steps mentioned below to add these buttons in your blog.

How to add (add to any) social buttons in blogger:

Its very easy to add these buttons in blogger but some buttons don't take the position therefore I will mention these buttons separate after sharing other buttons so choose your desired style and follow below mentioned steps to add these buttons in blogger:

To add buttons in sidebar:

(1). Go to blogger Dashboard.

(2). Go to layout, click on add a gadget, scroll down to Html/javascript, paste the code of desired sharing buttons and click on save.

To add buttons below posts:

(1). Go to blogger dashboard.

(2). Select template and click on Edit Html.

(3). Click anywhere in the Html code and search for below code by using combination of Ctrl+F on your keyboard:

<data:post.body/>

(4). Just below it paste the code of buttons which you want to add in your blog.

(5). Finally, click on save template and you are done!

Note: some times in blogger templates/custom templates buttons fails to appear when you try to add them below post, in that case add buttons in side bar of your blog. Buttons will automatically take position under every post.

Codes of Sharing buttons:

Style 1(Simple sharing buttons):

</div>

</script>

(function(){

var a = document.createElement('script');

a.type = 'text/javascript';

a.async = true;

a.src = '//static.addtoany.com/js/blogger.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(a, s);

})();

</script>

Large Sized:

Small sized:

With counters:

</div>

Custom buttons:

You can customize these buttons e.g: you can change shape of buttons by replacing the image url of desired button. For example Facebook button is in square shape and you want it in round shape simply go to Google images, search for round Facebook icons, copy the image link and replace it with the default link.

<div class="a2a_kit"> <a class="a2a_button_facebook"> <img src="//farm3.staticflickr.com/2863/12004329833_ddcd67ff4a_o.png" border="0" alt="Facebook" width="54" height="55"/> </a> <a class="a2a_button_twitter"> <img src="//farm3.staticflickr.com/2886/12004329883_8daa4af904_o.png" border="0" alt="Twitter" width="54" height="55"/> </a> <a class="a2a_button_google_plus"> <img src="//farm4.staticflickr.com/3774/12004033365_8965d86637_o.png" border="0" alt="Google+" width="54" height="55"/> </a> <a class="a2a_button_pinterest">
<img src="http://www.pafcs.org/assets/pinterest.png" border="0" alt="pinterest" width="54" height="55"/>
</a><a class="a2a_dd" href="http://www.addtoany.com/share_save"> <img src="//farm8.staticflickr.com/7326/12005120763_a44dc82111_o.png" border="0" alt="Share" width="54" height="55"/> </a></div> <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>

You can increase or decrease the height and width of icon by increasing or decreasing numbers in width="54" and height="55"/>.

Style 2(Sharing buttons with counters):

Style 2 has different buttons than style one. In style one almost all buttons don't have counters so in style 2 I am sharing buttons having counters. These buttons will show number of shares of each post. Style 2 brings stylish buttons with counters and in all sizes(small, normal, large). Use the same method which is mentioned above for style 1 buttons to add any of the buttons shown below in your blog.

Small sized buttons with counters:

You can see in above image, style 2 buttons have counters. It has some famous buttons like Facebook, Twitter, Linkedin, Pinterest and Reddit other buttons are also available but these show up when the button is hovered by mouse which is beside Reddit button.

Normal sized button with counters:

<div class="a2a_kit a2a_kit_size_24 a2a_default_style"> <a class="a2a_button_facebook a2a_counter"></a> <a class="a2a_button_pinterest a2a_counter"></a><a class="a2a_button_reddit a2a_counter"></a><a class="a2a_button_twitter a2a_counter"></a> <a class="a2a_button_google_plusone a2a_counter" style="width:85px"></a> <a class="a2a_dd" href="https://www.addtoany.com/share_save"></a></div> <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>

Large sized buttons with counters:

<div class="a2a_kit a2a_kit_size_32 a2a_default_style"> <a class="a2a_button_facebook a2a_counter"></a> <a class="a2a_button_twitter a2a_counter"></a> <a class="a2a_button_pinterest a2a_counter"></a> <a class="a2a_button_linkedin a2a_counter"></a> <a class="a2a_button_reddit a2a_counter"></a> <a class="a2a_dd" href="https://www.addtoany.com/share_save"></a></div> <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>

Largest sized buttons with counters:

This is the last type of counter buttons having largest size among all. These type of buttons should be used in blogs having large sized font so these buttons will be compatible with the blog's design. These buttons contains some most used social network icons like Facebook, Twitter and Linkedin. Other buttons are also included like Reddit and Pinterest. Except these buttons other icons are also included but they are packed in addtoany button and are displayed when hovered with mouse.

<div class="a2a_kit a2a_kit_size_64 a2a_default_style"> <a class="a2a_button_facebook a2a_counter"></a> <a class="a2a_button_twitter a2a_counter"></a> <a class="a2a_button_pinterest a2a_counter"></a> <a class="a2a_button_linkedin a2a_counter"></a> <a class="a2a_button_reddit a2a_counter"></a> <a class="a2a_dd" href="https://www.addtoany.com/share_save"></a></div> <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>

Style 3:

Floating buttons:

After sharing ordinary buttons its time to share some interesting gadgets like floating share buttons. Almost every blog and website is using this gadget as it helps visitors to share posts easily, now visitors don't need to go to top or bottom for sharing buttons because these buttons will fly with them no matter in which direction user is scrolling page e.g up or down.

One more thing is that I am sharing two types of floating buttons a vertical and another horizontal. I am sure you haven't seen a horizontal floating button gadget yet, so here I am sharing floating buttons and also how to give them desired position on your blog.

Vertical floating share buttons:

It is the most common gadget used now a days in almost every blog and site. It floats beside your post, you change its position also. I will show how to change position of this gadget after the code.

<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="http://www.addtoany.com/share_save"></a></div> <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>

Customization:

You can change the position of buttons only along with another thing that's adding more buttons, to add more buttons visit addtoany.com where you can find code for each button all you have to do in to copy and paste code of desired button in your gadget's code. You can see highlighted piece in above code that shows the position of gadget you can change the position according to your blog's width by making changes in this highlighted piece of code. Make sure not to erase px while making changes in code otherwise it won't work. You can also use percentage(%) instead of px.

Horizontal floating buttons:

Horizontal floating buttons are similar to vertical floating buttons but this gadget is not used by anyone yet as nobody knows about horizontal floating buttons. Addtoany has presented this gadget first time. It works like vertical buttons, the only difference between vertical and horizontal floating buttons is its look. You can use horizontal buttons in top or bottom of your blog. You can see a snapshot below along with code, if you like it, code the code and follow the same method which I told above for other buttons. You can position you share buttons bar by changing the number in top, right, left and bottom. Don't erase px otherwise it won't work, though you can use % instead of it.

<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; right:0px; bottom:0px; top:150px;"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_dd" href="http://www.addtoany.com/share_save"></a></div> <script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>

That's it. Addtoany doesn't provide more buttons but if you want unique style buttons you can create them at https://www.addtoany.com/buttons/for/website , you can also create subscription buttons here. Addtoany provides tools which includes size of buttons, an area from where you can add more buttons in your share bar etc.

(3). Shareholic buttons:

Shareholic is the all in one content amplification platform. It provides awesome style buttons and related content widgets. It is so popular that it reaches 400 million people per month. No doubt shareholic is the best content amplification platform because it has the coolest, smartest, responsive and most stylish buttons among all. It is a good platform for advertisers also. Sign-up is required to get buttons as every website/blog should have its own account for social analytics. Shareholic needs verification of every website, without verification nobody is allowed to use buttons. Shareholic first verify E-mail address and then blog/site is verified by a code. A code is provided to every user after sign-up and user is required to add that code in site/blog for verification. So go to https://shareaholic.com/signup?div=login&origin=https%3A%2F%2Fshareaholic.com%2Fpublisher_tools and register a free account to use buttons. If you don't know how to add shareholic buttons in blogger then follow below steps:

First of all sign-up at shareholic and confirm your E-mail address.
Verify your website/blog by adding provided verification code in your blog.
After verification generate code for desired buttons.
Copy the code of buttons which you create and follow the above steps which I have mentioned for Addtomany buttons to add buttons either below post or in sidebar of your blog.

Shareholic provides you with all types of buttons such as floating, fixed, responsive, underground styled, big sized, small sized and normal sized. Shareholic also let you to add a comment with your buttons which will show up beside buttons. Available comments are sharing is caring, sharing is wealth, sharing is knowledge etc.

(4). Sharethis buttons:

Sharethis is similar to addthis but it allows you to use buttons without sign-up. If you want analyics of your shares then sign-up is required. Sharethis buttons are also used by many user like shareholic. It provides top bar buttons, bottom bar buttons, sidebar floating buttons, horizontal bar and egg sharing buttons(a gadget looking like an egg display share buttons on mouse hover). I am sharing some buttons below. To add these buttons in your blog follow below steps:

Style 1:

Go to blogger dashboard and click on template.
Click on Edit Html and click anywhere in the Html code.
Search for <head> by using Ctrl+F on your keyboard and paste below code just below it:

Now copy the below code and paste it where you want your buttons to show up.

To add buttons in sidebar:

(1). Go to blogger Dashboard.

(2). Go to layout, click on add a gadget, scroll down to Html/javascript, paste the code of desired sharing buttons and click on save.

To add buttons below posts:

(1). Go to blogger dashboard.

(2). Select template and click on Edit Html.

(3). Click anywhere in the Html code and search for below code by using combination of Ctrl+F on your keyboard:

<data:post.body/>

Style 2:

How to add these buttons in blogger blog:

Go to your blog, click on template and select Edit Html.
Search for <head> and copy below code.

Paste the copied code below <head>.
Now copy below code and paste it where you want the buttons to appear.

Follow above steps which I have mentioned for style 1 buttons to add these buttons either in sidebar or below posts.

Style 3(buttons with counters):

To add buttons with counters in your blog follow same steps which are used for style 2 buttons except step 4. When you reach to step 4 add below code instead of that which is mentioned in step 4.

Follow above steps which I have mentioned for style 1 buttons to add these buttons either in sidebar or below posts.

Style 4(floating buttons):

Similar to other platforms Sharethis also provides floating buttons. It has its own style floating buttons. You can change their position from left to right only i.e sharethis buttons floats only on left side or right side of blog. To add sharethis floating buttons to your blog follow below steps:

Go to blogger dashboard.
Select template and click on Edit Html.
In the Html page click anywhere in the Html and search for <head>.
After <head> paste the below code:

Click on save template and go to layout.
In the layout page click on add a gadget and scroll down to Html/javascript.
Copy below code and paste it into Html/javascript tab.

Click on save and you are done, this gadget automatically takes its position on all blogs.

Customization:

As I told you above that you can change position of floating buttons from left to right on your blog so here I am going to tell you how can you do that, its very easy all you have to do is to make a little change in the code shown in second last step. If you want floating buttons on left side then don't make any changes just follow above steps but if you want the buttons to float on right side of your blog then just replace "left" with "right" in the code above and you are done. You can also control delay of your buttons, if you want buttons to appear late then in the above code increase number 5 in the orange highlighted piece of code but if you want buttons to load fast decrease 5 to 2 or 3. It may stop working when you try to make changes in open delay so if it happens then undo all changes.

Egg sharing buttons by Sharethis:

This is a unique gadget. It is an Egg which appears where you add the code of this gadget like on sidebar and show buttons when hovered by mouse. It is a good way to attract visitors to share your posts. I am not showing its code and method of use here as previously I have created a detailed post about it. You can read that at http://101helper.blogspot.com/2014/09/how-to-add-responsive-egg-sharing.html. In this post I have shared codes of this gadget and step by step tutorial to use this gadget.

Floating buttons with counters:

Floating buttons are mostly used buttons in blogs and sites. Floating buttons are of different styles, some simple styles are discussed above. Like other buttons some floating buttons also have counters which helps you know how many people have shared your post. These buttons also lets you show off number of shares to visitors. Therefore I am sharing floating buttons with counters. These buttons have a impressive and responsive design too. You can see a demo on my blog on your left side. These buttons take their positions automatically you don't need to position them. For example if you choose left style these buttons will show up on left side of your blog and will adjust automatically no matter what your blog's width is. To add floating buttons with counter on your blog follow below steps:

Go to blogger dashboard.
Select layout and click on add a gadget.
A small pop-up window will be opened, scroll it down and find Html/javascript.
Click on Html/javascript and choose a style below:

Style 1(Floating buttons on left side):

Style 2(Floating buttons at the bottom of blog):

Style 3(Floating buttons on right side):

Copy code of the style which you like and paste it in Html/javascript window.
Click on save and you are done.

Style 4(round floating buttons):

horizontal floating buttons for blogger | 101helper

Horizontal floating social media bar floats over each post, it lies below every post title and when the page scrolls down it floats at the top of each post. You can read a detailed post about this gadget here.

Wordpress style responsive follow buttons:

Stylish follow buttons for blogger | 101helper

pulso sharing buttons for blogger 101helper

pulso vertical sharing buttons for blogger 101helper

pulso vertical sharing buttons for blogger

Final words:

Similar to above mentioned platforms some other platforms are also available but they require registration and need purchase to use their buttons. All the above buttons are free to use, I hope you like this post and all buttons are working on your blog if you have any problem ask me in comments or contact me. Follow and subscribe to get latest news about blogger gadgets, tutorials, tips, tricks and seo. If you like this post then take a second to share it with others.

Search Tags: social buttons, sharing buttons, All in one sharing buttons for blogger, sharing buttons for blogger, share buttons for blog, how to add share buttons in blogger, floating buttons, horizontal sharing buttons, how to add share buttons below posts, 101Helper sharing buttons for blogger blog, Responsive buttons for blog, stylish sharing buttons for blogger blog.