Adding LeftyBlogs’s BlogWire to a Sidebar
Submitted by webmaster@yamhi... on Thu, 03/22/2007 - 06:00.
How to add a blogwire. At Yamhill Democrats we used "LeftyBlogs". Go to URL and fill it out and after you click, they will give you HTML code to use. Creat a Block -- we did "YCD Blogwire" and paste the code in. Set which (left or right) sidebar you want it in, and what position. Since it is a bit long, we put it at the bottom.
To configure LeftBlogwire, here is their information on the CSS used to style it:
Optional Stylesheet (for CSS pros):
Feel free to style the BlogWire any way that you like. We only ask that you display all the elements. The header is in an H2 tag, the powered-by line is a paragraph, and the rest is a UL with LI items. The whole thing is wrapped in a DIV with id=blogwire.
Optional Stylesheet (for CSS rookies):
Once again, you should probably try the BlogWire without any additional style stuff. It'll use your existing styles for headlines, lists, and links. But, if you want to give it a particular style, just start by pasting this empty stylesheet shell into your blog (anywhere you want).
<style type="text/css"> #blogwire { } #blogwire h2 { } #blogwire ul { } #blogwire li { } </style>
Of course, that won't do anything. You'll want to give the various elements some style. Here's some options. Just copy and paste 'em in. Feel free to mix-and-match and customize (but know that if you tell it contradictory things, you'll cause havoc.)
#blogwire {border: 1px solid black;} a border around the whole thing
#blogwire {border: 2px dashed black;} a dashed line around the whole thing
#blogwire {background: #999999;} a gray background
#blogwire {background: #ffffcc;} a pale yellow background
#blogwire h2{font-size: 22px;} a real big header
#blogwire h2{color: #0000ff;} a blue header
#blogwire h2{text-transform: uppercase;} an ALL CAPS header
#blogwire ul{margin: 0px; padding: 0px;} no inset for the bullets
#blogwire li{list-style-type: none} no bullets at all
#blogwire li{margin-bottom: 1em} line spacing after each item
#blogwire li{font-size: 9px} tiny text
#blogwire li{font-family: verdana} change the font
You get the idea. There are great cheat sheets for CSS and colors around. If you don't like the ones I've linked, try here. This CSS stuff is something you should know anyway.
<style type="text/css">
#blogwire h2
{
}
#blogwire ul
{
padding: 0px;
margin: 0px 0px 0px 10px;
}
#blogwire li
{
list-style-type: none;
margin-bottom: 1em;
font-size: 10px;
}
</style>