Nymphont

Showing posts with label downloads. Show all posts

Lummoxie Template with Comment Replies

Lummoxie Template Update with Reply Comments

Retrofitting the Lummoxie Template with Blogger's threaded comment system has been a few months in coming, but no one is counting, right? [Gulp] I don't want to dwell on this... To make haste as our more punctillious brethren might do, and by that I mean to get to the point, seems a bit more appropriate.

And the point is of course, that the Lummoxie template has been updated and retrofitted with Blogger's comment reply functionality.
Lummoxie Template Retrofitted with Blogger's Threaded Comments

Lummoxie Template Retrofitted with Blogger's Threaded Comments

A second notable improvement is the restyled PageList/LinkList widget which now accommodates new line wrapping or longer link links.
Lummoxie Template PageList Line Wrapping

Lummoxie Template PageList Line Wrapping

The Updated Lummoxie Blogger Template

→ View Demo | ↓ Download Template

Template Basic Features

2 column liquid/fluid layout, all sections "widgetized" or "gadget-ready"
2 column footer, also gadget-ready/widgetized
Supports Blogger Dashboard editing tools, easily change fonts and colors in practically all areas of the template via the "Template Designer," within the "Advanced" subcategory.
Functional search included. Search box image included, it is stored in my photobucket.com account which allows generous direct linking bandwidth. However, users who have access to an image host are advised to upload it to their own server, as the bandwidth could potentially be exceeded in the future. (Image also included in the zip download for convenience.)
Title setup optimized and corrected for better SEO.
Wireframe setup for easy gadget/widget managing
Fancy fonts a la Google Font API
Customized and easy to use "read more" feature using Blogger's "Page Break" feature
"Calendar Style" post date. Set up instructions in this post.
Embedded comment form below post, with threaded comments enabled to boot :D

Equipped the horizontal navigation bar with new-line wrapping, allowing for multiple lines of links / more links / longer link lists. Usage instructions in this post.

Basic Set Up & Instructions

This template is fully functionional immediatly, ensuring optimal performance necessitates one specific setting in the dashboard (for the calendar style post date) which is explained in the premier Lummoxie Template post here, along with additional and advanced editing details.

* The link back to http://www.nymFont.com must not be removed * Do not impose charges or a fee for these templates * Do not add links and redistribute * Modifications allowed so long as the link back is not removed * Do not link directly to my files, but to my template posts to share

I hope existing users and new users alike are pleased with the updates to the Lummoxie Template. Though I can't personally assist various aspects of implementation & customization of the template, I welcome your feedback on the template.

Making yet another stride in my goal to modernize of all of my free Blogger template designs and retrofit them with threaded comments, the new "Nymphont Style," template is up-to-date and ready for your blogging pleasure. I do hope the updates are pleasing to those stylish bloggers' already sporting a version of the template, and to those who might like to as well.

Modernization of the code and a little streamlining to the aesthetic make for the more inconspicuous changes in the new template, while major renovations to speak of include the threaded comments, which have been enabled, new-line wrapping capabilities in the horizontal LinkList and PageList widgets, creating the design and giving style to Blogger's Jump-break ("read-more," or post-summary links), and also the ability to add Blogger's share buttons to the post-footer. Yay!

« Enabled Blogger's Threaded Comments

A sample comment and threaded-reply from the demonstration blog is shown in the above screen-capture.

Since their debut, share buttons have been the most requested template feature I have received by far, and Blogger's threaded comments have recently become the second most requested feature I have received. I am stoked to get both of these tasks accomplished for those that asked, whom, I would like to add, have been beyond patient! The new "Nymphont Style," template, and all of my planned template-updating would be impossible if it were not for your feedback, suggestions, and kindness. Thanks so much Blogger enthusiasts!

« Restructured & Redesigned Post-Footer

The pink text given the thin pink border shown in the image above depicts the default style for a Jump-Break (read more/post summary link) in the new template. Also visible in the above image, Blogger's post sharing buttons in the new "Nymphont Style" template's post-footer.

