Hi bloggy readers,
In my previous post, i already gave you the tutorial about adding a twitter widget using the script code provided by Twitter itself. But, did you know that, we can also create a twitter update using a css and script to make a twitter update widget that looks great for our blog, or i must say, it looks gorgeous. What are you waiting for. Let's start the tutorial guys!
Tutorial
1. Login to Blogger.com2. Go to Layout -> Edit HTML
Make a back up template first, it's very important!3. Press Ctrl + F and find the code below:
]]></b:skin>
4. Now copy the code below and paste it above the ]]></b:skin> Code.
.twittop{
margin:5px 0px 0px 0px;
height:30px;
background:#141313 url(http://3.bp.blogspot.com/_xfdD6S9fOk4/Sl6f0c4BBSI/AAAAAAAABhY/F2zoq7Zhxgg/s1600/twitop.jpg) no-repeat;
width:335px;
}
#twitter_div{
width:333px;
float:left;
height:100%;
padding:0px 0px;
margin:0px 0px;
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
font-family:Tahoma,Century gothic,verdana, Arial, sans-serif;
}
ul#twitter_update_list{
list-style:none;
padding: 0px 0px;
margin:0px 0px;
}
ul#twitter_update_list li{
font-size: 11px;
list-style:none;
padding: 5px 5px;
margin:0px 0px;
line-height:18px;
background:#B5D3DD url(http://2.bp.blogspot.com/_xfdD6S9fOk4/Sl6fcQZI99I/AAAAAAAABhI/FLFxWOLf-4U/s1600/twit.jpg) repeat-x;
border-bottom:1px dotted #ccc;
color:#222;
}
ul#twitter_update_list li:hover{
font-size: 11px;
list-style:none;
padding: 5px 5px;
margin:0px 0px;
line-height:18px;
background:#dcdcdc url(http://3.bp.blogspot.com/_xfdD6S9fOk4/Sl6f0AX6X-I/AAAAAAAABhQ/4rR0t3qHWX4/s1600/twith.jpg) repeat-x;
border-bottom:1px dotted #ccc;
}
#twitter_update_list li a:link, #twitter_update_list li a:visited{
color:#D3116D;
}
#twitter_update_list li a:hover{
color:#BC0C0F;
}
margin:5px 0px 0px 0px;
height:30px;
background:#141313 url(http://3.bp.blogspot.com/_xfdD6S9fOk4/Sl6f0c4BBSI/AAAAAAAABhY/F2zoq7Zhxgg/s1600/twitop.jpg) no-repeat;
width:335px;
}
#twitter_div{
width:333px;
float:left;
height:100%;
padding:0px 0px;
margin:0px 0px;
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
font-family:Tahoma,Century gothic,verdana, Arial, sans-serif;
}
ul#twitter_update_list{
list-style:none;
padding: 0px 0px;
margin:0px 0px;
}
ul#twitter_update_list li{
font-size: 11px;
list-style:none;
padding: 5px 5px;
margin:0px 0px;
line-height:18px;
background:#B5D3DD url(http://2.bp.blogspot.com/_xfdD6S9fOk4/Sl6fcQZI99I/AAAAAAAABhI/FLFxWOLf-4U/s1600/twit.jpg) repeat-x;
border-bottom:1px dotted #ccc;
color:#222;
}
ul#twitter_update_list li:hover{
font-size: 11px;
list-style:none;
padding: 5px 5px;
margin:0px 0px;
line-height:18px;
background:#dcdcdc url(http://3.bp.blogspot.com/_xfdD6S9fOk4/Sl6f0AX6X-I/AAAAAAAABhQ/4rR0t3qHWX4/s1600/twith.jpg) repeat-x;
border-bottom:1px dotted #ccc;
}
#twitter_update_list li a:link, #twitter_update_list li a:visited{
color:#D3116D;
}
#twitter_update_list li a:hover{
color:#BC0C0F;
}
5. Now copy the code below:
<div class='twittop'>
</div>
<div id='twitter_div'>
<ul id='twitter_update_list'/>
</div>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/daniellikin.json?callback=twitterCallback2&count=5' type='text/javascript'/>
</div>
<div id='twitter_div'>
<ul id='twitter_update_list'/>
</div>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/daniellikin.json?callback=twitterCallback2&count=5' type='text/javascript'/>
6. And then, paste it here:
<div id='sidebar-wrap'>
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
Paste the code here!
</div>7. Now save the template and see the result
Are you interested about other Twitter gadgets? Stay tune in this blog! Good luck bloggy!
