Straw Poll - social bookmarks

What is your favorite social bookmarking service?
	BlinkList
	del.icio.us
	Furl
	Ma.gnolia
	RawSugar
	Simpy
	Spurl
	Shadows
	Google Bookmarks
pollcode.com free polls

I wanted to see where everyone stood on bookmarks, and what is the most popular. Sorry if I left out your favorite...just leave a comment.

BooksPrice.com

A new site was brought to my attention, and even though I receive several emails requesting a mention of their site, I thought this one might be of interest to many of you. Although it is not 'blog' related I'm passing it on. Who knows, it may help with gift buying this Christmas season.

Lucy, from BooksPrice.com, wrote "http://www.booksprice.com is a free service of finding the best price on books among the major online stores. Our real time price comparison can help you save as much as 60% from the retail price. At BooksPrice you can look for the cheapest price on new & used books, and also compare the price on a purchase of several books together."

So, being a skeptic, I checked it out. And sure enough, by running the author's name though their online search, I will save $10 from where I normally would of purchased it!

Take a look. If you are a reader, you will appreciate this service.

My New Obsession...Ma.gnolia BlinkList

I have realized something about myself in the last few weeks...I'm fickle. And I apologize for this. Why it took me so long to realize, I don't know. On the other hand, maybe I'm not fickle! Maybe I can just admit when I find a superior application. I believe the superior program I have found is BlinkList. I know I went on and on about Ma.gnolia in this post, My New Obsession... Ma.gnolia. Then one day I received this comment:

Mike said...

May I ask what made you go with Ma.gnolia vs. BlinkList? We are always hard at work on making our service better and better and I would greatly appreciate your feedback.

I left this response:

annie said...

@Mike, In all fairness, I have not tried BlinkList. It was brought to my attention a few days before your comment! I have been looking at it, and have an account. So, I will do a comparison to Ma.gnolia. What I have found so far that I like...the way it displays the links on a page. This seems faster than Ma.gnolia. I absolutely love the cloud and the fact I can display it on my blog. I will be looking into that, and it may be the deal breaker. I haven't looked much further...my time is getting away from me lately, but I will get into the goodies of BlinkList as time permits. Does it save the page as Ma.gnolia does, even if the page goes down? That is a feature that I like. Another feature Ma.gnolia has is 'Ma.gnolia Roots' which I find handy and fun, with the little badge displaying the number of times that page has been marked on your site. And, last, but not least, I love the easy feel of Ma.gnolia. The layout is easy on the eyes. BlinkList is close, but doesn't quite hit the "Zen-ness" of Ma.gnolia. I will look at them both, and decide which features are more important to me. I do feel that BlinkList is in the same ballpark as Ma.gnolia. It will be close.

I never received a response from Mike, which I didn't care for, since he said he would appreciate feedback. But, we all have a life, and perhaps his took over. After waiting for a response, I went ahead and tested BlinkList.

To answer to my questions...

• I don't think it saves the page as Ma.gnolia does - a feature I love, but may be only something to slow down the site. And BlinkList is much faster than Ma.gnolia. In the scheme of things, I would rather have speed over saved pages. If the page is that important, I usually copy it myself.
• I like the way the links are displayed on the page on BlinkList. There are more per page and you can readily see how many 'blinks' it has. A blink is when someone bookmarks that page.
• It does not have a feature similar to 'Roots' in Ma.gnolia. As cute as that is, it is really only a novelty...eye candy. I like the magnolia flower.
• I still don't believe it carries the Zen feel of Ma.gnolia, but it does not have a busy feeling either. It has a simple design that is intuitive and easy to move around in.
  

One feature it has that I absolutely love is the 'Cloud'. I can't help it. I love clouds. To me they are such a great way to get around. Now I have two clouds on my blog. One That is for BlogU labels only, and clicking on a word in the cloud will open a page with all the posts with that label. The other, which presently is located in my footer, is for all my bookmarks, and clicking on a word there will open a page with all my bookmarks labeled with that word.

OK. My vote is in for BlinkList. I have moved my bookmarks from ma.gnolia to BlinkList and am quite pleased with it so far.

Blogger Beta: Using Widgets for your Header

1977 left a comment on Customizing your Header: Add an Image with a little something he came up with. It is a way to add your header using widgets!

Here is what he did. Go to 'Template/Edit HTML'. Find the #header-wrapper <div> and change 'locked' value from true to false. (Note, it could be called #outer-wrapper. Each template varies. And in a template I tested, the value was already false.) Save any changes that you made.

