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/AVvXsEhtAAaPCBeNztuVQHppBAIe6EC36COl0GAcy91xwGumqNHs5-U27dcCtOnyAwrSDNizPZr3CX-0zyV3zNnZnx2fz5he6IUkWaYB8UrmSQ9iA92SDADhaiufMXYh2HEn2Qz7JgtGY5uzmEyP/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://bloggerandmoney.googlecode.com/files/MBtwet.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#box").dwseeTwitterBox({
 'screenname':'mybloggerlab',
 })
})
</script>
<div id="box"></div>
Customization: Replace bloggerandmoney 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.  
Share on Google Plus

About Unknown

My Name is Usman Ali and i am SEO Consultant, Online Mentor who has been working since 2012. Blogging is my pession. I can help you in Make Money Online, Blogging, Teachnology, Tips and Tricks, How to and Specially SEO Related issues.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment