I really liked this widget, and found it easy to install, once I figured out why it wasn't working!
From Blogging To Fame - Bloggers Bread :
Post Rating Widget for Blogger
I will show you how to install Post Rating widget to your blog. The Simple steps given below will install this beautiful widget easily. Below is the screen shot of this widget
I want to change my Pregnancy Stories blog to three columns - Blogger Hack: Three Columns, Any Browser, but before I do, I need to retrace my steps and find the previous blog hacks I used, which will be deleted when I change the template to Minima to begin. So...
♦ First, the meta tags hack:
Blogger Title & Meta Tag Keyword ,Description hack - Blog SEO Tip
Some easy mods to optimize the Meta tags for Keywords, Description, Title and even customize for the Index page, post page and archive !
♦ Next, I added a picture to the header, and then moved over the words to the right so they were clear of the picture, by changing the header description margin - I added 300px at the end:
#header .description {
margin: 10px 5px 5px 300px;
♦ To create more white space between the main posts and the sidebars, I went to Add or Remove Borders in CSS Templates:
Scroll to where you see this and change or insert the code (shown in red):-
.post {
border:1px dotted #ff00ff;
padding:1.5em;
}
We have included a padding to give some space between the contents and the border. Without this padding, the text will be too close to the border.
♦ Had an idea, I wanted the background of the posts to be different than the rest of the page, so I went back to this and added:
.post {
background:#ffFFff;
padding:1.5em; }
♦ Then I added the label tabs - Tabs are in place!:
changing the background colour to match the page:
#tabsB {
float:left;
width:100%;
background:#FFFFe6;
♦ To place the label tabs below the Header, I changed this showaddelement to "yes", and dragged the new label Page Element there:
div id='crosscol-wrapper'
b:section class='crosscol' id='crosscol' showaddelement='yes'
♦ To move around all the Page Elements, the "maxwidgets" & "show elements" must be set to "2" & "yes".
There is one in the header:
b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'
And the main wrapper:
div id='main-wrapper'
b:section class='main' id='main' showaddelement='yes'
/b:section
♦ Next adding FeedFlare to the footer - Paste the code just below
div class='post-footer'
or just above:
p class='post-footer-line
♦ To place the tiny pic next to the title of each post, I added the following between a expr:href='data:post.url' and data:post.title/:
img src='http://www.borntolove.com/tn_golden_egg2.jpg' style='border-width:0px'/
Hopefully that's all the changes I made, and I won't lose anything important as I begin the transformation!
This is so simple to do! I thought it would be hard, confusing and frustrating. But I found the initial info on Blogger Widget and Tips-Tricks, and then made a few changes to make it work for any brower size.
First I switched my test blog to the Minima template. Followed each of the steps in his post. Then I made some changes to his additions:
Step one:
#sidebar-wrapper {
width: 220px; (I changed 220px; to 25%;)
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Step Two:
#newsidebar-wrapper {
width: 220px; (I changed 220px; to 25%;)
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Step Three:
#outer-wrapper {
width: 850px; (I changed 850px; to 100%;)
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
Then I found & changed the following:
#main-wrapper {
width: 410px; (I changed 410px; to 46%;)
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
and also:
#header-wrapper {
width: 660px; (I changed 660px; to 90%;)
margin:0 auto 10px;
border:1px solid $bordercolor;
}
and finally:
#footer {
width:660px; (I changed 660px; to 100%;)
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
It's perfect! Now to try it here on this blog...
It took me 5 DAYS, thanks to Blogger server problems, but I finally have the tabs up and working!
I used to have the tabs up on my Pregnancy Stories blog, and found people used them all the time, according to my stats on Statscounter.com. But when I updated the blog, I didn't know how to make them work in the new Beta Blogger, so deleted them. Right away, I noticed the difference, even though I provided text links at the top of the sidebar column.
But there have been many days of information overload, and I kept putting it off as too much work. Finally, looking at Horatio's blog, I realized that he had a new updated version for Beta Blogger, and decided to put them on here to test it out.
What an ordeal it became! Most of it was because of Blogger server problems - every time I tried to preview or save, I got error messages that it couldn't. Took me 5 days to finally save the last step. But it works like magic once it's done. I've added them back to the Stories blog as well.
The only thing I didn't like, was that there was no way to match up the background colour to my blog background colour, or to make it transparent. So I went back to Horatio's blog to see if he had any ideas?
What do I find? He has yet ANOTHER update to his tabs hack! Maybe in a few days I will tackle that one...
So, since the Page Elements don't seem to work for Adsense (see Don't trust Blogger Page Elements! ), I had to figure out how to add my Adsense ads between my posts, since that's supposed to be the best placement for them.
A quick search of the Blogger Help Group , found the Blogcrowds article Insert Google Adsense Into Blogger XML Post Body, and a handy-dandy HTML Parser to make the Adsense code work in HTML
Thanks Stavanger!
