SPONSORED LINKS

Twitter Status Display Widget Blogger Tutorial

ADVERTISEMENT
Twitter Status Display with Blogger How-ToI receive many inquires on how I created my 'latest tweet' display on this blog. To pose an answer to those inquiries I have not only written a step by step tutorial on creating a custom Twitter status display widget to display your latest tweet in Blogger, but I have created several free Twitter status display images to go along with the step by step tutorial

In all there are seven Twitter status display image styles to choose from, and that's a good place to start: choosing a Twitter status display. Examples of each Twitter status display image and it's associated styling are shown below.


Step 1

Choose and download the background image associated with the Twitter status display you would like to implement, click the link reading, "Download Image," and upload it to your image host. (Picasa, photobucket, and so on).




» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #77595c;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}

a#twitter-link {
float : right;
padding : 0 25px 0 0;
float : right!important;
text-align : right!important;
padding : 0 25px;
}

#twitter_div a, #twitter_div a:visited {
color : #ea3c6f;
}

#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #77595c !important ;
}



» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #624e5b;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #ff5f9d;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #624e5b !important ;
}



» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #6c5e57;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #4d9b96;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #6c5e57 !important ;
}


» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #6c5e57;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #4d9b96;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #6c5e57 !important ;
}


» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #2f2f2f;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00c5dd;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #2f2f2f !important ;
}



» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #000000;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00aeef;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #000000 !important ;
}



» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #3c3c3c;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00b196;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #3c3c3c !important ;
}



Step 2

Copy the CSS in the grey box below the style of your choice, and replace YOUR_IMAGE_URL with (drumroll) the URL to the your uploaded background image, and paste this CSS into your template above,
]]></b:skin>

Step 3

Next, replace the pink text, TWITTER_ID with your twitter ID in the Twitter timeline script shown below, and paste this at the bottom of your template, above the tag,
</body>

<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/TWITTER_ID.json?callback=twitterCallback2& amp;count=1' type='text/javascript'/>

*Note there is a space between the & symbol and the text that follows. You will need to delete this space upon pasting into your template or else it will not work.

Step 4

Before saving your changes, preview your template. If your template looks the same/normal, then click Save.

Step 5

Now for the fun part, the Twitter display itself! Where you would like your Twitter status display to appear, select "Add a New Gadget," and choose an "HTML/JavaScript" gadget from Layout. In the "Content" field of the new gadget, copy and paste the code shown below. Be sure to replace the pink text TWITTER_ID with of course, your actual Twitter ID. Again, with no @ symbol, just your user-name. Save your new gadget, and view your blog. Your twitter status update or updates should now appear on your blog where you have added the new gadget.

<div id='twitter_div'><ul id='twitter_update_list'></ul><a href='http://twitter.com/TWITTER_ID' id='twitter-link' title='follow me!'>follow me!</a></div>

If you use this tutorial or one of these Twitter status display badges on your blog, please comment below and let me know how it has worked for you. Feel free to ask if you need any assistance with this as well.

Love
Labels: , , ,
Permalink: Twitter Status Display Widget Blogger Tutorial
blog comments powered by Disqus
ADVERTISEMENT
nymphont
fg
I'm Lauren, self-proclaimed "dweeb," and "the coolest person I know." Single mom, making fonts & designing stuff in my free time.

What began as doodling Fraktur during class, as an adult became focused creation of typographic art for print and for screen, including this digital type experiment I call "Nymphont."

I do freelance web and graphic design along with type design. The icons below link to social networks and bookmarking sites that I am involved with.

From the fabulous Las Vegas, Lauren "Nymphont"

connect with me
Blogger | del.icio.us | deviantART | digg | flickr | StumbleUpon | twitter
MyFreeCopyright.com Registered and ProtectedDesign, HTML, CSS and graphics by Lauren Thompson, 'Nymphont' © 2009 - 2016. Don't copy or steal my shit. Archive & Table of Contents | Contact | Privacy Policy. Powered by Blogger! Seen on Bloggers.com
^