When the installing question of this widget comes, I’ll say that this is so easy. Only you have to do two things and of course I’ll give you the instruction. Let’s start…
- First login to your blogger account and click on “Template” option then “Edit HTML”.
- Click anywhere in the html box and press “Ctrl+F” and search for the “<b:skin>” tag.
- After finding the above tag copy and paste the below CSS code just under/after/below <b:skin> tag.
/*----------------Sidebar Social Widget by ITFun24.Com Start--------------------------*/
#buttons {
overflow: hidden;
}
.button1 {
background: none repeat scroll 0 0 #EEEEEE;
-moz-box-shadow: 0 1px 0 #FDFDFD inset;
-webkit-box-shadow: 0 1px 0 #FDFDFD inset;
box-shadow: 0 1px 0 #FDFDFD inset;
float: left;
margin: 0;
padding: 15px 0 0;
width: 149px;
}
.button1.facebook,.button1:hover.facebook .slide {
margin-right: 1px;
background: #3873ad;
}
.button1.google,.button1:hover.google .slide {
margin-right: 1px;
background: #f73c28;
}
.button1.twitter,.button1:hover.twitter .slide {
background: #62c6f8;
}
.button1.rss,.button1:hover.rss .slide {
background: #f18421;
}
.button1 i {
color: #FFFFFF;
display: block;
font-family: FontAwesome;
font-size: 20px;
font-style: normal;
height: 40px;
line-height: 40px;
margin: 0 auto 2px;
text-align: center;
width: 40px;
border: 2px solid #fff;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.social-container {
color: #FFFFFF;
font-size: 15px;
font-weight: 600;
height: 45px;
line-height: 45px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.slide, .button1 i {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.slide {
height: 45px;
position: absolute;
top: -35px;
width: 100%;
}
.icon-facebook:before {
content:"\f09a";
}
.icon-twitter:before {
content:"\f099";
}
.icon-google-plus:before {
content:"\f0d5";
}
.icon-rss:before {
content:"\f09e";
}
.slide:after {
border-left: 2px solid #EEEEEE;
bottom: 0;
content: "";
display: block;
height: 10px;
position: absolute;
width: 100%;
}
.button1:hover .slide {
top: 0;
}
.facebook_c {
position: relative;
top: 10px;
}
.twitter_c {
position: relative;
top: 10px;
}
.rss .IN-widget, .button1 iframe {
position: relative;
top: -5px;
}
.google_c {
position: relative;
top: 5px;
}
.rss_c {
position: relative;
top: 6px;
}
.twitter iframe {
width: 134px !important;
}
.google #___plusone_0 {
width: 60px !important;
}
.button1.rss {
margin-right: 0;
}
/*----------------Sidebar Social Widget by ITFun24.Com End--------------------------*/
- Now go the layout option of your blog menu and click on “Add a gadget” and chose “Javascript/HTML”.
- Now give a title as like as follow us/join us etc. And paste the below code in the main (big) html box. Finally click on the save button. This is it your widget is fully ready to astonished your visitor.
<div id="buttons">
<div class="facebook button1">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/all4fun.bd&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
</div>
</div>
</div>
<div class="twitter button1">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<div class="twitter_c">
<a href="https://twitter.com/SLsagor" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div></div>
</div>
</div>
<div class="google button1">
<i class="icon-google-plus"></i>
<div class="social-container tw">
<div class="slide">
<div class='google_c'>
<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/106988820695200371831" data-rel="publisher"></div></div>
</div>
Google+
</div>
</div>
<div class="rss button1">
<i class="icon-rss"></i>
<div class="social-container tw">
<div class="slide">
<div class="rss_c">
<p><a href="http://feeds.feedburner.com/EverythingYouNeedfeelmypain" target='_blank'><img src="http://feeds.feedburner.com/~fc/TntByStc?bg=99CCFF&fg=444444&anim=0" height="26" width="88" style="border:0" alt="" /></a></p>
</div>
</div>
Rss Feed
</div>
</div>
</div>
Change red text with your Facebook,Twitter,Google+,Feedburner links
I hope you will love this widget. If you really love this please take 1 minutes to share the post on your social profile and give a chance to your friends to enjoy this. If you have any problem/question please feel free to leave in the comment field.
Wonderful widget.. keep it up
ReplyDelete