Friday, January 11, 2008

Blogger Hack: Before I begin...

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!

2 comments:

Jack Payne said...

I wrote a book, Shoestring Marketing Guide, in the 1970s. Was just wondering if this is one of the books you read.

Catherine McDiarmid-Watt said...

Yes, I am pretty sure I read that one. I got all my books from the library, so didn't make you a sale, sorry, but yours was definitely the type of book I was reading back then.

It's great to "meet" the author, who helped me make my BTL business a success, after all these years!