How to Add Twitter Profile in Blogger

Now a days, Google Search engine not easily bring up your new site in search engines results. Twitter is a most popular platform to get a lot of traffic for your website. Now you should to create a new account on twitter and find relevant followers. To get a relevant follower most beautiful method is to add a twitter Profile box widget in your blog. So, in this article we learn How to Add a twitter Profile Widget in Blogger.

How to Add Twitter Profile in Blogger

Step #1: Go to your blogger dashborad and click on Template > Edit HTML

Step # 2: In the template coding you can find out ]]></b:skin>  tag

Step # 3: Now copy the following code and paste above it

/* -- Twitter Profile Box Gadget By BAM--- */
.MBL-tweter-header {
background: #1bc4de url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lKXWhPOUshvWTt5b5koM3bjIkXg3LyH2okMPza8Z8_6BA9aLlqru1rZkT81fH1Trdos1vWn0-4gIQ2WvKzmr0tiEj_JnPK-WN-6PTGcYjD5Y4thXblb-MD4ORqx424dBCNUP91lA5skL/s1600/Fortolioa.png);
}
.MBL-tweter {
 width: 300px;
 background-color: #ffffff;
 font-family: Arial, Helvetica, sans-serif;
 -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
 -moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
 box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
 border: 1px solid #e8e8e8;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -khtml-border-radius: 8px;
 border-radius: 8px;
        overflow:hidden;
}
.MBL-tweter .MBL-tweter-header {
 padding: 10px;
 height: 73px;
}
.MBL-tweter .MBL-tweter-header .screen-name h1 {
 color: #fff;
 margin: 0;
 font-size: 16px;
 text-transform: capitalize;
       font-family: 'Helvetica', sans-serif;
}
.MBL-tweter .MBL-tweter-header .screen-name h2, .MBL-tweter .MBL-tweter-header .screen-name h3 {
 color: #ffffff;
 margin: 0;
 font-size: 12px;
 font-family: 'Helvetica', sans-serif;
}
.MBL-tweter .MBL-tweter-header .screen-name {
 margin-top: 20px;
 width: 180px;
 float: right;
}
.MBL-tweter .MBL-tweter-header .profile-image {
 width: 73px;
 height: 73px;
 float: left;
}
.MBL-tweter .MBL-tweter-header .profile-image img {
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    width: 73px;
    height: 73px;
    -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
    -moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
    box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
}
.MBL-tweter .twitter-summary {
       background-color: #f9f9f9;
 height: 60px;
 position: relative;
}
.MBL-tweter .twitter-summary ul {
 display: table-row;
 height: 60px;
 width: 100%;
 margin: 0;
 padding: 0;
 text-align: center;
 padding: 15px 0px;
}
.MBL-tweter .twitter-summary ul li {
 list-style-type: none;
 font-size: 12px;
 padding: 0px 6px 0px 6px;
 border-left: 1px solid #e8e8e8;
 text-align: center;
 vertical-align: middle;
 display: table-cell;
 color: #958470;
 *float: left;
 width: 84px;
}
.MBL-tweter .twitter-summary ul li a {
 color: #958470;
 text-decoration: none;
}
#boxs {
    clear: both;
    font-family: 'Helvetica', sans-serif;
    position: absolute;
    float: right;
    font-size: 10px;
    text-transform: uppercase;
    padding-left: 210px;
    margin-bottom: 20px;
    margin-top:10px;
}
#boxs a {
   text-decoration: none;
   color: #b0b0b0;
}

Step # 4: Save Template

Step # 5: Now Go to Layout > Add a Gadget> HTML/Javascript

Step # 6: Copy the following code and paste in to the box

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://urdupctutorials.googlecode.com/files/MBtwet.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#box").dwseeTwitterBox({
 'screenname':'urdupctutorials',
 })
})
</script>
<div id="box"></div>

Customization: Replace urdupctutorials with your twitter name.

Step # 7: Save and Enjoy

I am very hopeful that this Gadget is become very helpful to increase your blog traffic with using of the twitter. Please share with your friends.