Saturday, 27 June 2015

How to add social buttons to blogger



Social buttons are very necessary in a blog. Social buttons makes sure that all the visitors of your blog can simply click the social buttons on your blog and then go to the social page of your blog on facebook, twitter, google plus, youtube, etc. This also helps you in increasing the number of likes, followers, plus ones, subscribers, etc on the social pages. Also if you use social but
tons which includes a lot of javascript or images which are hosted from outside of the blog , then you blog will slow down. So here is a post on how to add social buttons to blogger.

  1.  Open your blog, in which you want to add the social buttons and also download the social button icons by clicking here.
  2. click on create new post option and click on add image option, then upload the images which you have downloaded and copy url of each image and paste it in notepad.

  3. Click on layout and the layout of your blog will open.

  4. Click on add gadget in the layout, wherever you want to add the social buttons.

  5. Select html/ javascript and a new box will open.

  6. In the add gadget box , enter any title and paste the following code :

<!--Social Buttons For Blog By Tech Trick Zone -->
<div class="social-buttons">
    <div class="imgContainersb">
        <a href="FB URL" target="blank"><img src="FB IMG" height="40" width="40"/></a>
    </div>
<div class="imgContainersb">
        <a href="TWITTER URL" target="blank"><img src="TWITTER IMG" height="40" width="40"/></a>
    </div>
<div class="imgContainersb"><a href="GOOGLE PLUS URL" target="blank">
        <img src="GOOGLE PLUS IMG" height="40" width="40"/></a>
    </div>
    <div class="imgContainersb">
        <a href="YOUTUBE URL" target="blank"><img class="middle-img" src="YOUTUBE IMG" height="40" width="40"/></a>
    </div>
 
    </div>
<style>
.imgContainersb{
    float:left;
    margin:5px;
    border-radius:10px;
}
</style>
<!--Social Buttons For Blog By Tech Trick Zone -->
  1. Now, in the code replace the following :



    FB URL - facebook page url
    TWITTER URL - twitter page url
    GOOGLE PLUS URL - google plus page url
    YOUTUBE URL - youtube page url

    FB IMG - facebook image url (which you copied in step 2)
    TWITTER IMG - twitter image url
    GOOGLE PLUS IMG - google plus image url
    YOUTUBE IMG - youtube image url
  2. Now save the code.
  3. Save changes to your blog's layout. View your blog and the social buttons will appear.