Then open 'Template/Page Elements'. Here remove the header by clicking 'edit' on your header element, then 'Remove Page Element'.

In this same window, choose 'Add a New Page Element/ Picture'. In the box that pops up, you will either choose 'From your computer' or 'From the web' and browse your computer for the image or paste the web url in the box. Close that window by 'Saving Changes'.

If you want to change the header postion, go to 'Edit HTML' and in the #header-wrapper section of the Style Sheet, change the text-align value to left, center or right.

Thanks 1977 for a great tip!

UPDATE: 1/20/07 This comes from another reader, Shrish! One needs to set showaddelement="yes" in the 'header-wrapper' div, otherwise 'Add a New Page Element' option will not be visible on 'Page Elements' page.

10/24/07 I saw this tweak at Big Blog Directory: "The only problem was that the graphic wasn't clickable since it used the 'Picture' widget . I took my html code and put it in a 'HTML/Javascript' widget instead and it worked."

Beta Blogger - Clickable Header

Due to a huge demand for clickable headers, I'm writing a post to explain how to make your header clickable in Beta Blogger.

Since you want a clickable header, I'm guessing that you already have a header image and it is hosted on a web hosting account. You will need the URL of this image later.

First you will make a 'division' to hold the image and position it in your blog in the CSS style sheet between the <head> </head> tags:

#imageholder {float:right;}

To make it clickable add this code after the <body> tag:

<div id="imageholder">
<p><a title="Your blog title" href="yourblog.url">
<img border="0" src="image.url" alt="title of image" />
</a></p>
</div>

I have tested this in a practice blog and it works! With that being said, if you have a problem, let me know.

Classic Blogger - Clickable Header

Due to a huge demand for clickable headers, I'm writing a post to explain how to make your header clickable in Classic Blogger. (Did I miss the memo that clickable headers are the new cool Blogger thing to do?)

This is an easier method than for Beta Blogger! Since you want a clickable header, you probably already have a header image and it is hosted on a web hosting account. You will need the URL to put in the below code.

<div id="header">

<a href="your blog.url">
<img src="image.url" border="2">
</a>

<p id="description"></p>

</div>

And, that is it. Clickable header express!

Blogger Beta: Random Quote Generator - Part 2

Ramani over at Hackosphere has taken an idea Blogger Beta: Random Quote Generator and turned it into a slick little widget. His post, Random message widget (no Edit HTML!) shows you how. He created a nice form called Random Message Widget Creator that is basically plug and play.

You can find out more about this new/hidden(?) feature of Blogger Beta from phydeaux3 on OMG! Puppies!, which by the way, has nothing to do with puppies.

Check it out...use your imagination to see what else you can do with this feature!

Translate your blog into 9 languages

I was always a bit sad that anyone that didn't read English couldn't benefit from my blog. Problem solved! I found how to translate a blog at Digital Inspiration!

To make it work with Blogger Beta, you must open "Template/Page Elements/Add a Page Element/HTML/JavaScript" Paste this into the window:

<form action="http://www.google.com/translate" >

<script language="JavaScript">
<!--
document.write ("<input name=u value="+location.href+" type=hidden>")
// -->
</script>

<input name="hl" value="en" type="hidden">

<input name="ie" value="UTF8" type="hidden">

<input name="langpair" value="" type="hidden">

<input name="langpair" value="en|fr" title="French" src= "http://photos1.blogger.com/img/
43/1633/320/13539949_e76af75976.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|de" title="German" src= "http://photos1.blogger.com/img/
43/1633/320/13539933_041ca1eda2.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|it" title="Italian" src= "http://photos1.blogger.com/img/
43/1633/320/13539953_0384ccecf9.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|pt" title="Portuguese" src= "http://photos1.blogger.com/img/
43/1633/320/13539966_0d09b410b5.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|es" title="Spanish" src= "http://photos1.blogger.com/img/
43/1633/320/13539946_2fabed0dbf.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|ja" title="Japanese" src= "http://photos1.blogger.com/img/
43/1633/320/13539955_925e6683c8.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|ko" title="Korean" src= "http://photos1.blogger.com/img/
43/1633/320/13539958_3c3b482c95.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|zh-CN" title="Chinese Simplified" src= "http://photos1.blogger.com/img/
43/1633/320/14324441_5ca5ce3423.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair2" value="en|ar" title="Arabic" src= "http://photos1.blogger.com/blogger/
3709/485/1600/arabic-flag.gif" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30" />
</form>