To accommodate the newly implemented Blogger share buttons and Jump-Break (Blogger's read more/post-summary link), the post-footer underwent a little restructuring. Akin to all other areas of the template, individual color options for the border and text color are provided for the Jump-Break link in the Template Designer's "Advanced," editor.

« Horizontal Nav/PageList New-Line Wrapping

The horizontal navigation bar utilizes either a LinkList or a PageList widget to function, and accommodates more items (the links) than the previous version. Items that are unable to fit within the first line will handsomely wrap onto and become a corresponding new-line, as the links do in the image example shown above. The new-line wrapping permits the LinkList widget or PageList widget used to accommodate lists containing only a few items or links, to those containing many.

Another improvement in the new "Nymphont Style," template has been made to the sidebar's "blog sharing icons," which are "hard-coded," into the template. Now even easier to modify, remove, or hide, these icons are located in the template code between starting caption:

and ending caption:

in the template code. Just below this in the template, you will also find the code for the search form.

« Blog Sharing Icons & Search Feature

Working immediately requiring no effort on the user to implement, the sidebar boasts social network icons for which to share your blog, along with a blog search utility.

To remove the sidebar's blog sharing icons, beginning with the "starting" caption, and ending after the "ending," caption, select the text, delete it (cut it), and save the template. In their absence, the search-box will then handsomely align to the center of the column. Additionally, the sidebar icons can be "hidden" by adding:
.share {display:none;}
to the template CSS, just above the following line:
]]></b:skin>

In the same manner the sidebar sharing icons can be removed or hidden, the search-box can also be removed by deleting it from the template code directly, or adding this line:
#searchbox {display:none;}
to the template CSS, above the following line:
]]></b:skin>

« Bold & Italic Settings for Fonts and Text

Font and text style definitions added to the "Advanced," editing options within the Template Designer allow for a much more pleasing visual to text.

Another seemingly less-conspicuous yet substantial improvement in new "Nymphont Style," template, has been the addition of Bold and Italic font definitions to the "Advanced," editor of the Template Designer. Seemingly would be the emphatic word in there, as these new definitions allow the user to set a specific font-face and style to italicized text and bold text. This means, any time the user selects texts within a post to appear bold or italic, it will be styled as per their definitions set within Template Designer's "Advanced," editor.

Simply styling bold and italicized text the right fashion can have an incredible impact on the blog's typography, substantially improving it's presense and readability.

The New "Nymphont Style"
Blogger Template

→ View Demo | ↓ Download Template

Template Basic Features

2 column fixed width layout, the second column allowing optional narrow-third column, all sections "widgetized" or "gadget-ready"
3 column footer, also "widgetized"
Horizontal navigation utilizing either the PageList widget or a LinkList widget
Template Designer, "Advanced," editing enabled encompassing the font and color selections for most if not all areas of the layout.
Working immediatly, the images are included and I will continue to maintian them, however, users are advised to download the images, upload them to their own server, and then replace the image links with their own as the bandwidth could potentially be exceeded in the future. Images can be downloaded from the Nymphont Style TinyPic folder. I have written a post and created a page with specific instructions on how to replace the images in your template on the demonstration blog.
Title setup optimized and corrected for better SEO.
Embedded comment form below post, with threaded comments enabled to boot :D
Functioning social network icons in the top right sidebar. Your blog's data is reflected once uploaded, so they do not require editing. These allow visitors to your blog to easily submit, share, and save your blog.
Functioning search form for searching the blog contents.
Wire-frame setup for easy wigetizing and adding, removing and changing gadgets
Equipped the horizontal navigation bar with new-line wrapping, allowing for multiple lines of links / more links / longer link lists
Blogger Jump Break / expandable post / post summary links styled and customized.

* The link back to http://www.nymFont.com must not be removed

* Do not impose charges or a fee for these templates

* Do not add links and redistribute

* Modifications allowed so long as the link back is not removed

* Do not link directly to my files, but to my template posts to share

Special thanks to my kind visitor MamaMona who commented with her interest in Nymphont Style hence helping it come to fruition. Thanks again to all of the sweet Blogger enthusiasts using my templates and sharing their thoughts on them. Stay tuned my friends, another updated template will be coming this way very soon. ♥

Hot off the presses, new and improved HautePress templates are available. That's right, templates, plural. HautePress now comes in a 'sidebar right/main content left' orientation as well as the reverse.

« Threaded Comments Enabled

In what might be the biggest and the best of the improvements to HautePress, is the enabling of Blogger's threaded comment system. An example comment and comment reply shown in the image above.

« New-line Wrapping in PageList Widget

PageList new-line wrapping demonstration

The preceeding screencapture illustrates how I have designed and coded the PageList widget to handle new-line wrapping. New-line wrapping will now neatly wrap additional line items in the PageList widget. In the earlier version of HautePress, new-lines would overlap, limiting the number of links to what could fit the width of given a browser.

**Important Note Regarding PageList Widget:
To rearrange order of items in the PageList widget, use the widget-edit icon on the actual live blog, do not use the Pages tab in the dashboard.

