Follow On Facebook,Twitter And Google+ Gadget For Bloggers

Hello Geeks ... Today's Post I'm gonna show you how to Add A Follow On Social Web Gadget To Your Blog In Such A Simple And Easy Way Just As You See In the Picture Here :

So let's Get Started ...

Steps To Add The Above Gadget  : 

1. From Blogger Home Pannel Go To Layout. 
2. Add A Gadget On The Place You Prefer To Add It
3. Select HTML/JavaScript 
   
   
   

Add This Code :

/*--- MBL Advance Social Gadget --- */

#socialwid { 

font-family:Arial, serif; 

text-transform: uppercase;

font-weight:bold; 

font-size:15px; color:white; text-align:center; margin-top:10px;}

#socialwid a {color:inherit;}

#mbladvance-sub div *{

-moz-box-sizing:border-box;

-ms-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;}

#mbladvance-sub div #likered{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOO66KfQ518R36hKNzcJ8S77OnFCqDsAvCsU1ADwDaUy1bZ50kaW1gQcPPx_YSKLjoecDAkjBJ3jrGA_rjgOrur5JlrmJCSCNWqGoarpo1gVWqeinSQujDx-SIjSdKdZZf4qsgramcMiI/s1600/Sociala.png)!important;background-position:top left;

background-repeat:no-repeat;

height:242px;

width:300px;}

#mbladvance-sub div{

margin:0;

padding:0;

background-image:none!important;

            width: 299px;

        }

#mbladvance-sub{

margin-bottom:15px;

height:250px; 

background-color:#ffffff}

</li>

</ol>

</div>

<br />

<div class="block" id="mbladvance-sub" style="height: 257px!important;">

<div>

<div id="likered" style="height: 257px!important;">

<div style="height: 47px;">

</div>

<!--Google +1/Follow-->

<br />

<div style="border-bottom: none; border-top: none; border: 3px solid #8ec801; height: 54px; margin-top: 1px; overflow: hidden; width: 300px;">

<span style="display: inline-block; float: left; padding: 15px 0 0 23px; width: 75px;">

</span>

<br />

<div class="g-plusone" data-href="http://letsgogeeky.blogspot.com">

</div>

<span style="display: inline-block; float: left; padding: 15px 0 0 23px; width: 75px;">

</span>

<span style="display: inline-block; float: left; width: 170px;">

</span><br />

<div class="g-plus" data-height="69" data-href="https://plus.google.com/u/0/102126821428689467132" data-width="170">

</div>

<span style="display: inline-block; float: left; width: 170px;">

</span>

</div>

<!--Facebook Like--> 

<br />

<div style="border-bottom: none; border-top: 1px solid #8ec801; border: 1px solid #8ec801; border: 3px solid #8ec801; padding: 10px 10px 0 10px;">

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/YouAreAComputerGuy&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=36" style="border: none; height: 36px; overflow: hidden; width: 280px;"></iframe></div>

<!--Twitter Tweet/Follow--> 

<br />

<div style="border-bottom: none; border-top: 1px solid #8ec801; border: 3px solid #8ec801; height: 50px; padding: 10px 0 5px 10px;">

<span style="display: inline-block; float: left; height: 35px; width: 195px;">

<a class="twitter-follow-button" data-show-count="false" data-size="large" href="https://twitter.com/RamyAbdelGelil">Follow @RamyAbdelGelil</a>

</span>

<span style="display: inline-block; float: left; line-height: 0; overflow: hidden; width: 78px;">

<a class="twitter-share-button" data-hashtags="design" data-show-count="false" data-size="large" data-text="Such A Great IT Blog" data-url="http://letsgogeeky.blogspot.com" data-via="semandseonews" href="http://letsgogeeky.blogspot.com/">Tweet</a>

</span>

 </div>

<script src="http://mybloggerlab.com/Scripts/advsub.js" type="text/javascript"></div>

Final Edits : 

Replace My Google+ Link By Your Google+ Link 

Replace My Facebook Page link By Your Facebook Page Link

Replace My Twitter @mention and Profile Link By Yours 

Best Wishes Everybody :)