How To Add Twitter Badge Widget To Blogger

Hi guys. Today I'm going give and show you how to add a twitter badge widget in your blogger blog. As a blogger's dream to get more fans on the social networking site. So this widget help you to increase your twitter followers from your blog and also best way of getting real twitter followers is to connect your twitter account with your website/blog so your visitors can follow you easily. You can customize this widget as your wish to do if you are familiar with coding.

This twitter badge show the numbers of your tweets, following, and followers with your twitter profile link, so visitor can easily follow you. This twitter badge is absolutely customizable.

Live Demo

<style>
.SG-tweter-header {
background: #000 url(http://softglad.at.ua/widgets/black-bg.jpg);
}
.SG-tweter {
 width: 266px;
 background-color: #ffffff;
 font-family: Arial, Helvetica, sans-serif;
 border-radius: 0;
}
.SG-tweter .SG-tweter-header {
 padding: 10px;
 height: 73px;
}
.SG-tweter .SG-tweter-header .screen-name h1 {
 color: #fff;
 margin: 0;
 font-size: 16px;
 text-transform: capitalize;
 font-family: 'Helvetica', sans-serif;
}
.SG-tweter .SG-tweter-header .screen-name h2, .SG-tweter .SG-tweter-header .screen-name h3 {
 color: #ffffff;
 margin: 0;
 font-size: 12px;
 font-family: 'Helvetica', sans-serif;
 background: none;
}
.SG-tweter .SG-tweter-header .screen-name {
 margin-top: 20px;
 width: 150px;
 float: left;
}
.SG-tweter .SG-tweter-header .profile-image {
 width: 70px;
 height: 70px;
 float: right;
}
.SG-tweter .SG-tweter-header .profile-image img {
 width: 70px;
 height: 70px;
 border-radius: 40px;
}
.SG-tweter .twitter-summary {
 background-color: #f9f9f9;
 height: 60px;
 position: relative;
}
.SG-tweter .twitter-summary ul {
 display: table-row;
 height: 60px;
 width: 100%;
 margin: 0;
 padding: 0;
 text-align: center;
 padding: 15px 0px;
}
.SG-tweter .twitter-summary ul li {
 background: #0AB7E2;
 list-style-type: none;
 font-size: 12px;
 padding: 0px 6px;
 text-align: center;
 vertical-align: middle;
 display: table-cell;
 color: #fff;
 width: 84px;
 -webkit-transition: .5s;
 -moz-transition: .5s;
 -ms-transition: .5s;
 -o-transition: .5s;
 transition: .5s;
 border:0 ;
}
.SG-tweter .twitter-summary ul li:hover {
 background: #9808AC;
 -webkit-box-shadow: 0px 5px 5px 0px #666;
 -moz-box-shadow: 0px 5px 5px 0px #666;
 -ms-box-shadow: 0px 5px 5px 0px #666;
 -o-box-shadow: 0px 5px 5px 0px #666;
 box-shadow: 0px 5px 5px 0px #666;
}
.SG-tweter .twitter-summary ul li a {
 color: #fff;
 text-decoration: none;
}
#boxs {
 display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://softglad.at.ua/widgets/twitter-badge.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#box").dwseeTwitterBox({
 'screenname':'Soft_Glad',
 })
})
</script>
<div id="box">
</div>

Change Soft_Glad with your twitter user name and if you want to change the background then you may change the img url in blue. I hope you like this widget and enter your comments below regarding this twitter badge.

SHARE

Tweet