How to add Social Sharing on Widget Sidebar

How to add Social Sharing on Widget Sidebar
You will be happy if you blog template has been designed within the social sharing on the widget sidebar because they are so useful to gain more Like and Follow to your personal social network. Those social networks such as Facebook, Twitter, Google+, Youtube, and Pinterest. These social icons will allow your visitors to join your helpful articles content to that has been shared directly to your social profiles. Moreover, the more they joined the more you get more visitors come through those sharing links on the social networks home pages.
These are the instructions below that help you to add those social icons to your blog widget sidebar within a high-quality solution.

How to add Social Sharing on Widget Sidebar?


Social Media Icons to Place on Blogger


Step 1: Login your blogger: then go to Template >> Edit HTML

Blogger Setting and Edit HTML Code

Step 2: Search for <head> tagPress " CTRL +F" or "Command + F" for Macbook then place <head> tag to the search column and press Enter.

Then copy below code and place it below it.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 3: Search for ]]></b:skin>

Then place this below CSS Code above it.
#widgetsocial {
text-align: center;
}
#widgetsocial a {
background: #5e5e5e;
color: #fff;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
padding:5px;
margin: 0 1px 6px;
border: 1px solid #5e5e5e;
}
#widgetsocial a:hover{
background: #444;
}

** In case you would like to change the background see "background: #5e5e5e;" the change only #5e5e5e to get more color "Click Here"

Step 4:  Add HTML/JavaScribe to widget sidebar: You just go to "Layout" click "Add a Gadget" then find out the HTML.JavaScribe and click symbol as below.
Add HTML Code Area to Blogger

Step 5: Copy this below code then Paste it in your widget sidebar HTML Area.
<div id="widgetsocial">
<a href="YOUR RUL" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="YOUR RUL" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a>
<a href="YOUR RUL" rel="nofollow" target="_blank" title="Google Plus"><i class="fa fa-google-plus"></i></a>
<a href="YOUR RUL" rel="nofollow" target="_blank" title="Pinterest"><i class="fa fa-pinterest"></i></a>
<a href="YOUR RUL" rel="nofollow" target="_blank" title="Youtube"><i class="fa fa-youtube"></i></a>
<a href="YOUR RUL" rel="nofollow" target="_blank" title="Instagram"><i class="fa fa-instagram"></i></a>
<a href="YOUR RUL" rel="nofollow" target="_blank" title="Tumblr"><i class="fa fa-tumblr"></i></a>
<a href="YOUR RUL" rel="nofollow" target="_blank" title="RSS"><i class="fa fa-rss"></i></a>
</div>
 Note: You need to change the URL to your personal URL as highlight below, then replace in 'YOUR URL' that have shown above.

  • https://plus.google.com/[your google+ id]
  • https://twitter.com/[your twitter id]
  • https://www.facebook.com/[your facebook id]
  • https://www.youtube.com/[your youtube id]
  • http://www.pinterest.com/[pinterest id]
Previous Post Next Post