Simple Facebook And Twitter Widget For Blogger Blog

Today I have enough free time but feeling very lazy and sleepy. So, I just think I will post a tutorial on blogger sharing widget which I already added in this blog. It is pretty better than publishing no post. Ha Ha Ha!
Okay! You can see a simple Facebook and Twitter sharing widget with mouse hover effect on right side just below at my “Subscribe and Stay Close” widget. You can setup this simple sharing widget below at your all post or as a sidebar gadget. This is very easy to setup and friendly to customize. This sharing plugin allows your readers to like or follow your blog easily. Let’s apply this.

1. Sign in to your blogger account

2. Click on your blog title

3. Click Layout from left side menu

4. Click Add a gadget (if you want to add as a sidebar gadget)

5. From pop-up box find HTML/JavaScript and click on it

6. Now just paste the below codes in the box (Don't switch to Rich Text mode)

<style>
/*--- FB Twitter simple widget shinemat.com CSS ---*/
.sm-followbox{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5jL6g_A6fjLfyyWziy2X95ZX50iyjrAiQCSxx0oFTEJe1AnNk9BY_xyiJi35HJ6y1k1Wa8OXPx4P-QIFoJn1-kU9jw6ynEldG6XVDFVYmF7jgDtSqnADTwXQZLfBRnvU-N5fBDSIsV-s/s1600/fb-twitter-shinemat.png) no-repeat 237px 53px ;
padding: 5px;
border: 1px solid #C9C9C9; 
-moz-border-radius: 8px;
border-radius: 8px;
color: #686B6C;
transition: all 0.2s ease-out 0s;
}
.sm-followbox:hover{
background: #EEFCEF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi79PshwpN9Ux0V79Y6exU_NRpe3V6OLWxrQMVw_ejkv-gd-AP3SRYPMxoEA2qLSflezFfTtbT5LFuGo0geJgnDE7uA3bezE3Ej8BbWrSTZ057n-cnUbCTJmquDc4pV9Do-XhOG8N0heRU/s1600/fb-twitter-shinemat-hover.png) no-repeat 237px 53px ;
/*shinemat.com*/
padding: 5px;
border: 1px solid #727171; 
-moz-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0px  0px 3px #7C7C7C;
box-shadow: 0px  0px 3px #7C7C7C;
transition: all 0.2s ease-out 0s;
}
</style>

<div class="sm-followbox">
<center><p style="color: #686B6C; margin: 0px 0px 5px; font: bold 1.2em arial;">Don't Forget to Like/ Follow Us</p></center>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=236714146377864";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.facebook.com/likeshinemat" data-width="320" data-show-faces="false" data-send="true"></div>
<br />
<a href="http://twitter.com/ahsaimoom" class="twitter-follow-button"></a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

7. Click Save button to done.

Customization Area:

---

● Simply replace the green highlighted text with your Facebook URL.

● Change the yellow highlighted text with your Twitter username.

For adding below at all post...

---

The above process is for adding this widget as a sidebar gadget. To place this widget below at your all blog post, follow my instructions below:

1. Go to your Template

2. Backup your full template before any change

3. Click Edit HTML.

4. Click on code box and press Ctrl+F to search.

5. Search for ]]></b:skin>

6. Now add the only CSS codes just above/ before it without <style> and </style> tag.

<style>
........................
...............................
........................
</style>

7. Now find <data:post.body/>

8. Now paste the rest codes just below at <data:post.body/> tag

<div class="sm-followbox">
........................
...............................
........................
</div>

9. Finally click Save Template and you are all done.

Reload your blog to see this cool widget works.

---

I published some more nice sharing widgets for your blogger blog. These are as follows:

▪ Facebook like button below each post
▪ Instant update Facebook and Twitter with blog post
▪ Twitter follower counter
▪ Flying Twitter bird
▪ Sliding sharing buttons with counter
▪ AddThis sharing widget
▪ LinkedIn and
▪ Google Plus

Hope you like them also. Happy Blogging dear... Allah Hafez!