How to specifically: View your blog, and click the wrench icon located to the bottom right of the PageList widget to access items for reordering and rearranging. (Use the Pages tab as normal for the initial adding of pages or links, and editing of pages.)

« Post Sharing Buttons

Offical Twitter, StumbleUpon, Facebook, and G+ sharing buttons now in place. These buttons are located between  and  of the 'widgets expanded' template code should you like to modify them.

« Additional Updates of Note:

Replaced the previous image-dependent search feature with a new HTML and CSS only search feature, with Template Designer color options
Fixed the header image settings for the Header widget. Adding a header image using the Header widget on the layouts tab is now much more efficient. Options for placing an image behind the title and description, and for using an image instead of the title and description are working, and the option to have description display after the image only requires one additional edit to the template code in order to display correctly, in the case that any editing is necessary at all.
Organized and added new options to the Template editor for customizing fonts and colors
Streamlined design and coding throughout along with subtle changes to (border sizes/colors and what not)
Two new background image options available. (Did anyone notice the background difference?) To view the new backgrounds as well as the original visit the HautePress Photobucket album.

« Basic Template Features:

"Responsive"/Fluid width, two columns, in either sidebar left/content right or sidebar right/content left orientations with a two column footer, all sections "widgetized" or "gadget-ready"
Dynamic linkbar menu and PageList widget
Supports Template Designer, "Advanced," font and color editing tools.
Working immediately: background image included; however, users are advised to save and upload the image to their own server, as the bandwidth could potentially be exceeded in the future. Images can be downloaded or directly linked to from the HautePress Photobucket album.
Title setup optimized and corrected for better SEO.*
Wireframe setup for easy gadget/widget managing
Threaded comments enabled with embedded comment form below post
Functional image-less search box included
Fancy fonts a la Google Font API
Customized and easy to use "read more" feature using Blogger's "Jump Break" feature
"Calendar Style" post date*

*Format Date Header:

From Settings, select "Language and Formatting." For the "Date Header Format" choose "DD Month YYYY" style, (two digit day, name of month, four digit year with no commas) and then select "Save Settings." Be sure the format chosen has no commas, or else it will not display correctly.

Posts published on the same day will display a blank post date (just an empty grey box) because of the calendar style date set-up. At present there is no way around this (that I know of), so remember to select a different date with the "Post Options," if publishing multiple posts on the same day.

HautePress Version 2-1

Sidebar Left/Content Right Orientation
View Demo | Download Template
HautePress Version 2-1: Sidebar left/Content Right Orientation

HautePress Version 2-2

Sidebar Right/Content Left Orientation
View Demo | Download Template
HautePress Version 2-2: Content left/Sidebar Right Orientation

* The link back to http://www.nymFont.com must not be removed

* Do not impose charges or a fee for these templates

* Do not add links and redistribute

* Modifications allowed so long as the link back is not removed

* Do not link directly to my files, but to my template posts to share

I hope you like the new and improved HautePress. Feel free to leave a comment with your thoughts below, or if you need any assistance. More templates updates with threaded comments enabled coming soon, so stay tuned! ♥

The namesake of the series I am creating, Lummoxie harkens a fresh and new perspective with simplicity, style, and functionality.

Hallmark aspects of the Lummoxie template are it's "liquid" layout, navigation utilizing Blogger's PageList widget, and a post summary option employing Blogger's "jump break," feature for starters. In addition, save for the (one) search box image, Lummoxie is an image-less template; all fonts and colors may be customized via the Template Designer

Lummoxie

XML Blogger Template
By Lauren Thompson

*Notice July/20/12:
→This template has been updated.

→Visit the updated post for the new download

Features

2 column liquid/fluid layout, all sections "widgetized" or "gadget-ready"
2 column footer, also gadget-ready/widgetized
Optional and customizable menu/linkbar with "dynamic" highlighting of current page, utilizing Blogger's new PageList widget feature. Super easy to use and customize, details below.
Supports Blogger Dashboard editing tools, easily change fonts and colors in practically all areas of the template via the "Template Designer," within the "Advanced" subcategory.
Search box image included, it is stored in my photobucket.com account which allows generous direct linking bandwidth. However, users who have access to an image host are advised to upload it to their own server, as the bandwidth could potentially be exceeded in the future. (Image also included in the zip download for convenience.)
Title setup optimized and corrected for better SEO.
Wireframe setup for easy gadget/widget managing
Embedded comment form below post
Functional search box included
Fancy fonts a la Google Font API
Customized and easy to use "read more" feature using Blogger's "Page Break" feature
"Calendar Style" post date

terms*

* The link back to http://www.nymFont.com must not be removed

