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>Customization: Replace bloggerandmoney with your twitter name.
<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>
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.
0 comments:
Post a Comment