tips,tricks and hacks: January 2007

Tuesday 23 January 2007

Tweaking Permalink in Blogger Beta

Post Pages give each of your posts their own unique web page, in addition to appearing on your blog's front page. The advantage to that is your readers are able to link to this particular post.

Here is another good question from a reader, Shrish. He wondered if it is possible to take this hack,Tweaking Permalink in Blogger, and use it for Blogger Beta. To re-hash from that post, in blogger posts, if you hoover over the timestamp a small popup will come up that says 'permanent link'. Unless someone is familiar with all the fine details of blogger, they won't find this link. This is a disadvantage. But, you can easily add the text 'permalink' to that time stamp to Blogger Beta too. First you must open Dashboard/ archiving/ check: Enable post pages. Return to Dashboard/ Template/ Edit HTML/ check: Expand Widget Templates. Locate this code and insert Permalink (with a space in front):

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 comment<b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/> Permalink</a>
</b:if>
</b:if>
</span> <span class='post-icons'>

You can see how to do this on Classic Blogger here: Tweaking Permalink in Blogger

post signature

Sunday 21 January 2007

How to remove dotted border from links in Firefox

Here is an email from a reader, Alain, with a problem:

Hi Annie,

Thanks for all the valuable information on your blog. I'm a new blogger with no previous background in computer and programming and I benefit a lot from your blog. I have a minor problem with my Minima Stretch Template. I didn't know where to post my question on your blog so I have decided to email you.

Problem Description

When I use the Firefox browser (I don't have this problem with IE), my post titles and my various kinds of links are displayed with a dotted border when I click over them. I can't figure out the source of this minor problem. I have notice that other bloggers using the Minima Stretch Template also have this problem when I visit them with my Firefox browser but I don't experience this problem on your blog. I have checked your source code but I can't figure out what you have done in order to avoid this problem. Can you help me please?

This was my response. Add this to your CSS style sheet (which is the part of the template between the <head>and </head> elements that contain a lot of these { }) :

a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}

No more dotted borders!

To remove post image borders is explained in How to Remove or Change Image Borders

post signature

Saturday 13 January 2007

How to Remove or Change Image Borders

I simply have the best readers in the world! They are forever giving me ideas for new posts. This time a comment from Bulimic has prompted this post:

ok since we're on the subject of removing stuff, can you show us how to remove those image border everytime an image is uploaded with a post? Or maybe a way to change the color or even replace it with a photo frame image? would really appreciate your help ;)

To remove the border from around your image you must work with your CSS style sheet. That is the part of your template between the <head>and </head> tags. Keep in mind each template uses different terms, but look for something that looks similar to this:

.post img {
padding:4px;
}

or this:

img{
padding: 4px;
}

To those codes you would add this line:

border:0px;

That will completely remove that little border from your images.

On the other hand sometimes you want a nice border. But you want it your way. A few simple adjustments will take care of that.

This first method addresses Blogger Beta. (I really need to find a way to identify the new blogger vs old blogger.) Still working in your CSS Style Sheet, locate this code:

<Variable name="bordercolor" description="Border Color"
type="color" default="#cccccc" value="#cccccc">

Change the colors to the color you want. Then, further down in the style sheet, instead of adding border: 0px; add this:

.post img {
padding:4px;
border:1px solid $bordercolor;
}

You can change the solid to dashed or dotted. And change the width by changing the px size.

Working with Classic Blogger, add this to your CSS style sheet:

img{
padding: 4px;
border: 1px solid #94C258;
}

Once again you can change the color, size and style to dotted or dashed.

post signature

Tuesday 9 January 2007

Post a link in Comments

Have you ever been reading blogs and decided to comment? In writing your comment, you find that you need to post a link. Just how does one go about doing that? Well, it is fairly simple. This is the code you drop into the comment box:

<a href="URL">Title</a>

Replace the URL with the URL of the site you are linking to and replace the Title with the title of the site.

Easy as pie. Now get out there and comment!!!

post signature

Saturday 6 January 2007

Remove 'Header/Title' on label page

Another reader, Steve from CScreasteve was having a dilemma with the appearance of his label page. When clicking on a label a new page appeared with a 'header' that said :

| Showing posts with label |Some.Words|. Show all posts |

He wanted this header removed and couldn't find the area in the code to do it. With some digging around in the widgets we came up with this:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Remove the red code which leaves:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

All of the offending header/title should be removed now!

post signature

Thursday 4 January 2007

Button link

A reader just requested a method of adding a button link in her sidebar. There are a few things you'll need:

An image for your button
Load this image to your web host (I use Ripway)
Image URL (from the web host)
Target site URL

What to do:

Open your dashboard
G0 to layout
Click on 'Add Page Element'
Choose the 'HTML/JavaScript' widget
Paste the code below into the window
Give the widget a title like My Favorite Links and paste the following code into the window

<a href="Target site URL">
<img border="2" src="Image URL"/>
</a>

At this point you plug in your Target site URL and the Image URL. If you want more button links, add the above code in the same window changing the Target site URL and the Image URL. Save changes

Now you can drag the widget you just made to the area you want in your sidebar, or just leave it where it is.