* Do not impose charges or a fee for these templates

* Do not add links and redistribute

* Modifications allowed so long as the link back is not removed

* Link to my template download posts, not my files to share

Top Navigation / PageList Widget

The Page List Widget has been customized to fit the template and comprises the top navigational links. Page links will be automatically added, and other additional links can be added via the pages section of the Blogger dashboard.

Navigation offers "dynamic highlighting" of the current page, i.e. the current page is "highlighted" automatically.

Post Summary Option

No scripts are necessary in using the read more feature on this template, as it utilizes the in-place "jump break" feature in Blogger. Simply add a page break when and if you would like a post to be summarized.

Setting Up Calendar-Style Post Date

The correct Date Header format must be selected in order for the post date to display correctly. From the Dashboard > Settings > then Language and Formatting. From the "Date Header Format" select "DD Month YYYY" style, (two digit day, name of month, four digit year with no commas) and then select "Save Settings." Be sure that you select the format with no commas, or else it will not display correctly.

Posts published on the same day will display a blank post date (just an empty grey box) because of the calendar style date set-up. At present there is no way around this (that I know of), so remember to select a different date with the "Post Options," if publishing multiple posts on the same day. I have to do this myself with this blog actually.

Additional Details

At this time I am having difficulties with Bloggers post sharing buttons so they are turned off in the template, and it is advised that users have them "turned off" as well. I apologize for this, and I am working on it.

Please do feel free to share your thoughts on this template!

Features

2 column liquid/fluid layout, all sections "widgetized" or "gadget-ready"
2 column footer, also gadget-ready/widgetized
Optional and customizable menu/linkbar with "dynamic" highlighting of current page, utilizing Blogger's new PageList widget feature. Super easy to use and customize, details below.
Supports Blogger Dashboard editing tools, easily change fonts and colors in practically all areas of the template via the "Template Designer," within the "Advanced" subcategory.
Images included, you do not need to upload the images to your own server, they are stored in my photobucket.com account which allows generous direct linking bandwidth. However, users who have access to an image host are advised to upload them to their own server, as the bandwidth could potentially be exceeded in the future. (Images are now also included in the zip download for convenience.)
Title setup optimized and corrected for better SEO.
Wireframe setup for easy gadget/widget managing
Embedded comment form below post
Functional search box included
Fancy fonts a la Google Font API
Customized and easy to use "read more" feature using Blogger's "Page Break" feature
"Calendar Style" post date

terms*

* The link back to http://www.nymFont.com must not be removed

* Do not impose charges or a fee for these templates

* Do not add links and redistribute

* Modifications allowed so long as the link back is not removed

* Link to my template download posts, not my files to share

Post Summaries Feature

No scripts are necessary in using the read more feature on this template, as it utilizes the in-place "post-break" feature in Blogger. Simply add a page break when and if you would like a post to be summarized.

Setting Up Calendar-Style Post Date

Have no fear, I promise setting up the post date is easy-peasy-lemon-squeezy. Go to Dashboard > Settings > then Language and Formatting. From the "Date Header Format" select "DD Month YYYY" style, (two digit day, name of month, four digit year with no commas) and then select "Save Settings." Be sure that you select the format with no commas, or else it will not display correctly.

Posts published on the same day will display a blank post date (just an empty grey box) because of the calendar style date set-up. At present there is no way around this (that I know of), so remember to select a different date with the "Post Options," if publishing multiple posts on the same day. I have to do this myself with this blog actually.

Additional Details

The only images in the template are the background image and the searchbox image. If you do have access to your own image host, you might want to host the images at your own server. Replace image URL's in the code with the corresponding URL's at your server. Images are also now included in the zip download for convenience. Feel free to contact me or leave a comment if you need assistance replacing the images.

At this time I am having difficulties with Bloggers post sharing buttons so they are turned off in the template, and it is advised that users have them "turned off" as well. I apologize for this, and I am working on it.

Please do feel free to share your thoughts on this template in a comment! If you need any assistance with this template, feel free to leave a comment below. I hope you like it!

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

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» 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 ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» 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 ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» 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 ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» 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 ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» 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 ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

» 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 ;
}

You know we love us some custom Twitter status display badges for Blogger! less than a minute ago

» follow me!

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

Twitter Sweet

Download Icon Set

I'd like to re-iterate that these icons are free to use commercially and personally, with no attribution link required. I did draw the twitter bird myself, so please do not claim these icons as your solely own art, and please do not redistribute these icons yourself, but refer downloads to this page please. Thanks!

I appreciate your thoughts and feedback on these icons, so please do leave yours in a comment!