tips,tricks and hacks: August 2007

Sunday 26 August 2007

Pretty up the "Business End" of Your Post!

I just wanted something pretty in all that Posted by, Comments, Permalink jumble at the end of the posts. A tiny little image is just the thing.

Make or find a small image about 10x10px. Bullets work great for this purpose. Open the Dashboard | Template | Edit HTML.

Locate the CSS style sheet:
Classic Blogger: between the <head> and </head> tags
Blogger Beta: between <b:skin><![CDATA[/* and ]]></b:skin>
Find:

.comment-link {
margin-left:.6em;
}

And add two lines to make it look like this:

.comment-link {
margin-left:.6em;
background:url("URL TO YOUR IMAGE") no-repeat 0 .20em;
padding-left:13px;
}

Make sure to save your template. Now all your posts will have your very own little pretty image!!

EDIT: Thanks to the work of 16 Them All here is the additional code to make the image show on your Permalink page!!!

Same as before, locate the CSS style sheet:
Classic Blogger: between the <head> and </head> tags
Blogger Beta: between <b:skin><![CDATA[/* and ]]></b:skin>
Find this code (yours may look slightly different due to a different style):

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

and add two lines to it to make it look like this:

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
background:url("URL TO YOUR IMAGE") no-repeat 0.05em;
padding-left: 18px;
}

Now the image is on your main page and permalink page!

post signature

Add an Image as a Clickable Link (From My Inbox)

My question today, is how I can add small pictures which link to other websites ('badges', I think they call them) to my blog - there are a couple of links that I would like to have on there to show my support for some other websites and organisations and things but all I seem to be able to do is to either add another picture or else add a link list ... no way to add a badge/picture that is a link

This is a simple piece of code that makes any image, button or badge an active link.

<a href="URL OF TARGET LOCATION" >
<img src="URL OF IMAGE"></a>

This is an example of how to put the BlogU chicklet in a sidebar or post:

<a href="http://www.bloggeruniversity.blogspot.com" >
<img src="http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a>

You'll notice that I have added sizes to the example code. That is to help the browser load your page quicker.* To find the size of an image, right click on the image and chose to View Image. This will open a new window with your image. The dimensions are on the top title bar.

*For more information on making your page load faster, take a look at How to Optimize Web Pages for Faster Loading

EDIT 06/07/08: A nice tip from AceK - It's a good idea to put the alt tag IE alt="name of picture" in case pic is unavailable, text will show instead of just an x. You can also use the code below to prevent the blue border spoiling the picture.
border="0"

post signature

Saturday 18 August 2007

U Comment I Follow

OK, folks. Why didn't someone tell me there was a movement in the blogosphere? I get sidetracked with my move to Florida, and someone started a cause. I love a cause. Any reason to get on my soapbox.

Turn off “nofollow”. Show your commenters that you appreciate them.
Randa Clay Design

This one is worthwhile for all concerned. It involves link love and Google Juice. I've heard of link love, but Google Juice is a new one for me. Anyway, this movement allows comment links to be followed by search engines. Simply beautiful.

Originally, nofollow was created to stop comment spam. That didn't exactly work as planned. Spam still happens. And the only thing nofollow has stopped was link love.

Want to join the movement? First stop is Randa Clay Design to pick out your new badge. All good causes have a badge. This is no different. Here is the one I picked for my sidebar. Go on...pick out a purty one.

post signature

Next step is to remove the offending code from your template. Find the following code in your template and remove the code in red.

Blogger Beta (with widgets expanded):

<dl id='comments-block'>
<b:loop values='data:post.comments'var='comment'>
<dt class='comment-author'expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" +data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

If spam still concerns you, enable comment moderation. Problem solved.

EDIT 08/24/07: It was drawn to my attention by a reader, Laila, that I removed too many >'s from the code. I corrected the code in Blogger Beta, so what you see now is correct. But, I couldn't find a way to remove it from Classic Blogger to my liking. In doing more research, I found this post that states:

"It is impossible, at this time, to remove NoFollow from Classic styled Blogger templates. This is due to the fact that those templates use the variable {$CommentAuthorName$} which encapsulates the anchor link around linking text."

Until I find a good solution, I am removing the portion of the post concerning Classic Blogger. Thanks, Laila, for making me look into it more!

post signature

Tuesday 14 August 2007

Group blogs: different color posts (From my inbox)

Could you tell me how to have different colours for different posters in a group blog.

Susan, I figured it out!! There are a couple of points to keep in mind.

Each group member will have a code to paste in their post. OR you can paste all the codes in Dashboard | Settings | Formatting | Post Template and then each member will delete all but their code when posting. (Personally, I would go with pasting all the codes in the Post Template. Just seems easier.)
Each member will have a correlating code in the CSS style sheet to address the code in the post. (It will all become clear in a moment...continue reading.)

First let's get the code into the CSS style sheet.

For Classic Blogger look for the <style> and </style> tags.
For Blogger Beta look for <b:skin><![CDATA[/* and ]]></b:skin> tags

Here is the code you will put between those tags.

#unique name {
margin:0px;
padding:0px;
background:XXXXXX;
color:XXXXXX;
font: 1.1em "Trebuchet MS",Trebuchet,Verdana,Sans-Serif; font-weight:none;
}

Items to pay attention to:

For each member using the blog, add this code to the CSS style sheet with a unique name for each member. If you have ten members, you will add this code ten times in your template, with ten unique names.
Assign a color to each member.
This changes the font color if you want. If you want the font color to remain the same through out the blog, delete this line.

Second you will assign the following code to each member to put in their post editor window(or, as I said above, you can paste all the codes in Dashboard | Settings | Formatting | Post Template and then each member will delete all but their code when posting.)

<p id=unique name> Write your post here. </p>

It is important to make sure that each member uses their unique name.

To summarize:

Each member will have a unique name (Joe, Jane, poster1, etc.)
There will be a code reflecting the unique name for each member in the CSS style sheet.
When posting, each member will have their code <p id=unique name>and</p> in the post editor and write their post between the tags.

That should cover it! All you groupies, enjoy!!!

post signature

Friday 3 August 2007

Double Vision Sidebar Titles (From my Inbox)

I was wondering if you've written about how to customize sidebar headings? Such as you've done with your very pretty Buttermilk Clouds ones? I'd love to do something similar.

Well, Debbie, I wasn't able to come up with a clean way to do this in blogger beta, but I did a work-around that isn't too bad.

First step:
Put this code in your CSS style sheet between <b:skin><![CDATA[/* and ]]></b:skin>

h3{
margin: 0;
font-weight: normal;
color: #d8f7af;
font-size: 3.2em;
position: relative;
}

h4{
margin: 0;
display: inline;
position: relative;
top: -.5em;
left: 2em;
font-size: 1.8em;
font-weight: normal;
color: #94c258;
}

Change the colors to fit your template. You can even adjust the size if you want. Play with it to get it just right. Save your template.

Second step:
Open your Dashboard | Template | Page Elements | Add A Page Element | HTML/JavaScript. In this box, you won't put anything in the Title box, but in the Content box you will add this code.

<h3>...SIDEBAR TITLE...</h3>
<h4>...SIDEBAR TITLE...</h4>

Of course, after your new sidebar title, add your sidebar content in the same box below the title.

If you are using a Classic Blogger template, it is easy to do this. Follow the first step by putting that code in the CSS style sheet between the <head> and </head> tags. Then follow the second step but paste that code in your template where the sidebar title is.

UPDATE 03/09/08: See A Double Vision Sidebar Title Fix (From My Inbox)

post signature