To find more information about the history of this code, read about it on Digital Inspiration.

I'm sure it will not translated perfectly, but I am hoping it will be close enough so all readers can understand enough to use all my tutorials.

Blogger Beta is ready to roll!

Latest news from Blogger Buzz is that it is feature complete. Check it out and see what it's all about.

Blogger Beta: Hide/Show, Expand/Collapse labels

After a request to get the 'Hide/Show, Expand/Collapse' hack to work with the label widgets in blogger beta, I figured it out. Here is what I came up with.

1. You must implement the first two steps from Hide/Show, Expand/Collapse - Navigation Element.
   
2. Now open "Template/Page Elements" click on "Add a Page Element". Choose "Labels/Add to Blog". Save changes and close. (This element is temporary...we only need it to find some code, then we will delete it later.)
3. View your blog and right click anywhere in the blog. You want to "View Page Source".
   
4. In the 'Source' page, find <div class='widget-content'> (we'll do something with it in a minute):

   
   <div class='widget-content'>
   <ul>
   
   <li>
   
   <a href='http://annie-flower.blogspot.com/search/label/beta'>
   beta</a>
   
   (1)
   </li>
   
   
   <li>
   
   <a href='http://annie-flower.blogspot.com/search/label/how-to'>
   how-to</a>
   
   (1)
   </li>
   
   <li>
   
   <a href='http://annie-flower.blogspot.com/search/label/test'>
   test</a>
   
   (1)
   </li>
   
   <li>
   
   
   <a href='http://annie-flower.blogspot.com/search/label/trial'>
   trial</a>
   
   (1)
   </li>
   
   </ul>

5. Open "Template/Page Elements" click on "Add a Page Element". This time choose "Configure HTML/JavaScript". Now is where the third part of Hide/Show, Expand/Collapse - Navigation Element comes in. Add this code to the 'edit html box':

   
   <a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">Title</a>
   <br />
   <div class="commenthidden" id="UniqueName"></div>

6. Fill in your 'UniqueName' in the 2 areas. Give it a title. For example "+/- Categories".
7. Copy the code you found in step #4 and paste it between the <div> and </div>

   
   <div class="commenthidden" id="UniqueName"> PASTE CODE HERE </div>

8. Save changes and close.
9. Now you can open the 'Label Element' we made in #2 and "Remove Page Element".
   

I believe that should do it! It worked on my test blog. I ended up with a 'Hide/Show, Expand/Collapse' section of my sidebar that displays labels/categories for my blog.

Also see: Hide/Show, Expand/Collapse - Navigation Element

Blogger Beta: Random Quote Generator

I've had a request on getting a random quote generator to work in Blogger Beta directly under the heading. Well, Eastendist, this is your lucky day! Hans from Beautiful Beta had done a post on a sticky message board and I used that hack with minor tweaks to get the random quote generator to work in Blogger Beta.

Look at this post, Sticky Message Board, and follow the instructions. Remember after you get it up and running, you can change the appearance in the code that you put in "/* Variable definitions" and in the CSS section to fit the your blog. Make sure you place this:

<div id='content-wrapper'>
<div id='message-board'>
<b:section class='msgbrd' id='msgbrd' maxwidgets='1' showaddelement='yes'/>
</div>

directly below:

<div id='header-wrapper'>

because this is the part of the code that puts the quote generator below your header. When you have all the code in your template and saved it, open the Layout Editor and under the header will be a new element. Click 'Add a Page Element' , and select 'Configure HTML/JavaScript'. Click on 'Edit HTML' and add this to the window:

<i><center>

<center><script language="JavaScript">
//store the quotations in arrays
quotes = new Array(6);
quotes[0] = "So many cats, so few recipes.";
quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";
quotes[2] = "That's not a haircut. That's a cry for help.";
quotes[3] = "The last thing I want to do is hurt you. But it's still on the list.";
quotes[4] = "Some days it's just not worth gnawing through the leather straps.";
quotes[5] = "Doing for blogging what Ghengis Khan did for social work.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done
</script>

</center></i>

You can change the quotes whenever the whim strikes you. You can even add more quotes...just follow the layout and increase the 'Array(6)' for each quote. Note that even though it says 'quote 5', the 'array' says 6. That is because it starts with 0.

Have fun putting in your favorite quotes!

Update 11/11/06: I've had some requests on how to put in more quotes, so here are more explicit instructions on doing just that. This is like the 'formula'. I know, Algebra is scary, but this is only a tiny formula with hardly any numbers and a couple of 'x's!

quotes = new Array(X + 1);

and you add another line for each new quote:

quotes[X] = "Your new quote";

Let's say you want 10 quotes. In 'Array you will put 11 (which is the x +1 or 10 + 1 from the formula). That will make your code look like this:

first part of code.....
quotes = new Array(11);
quotes[0] = "So many cats, so few recipes.";
quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";
.....blah, more quotes, blah....
quotes[10] = "Doing for blogging what Ghengis Khan did for social work.";
.....last part of code

If that doesn't clear it up, let me know!

Update 11/13/06: See Blogger Beta: Random Quote Generator - Part 2

Comment Notification and Author Comment Highlighting

I now have some hacks for the comments section - a hack to highlight your comments as the blog author and another to notify your readers when you respond to their comment.

I recently found a hack by Ramani over at Hackosphere. This is a two for one hack. This one really makes sense and is extremely helpful to all concerned.

It is helpful to the person posting a comment on someone else's blog because they will get an email notification when there is a response to that comment by the blog owner. How many times have you written a comment on a blog, and forgot about it or couldn't remember the blog you commented on?

It is helpful for the owner of a blog because many times a response to a comment is lengthy and involves research. Especially for blogs such as mine. Believe it or not, I read all comments and attempt to help all inquires for assistance. For me, it can be very time consuming. When I finally get the answer posted, I know that the person will be notified of my response.

As for the highlighting, it simply makes it easier to find the blog owner's comments in the list.

Read Ramani's instructions. If you need more explanation I'm outlining the steps below with a little more detail for how to:

In your style sheet find this:

.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

and add this:

.comment-body-author {
margin:0;
padding:0 0 0 20px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#CC3300;
text-decoration:bold;
}

This changes the blog owner's comment color and font type. The code in red is where you can change it from bold to normal or italics, and the color from this (which happens to be red) to whatever color you like.

Next open you template/edit HTML and check the little box above the editing window that says "Expand Widget Templates". Then look for:

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

<dd class="comment-body">
<b:if cond="data:comment.isDeleted">
<span class="deleted-comment"><data:comment.body>
</data:comment.body></span>
<b:else></b:else>
</b:if><p><data:comment.body></data:comment.body></p>

</dd>
<dd class="comment-footer">
<span class="comment-timestamp">
<a title="comment permalink" href="http://beta.blogger.com/">
<data:comment.timestamp></data:comment.timestamp>
</a>
<b:include name="commentDeleteIcon" data="comment"></b:include>
</span>

</dd>

</dl>

and replace with this code:

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


<b:if cond="data:comment.author == data:post.author">
<dd class="comment-body-author">
<p><data:comment.body></data:comment.body></p>
</dd>
<b:else></b:else>

<dd class="comment-body">
<b:if cond="data:comment.isDeleted">
<span class="deleted-comment"><data:comment.body>
</data:comment.body></span>
<b:else></b:else>
</b:if><p><data:comment.body></data:comment.body></p>
</dd></b:if>

<dd class="comment-footer">

<span class="'">
<form action="http://www.anniyalogam.com/scripts/notify.php" method="post" target="_blank">
<input value="data:comment.authorUrl" name="profile" type="hidden">
<input value="data:post.author" name="nickname" type="hidden">
<input value="data:post.title" name="post_title" type="hidden">
<input value="data:post.url" name="post_link" type="hidden">
<input src="http://www.anniyalogam.com/1clickbutton.png" type="image">
</form>
</span>

<span class="comment-timestamp">
<a title="comment permalink" href="http://beta.blogger.com/">
<data:comment.timestamp></data:comment.timestamp>
</a>
<b:include name="commentDeleteIcon" data="comment"></b:include>
</span>
</dd>

</dl>

Now when you open a post page (that is the page that comes up when you click on a post title) you will see a little icon after each post. (Note, it does not show on the page where you actually type the post!) When you click on a person's post that you have responded to, an email will be sent to them saying a response has been posted to their comment. This only works if the commentor has enabled "Show my Email Address" in their 'User Profile'.

I love this hack! I only wish more bloggers would enable "Show my Email Address"!!!