How to Add a Twitter List Widget with a CSS Style?

Filed Under : Social Media, Twitter, Widgets

Hi bloggy readers,
In my previous post, i already showed you the tutorial in Adding a Twitter List Widget to Blog. But, did you know that, we could also modify the Twitter list widget by using some CSS codes and also a script to make a better looking twitter 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!

1. Log in to Blogger
Now visit Blogger.com and enter to Dashboard of your account.

2. Go to Edit HTML
After landing to Dashboard, go to Layout/Design > Page Element > Edit HTML to begin adding a twitter widget on your blog.

In editing blog template, there is first and important thing to do, which is to save your current template if later, you decide to revert back your blog template to the normal condition. Now press Download Full Template.

3. Find the code
To locate the specific code section in your blog template, now press CTRL + F at the same time and find the code below:

]]></b:skin>

4. Paste the new CSS style for the Twitter List Widget
Now block the CSS style below and press copy. After that, put that CSS before the code ]]></b:skin>. By adding the CSS below in your blog template, you are about to install the configuration of Twitter widget.

/* Twitter list widget

--------------------------------------------------------*/ 

.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;

}

5. Find the Code that defines the Sidebar Position in Blog Layout
Twitter list widget will be perfect if it's placed on the sidebar position. However, it's also great to put Twitter widget on other area in your blog layout. But, in this post, i will only show you how to embed Twitter list widget on the sidebar position. Now enter again the Find mode (Ctrl + F) and find the code that indicates the location of sidebar element in your blog template.

Rounders Template

<div id='sidebar-wrap'>

<div id='sidebartop-wrap'>

<div id='sidebartop-wrap2'>

<b:section class='sidebar' id='sidebartop'>

</div>

Minima Template

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

</b:section>

</div>

6. Copy the script code of Twitter widget
Now copy again the script code of Twitter list widget 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&amp;count=5' type='text/javascript'/>

As you can see in the script code above, the name daniellikin indicates the Twitter ID that we have registered for our account. So, you must firstly change the code daniellikin with your own Twitter ID.

7. Paste the Script code
And then, paste the script code of Twitter list widget (number 6 above) inside the code <b:section class='sidebar' id='sidebartop'> and </div>. Now take a look at the example below!

In your blog template, the script code of Twitter list widget should be placed just like the example below!

Rounders Template

<div id='sidebar-wrap'> 
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'> 
<b:section class='sidebar' id='sidebartop'>    
<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&amp;count=5' type='text/javascript'/>
</div>

Minima Template

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

</b:section>
<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&amp;count=5' type='text/javascript'/>
</div>

As you can see in the example above, the red codes indicate the script code of Twitter list widget that will need to be placed inside the sidebar area.

8. Save the Template
Now save the template and see the result.

If you can see a Twitter list widget on your blog, it means you have successfully installed the Twitter widget.Well, what do you think? Does it look great or what? Does the widget fits perfectly on your blog's sidebar? If it doesn't, feel free to leave me your question below, hopefully i can help you with that.

Share This Article to Other People Across the World !

Del.icio.us | Reddit | Stumbleupon | Technorati |

Thanks!

Get the fresh update from Whatmakesblog.com!

To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe. Your email address will not be shared to any third party

Delivered by FeedBurner