Twitter made a new widget for us to embed in our webpages/blogs. There is a page at the Twitter site where you can generate the required HTML in order to include it as a gadget in Blogger.
The issue is that if you just paste the generated HTML, the following problems will arise:
- Styles will not get applied to the gadget. It will look ugly on any browser.
- Your blog will show an error message when opening it in IE8 which will prevent the browser from fully rendering your page.
1 Go to http://twitter.com/goodies/widget_search and customize your gadget. If you just wanna show your tweets, type from:YourTwitterName in the "Search query" field.
Once you tested your settings, press the "Finish and Grab code" button. You will get the HTML for the gadget. Copy it to the clipboard.
2 Open Notepad or any other plain text editing application and paste the HTML. We are not going to use all of them to create our Blogger gadget.
3 Go to the Layout / Page Elements section of your blog.
4 Choose "Add a gadget" of type "HTML / Javascript". Type the title you want and in the content field paste the following line:
5 Now you will have to edit the HTML of your Layout to add the CSS styles and script. Choose Layout / Edit HTML.
6 Look for the "Body" style (near the top of the layout) and insert the following text in a blank line before it:
7 Go to the end of the layout, locate the "</body>" tag and insert the following text in a blank line before it:
8 Now switch to Notepad and copy to the clipboard the text between the <script> and </script> tags, including the tags themselves.
9 Paste the new script right after the script you inserted in step 7. Will look like this:
10 Save your template and you're done.
