Latest Updates:

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.

FB Twitter Simple Sharing Widget

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(http://1.bp.blogspot.com/-YYcPY-fGmDU/UQgaPyTkoUI/AAAAAAAAC1w/ZkR35pooJmg/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(http://4.bp.blogspot.com/-WX-hGlO4z8g/UQgmB3J7jQI/AAAAAAAAC3U/owsfT4yGeuk/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!
Written By:
Topic Under: 9/16/2013
  • Blogger Comments
  • Facebook Comments

0 comments:

Post a Comment

Hi, Your are most welcome and feel free to share your comment(s). We will try to response your comment(s) as soon as possible.

Please DON'T spam here. Spam comments will be deleted just after our review.

Thank You For Being With Us.