Classic Blogger Favicon Fix!!

I was missing my favicon on Buttermilk Clouds, which happens to be a classic blogger template. I tried several different things and nothing worked until I tried this.

In your template (towards the top) find this:

<$BlogMetaData$>

Then place the following code right after it.

<link rel="icon" href="FAVICON URL" type="favicon" />
<link rel="shortcut icon" href="FAVICON URL" type="favicon" />

If you have the new blogger template (formerly known as blogger beta) there is a fix for them, also.

Pretty easy. I really love my favicon, and I'm very upset with Blogger for attempting to do away with it. Shame, shame on you Blogger!

Blogger Error Messages

Oh. You know them. You've seen them. The nasty red font above your template edit window after you attempt to save your template or even preview your work. Jeering at you with:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: Element type "href" must be followed by either attribute specifications, ">" or "/>"

or

More than one widget was found with id: HTML3. Widget IDs should be unique.

Makes my skin crawl. But, you can battle the error message...and be victorious!!

I think the two examples above are probably the most commonly seen messages. At least for me they are. The first example can have a variety of elements in the "href" spot. Sometimes it is like fill in the blank. But, the thing to focus on is the ">" or "/>". I noticed, while working on a template yesterday for Pauls Health Blog, that I kept getting this error...with "div" as the element. It said that a "div" element wasn't closed properly. I checked and checked. Nothing looked out of place. But, the code I put in had "/>" at the end of it. And where I put the code, it already had the closing tag a bit further down. Finally I spied that little "/". That was the culprit. I removed the "/" and was finally able to save the template.

Lesson here is if you get this message, look carefully at the exact code you just put in. Does it have the "/" at the end with the ">"? If so, remove it. Or, controversially, if you get the error and it doesn't have the "/" at the end, slip it in!

The second error message comes up when adding code to your template that has already named the widget. It is easy to fix. Find the culprit in question and renumber it. It doesn't make any difference what number, just as long as it doesn't occur anywhere else in your template. It wants to be unique.

HTML Code Box

Hi,
I did a Google search on how to put a box with html code to "grab a button" in a blog post or somewhere else on the blog and yours came up.
I see that you have just what I am looking for close to the bottom of your blog (under the posts).
I have a button and all I need to do is put the code into a box so that people can copy and paste it to put the button on their blog. How can I add the same thing to my blog?
Your help would be very much appreciated.
Regards,
Gerri


Occasionally you want your readers to be able to copy code. Just how to get that code on your blog with out it doing it's little html magic first? Put it in a little box like this:
I'm a visual person, so the best way for me to explain this is with the exact code that I used for the above box:

<center>Grab this button:</center><center><img style="border: 0px none ;" alt="BlogU Button link" src="http://farm4.static.flickr.com/3092/2505649265_9cb03e574d_o.png" title="Steal my button!" width="80" height="15" /></center>
<center><textarea id="code-source" rows="3" cols="28" name="code-source"><a href="http://bloggeruniversity.blogspot.com/"><img border="0" src="http://farm4.static.flickr.com/3092/2505649265_9cb03e574d_o.png" /></a></textarea></center>

And here is the code showing what you need to change:

<center>TEXT EXPLAINING WHAT IS IN BOX</center><center><img style="border: 0px none ;" alt="LINK TITLE" src="IMAGE URL" title="LINK TOOLTIP TITLE" width="XX" height="XX" /></center>
<center><textarea id="code-source" rows="3" cols="28" name="code-source"><a href="LINK"><img border="0" src="IMAGE URL" /></a></textarea></center>

The pink code is where you can adjust the size of the box. All that is left to do is place it in a HTML/Javascript widget!

Scroll Box

...What I would like is a place to put widgets, links, webrings, etc in a
box which shows a little of the content and then can be scrolled down
to see the rest. Just like the thing on my site from Technorati, but I
want to add my own content, not just links...

Laura wanted a way to organize her sidebar...something more than the now famous Hide/Show hack. What she wanted was the classic scroll box.

Here is how you do just that. Open your Dashboard | Layout | Add a Page Element | HTML/Javascript. Add this code in the window:

<div style="border: 1px solid #000000;background-color:#ffffff; width:200px; height:250px; overflow:auto; color:#555555;"><p> ADD TEXT OR CODE SCRIPT HERE
</p>

You will adjust these bits of code for width and height. Each blog will be different, so play with the numbers until the scroll box fits in the area you want. You will add the code you want displayed here...be it javascript or plain text. You may want to put a <br/> or two between lines of code to separate the items.

If you use a Classic Blogger template, instead of putting the code in a widget, you will put it in your sidebar area amongst the other items that live in your sidebar.

So, go ahead! Gather up all your little do-dads and put them safely in the scroll box and be happy. Have a cup of coffee and admire your work!

A Cool CSS Navigation Menu

Widgets For Blogger said...
Annie,
Do you have a post or could you make a post about how to make a menu like yours so that when you hover over an image you get an effect like yours?

Top row: static - Bottom row: active

I have been asked by a couple of people for this, so today I decided to do a little post. First, I want to give all the credit to this wonderful site, Web Designer Wall. I go to that site and get lost in all it's beauty. I just drool over all the cool design features. (Makes for a wet keyboard.) You can read their complete instructions on Advanced CSS Menu.

This is accomplished with a little bit of graphic making and code placing. First with the graphic making. The Web Designer Wall gave great instructions on making your graphics. So, instead of me going over it again, I would suggest reading it there.

That brings us to the code placing. This is a two part process.

1. You will want to place the code in the CSS style sheet. I am showing the the code I used to place the menu in BlogU. That way you can compare with WDW to see any differences, and what the differences do.

/*Roll over feed
-----------------------------------------------*/
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
height: 50px;
background: #ffffff;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span{
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(home.png) no-repeat;
left: 10px;
top: 25px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(/home-over.png) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(about.png) no-repeat;
left: 180px;
top: 18px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(about-over.png) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(RSS.png) no-repeat;
left: 350px;
top: 24px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

The orange: change the values for your own images sizes.
The blue: change these values so it fits where you want it. This is simply trial and error...and patience.
The purple: this may have to be changed to fit in your sidebar, depending on the width of your sidebar, or if you put it below your header, that width.

Of course, the style sheet is where you do all of your...ummm...styling, so there may be other changes you want to make.

2. Now you will have to put some code in a widget. Choose HTML/Javascript (my most favorite widget) and put the following code in:

<ul id="menu">
<li><a href="YOUR BLOG URL" class="home">Home <span></span></a></li>
<li><a href="YOUR PROFILE URL" class="about">About <span></span></a></li>
<li><a href="YOUR FEED URL" class="rss">RSS <span></span></a></li>
</ul>

The orange: changes here are only to paste your own URL's in the appropriate spot.

Attention Classic Bloggers: Put the widget code in your template between <MainOrArchivePage> and </MainOrArchivePage>. Please note, I haven't actually tested it in Classic, but it looks like it will work fine. Let me know.

That will create the menu. It takes some skill with Photoshop or GIMP, but it is worth the effort!

Unobtrusive Sidenotes

Have you ever been blogging happily away, only to suddenly, and much to your surprise, have the desire to write a footnote? But, who really likes footnotes, let alone actually going to the trouble of scrolling to the end of the text to read the footnote and losing your place? But, you have to admit, if there was a better way, you might become a footnote writing genius.

Well, I admit it, I'm one of those people. And today I found something exciting! It is called Unobtrusive Sidenotes. It is the perfect thing for when my thoughts wander and I'm off in left field, completely off base. Or, it can actually fill the shoes of a footnote by giving a more in depth explanation or reference to the topic at hand. It is the cutest little thing.

Unfortunately, the original code, in the above link, didn't work in Blogger and some other platforms. But, the people at arc90 corrected the problem with A Simpler, Hosted Version of Sidenotes.

The end result is simplicity at it's best. You see a block of pink text...look for the corresponding pink block. You see a block of blue text...look for the corresponding blue block. You get the idea.

To implement visit the links above and read more details about this script. I found I had problems with the code as they wrote it. So, I slightly revised it so it would behave with Blogger. I'll walk you through it. First this bit of code goes in the after the <head> but before the <b:skin><![CDATA[/*

<script language="JavaScript" type="Text/JavaScript" src="http://arc90.com/lab/tools/c/javascript/arc90hosted_sidenote.js"> </script>

The next code will be put into the post it's self. To make it easier, read Painless Blog Posting to set it up automatically in each post window.

<span class="sidenote" title="SIDENOTE TEXT THAT WILL BE DISPLAYED ALONG SIDE THE POST.">WORD/WORDS IN POST THAT RELATES TO SIDENOTE</span>

All in all, I think it could prove to be very useful.

Please take note, it is temperamental. I have it working in a test blog, but on BlogU it had conflicts with some of my other scripts. So, sadly, I removed it. And I was going to trash this post, but decided to share, because maybe it will work in your template. Just remember to backup your template before adding this, or any additions, to your template. Not to say I'm not still trying to make it work here, too!

Using a Calendar Icon as the Post Date Header

But since we're on the subject of the date header. Have you been able to figure out (or maybe seen somewhere) how people add the caledar icon next to the date header?

It's usually a graphic behind the month and date to the left of the date header. Like:
JAN
---
10


WOW, this was not an easy task. At least for me. Sometimes it is just an uphill struggle. But, I stuck with it and won.

Of course, I found help from two places: Orangevolt for the calendar code and Euphorish for the icons, which I resized to fit this code. Many thanks to them for all their work. You can read about it on their site, or follow the instructions that I've simplified below.

So, let's get started.

1. Open the Dashboard | Settings | Formatting
   
2. Locate the Date Header Format and set it to YYYY-MM-DD (2008-01-12)
3. Save settings.

That gives the correct date format to work with this script. Let's continue.

1. Open the Dashboard | Template | Edit HTML.
   
2. Check the Expand Widgets Template box.
3. Find the <head> tag and paste the following code under it:
   

   
   <!-- orangevolt calendar widget -->
   <script src='http://anniebluesky.googlepages.com/fastinit.js'/>
   <script src='http://anniebluesky.googlepages.com/prototype-1.5.0.js'/>
   <script src='http://anniebluesky.googlepages.com/orangevolt-calendar.js'/>
   <link href='http://anniebluesky.googlepages.com/calendar.css' rel='stylesheet' type='text/css'/>
   <!-- end calendar widget -->

So far so good!

Next you will locate this code in your template: <data:post.dateHeader/> and replace it with:

<h2 class='date-header'>
<data:post.dateHeader/>
</h2>

This is pretty painless, isn't it. Last step. This is where you can customize the font used, color of font, float the icon to the left or right, and where you add your calendar image. In the CSS Style Sheet, add this code:

/* Calendar
----------------------------------------------- */
span.cal {
background:transparent url('CALENDAR IMAGE. URL') no-repeat scroll 0%;
float:left;
height:49px;
width:48px;
font-family:"Trebuchet MS",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-right: 13px;
}

span.cal_month {
color:#FFFFFF;
display:block;
font-size:11px;
line-height:11px;
margin-left:-3px;
padding-top:2px;
text-align:center;
text-transform:uppercase;
}

span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:8px;
text-align:center;
text-transform:uppercase;
}

If you have a calendar icon upload it to your webhost (I use Ripway). Put your Calendar Image.URL in the above code. Or, download this set of icons and take your pick. It looks like candy!! This set of calendar icons will make your blog POP!


Download

Choices for Post Body Fonts

...For example:

I've been trying to add the Gothic Century (?) font to a blog template with little luck. I'd like the Sidebar title to be that Gothic font and the sidebar body to be Trebuchet. And say the post title font to be Gothic as well but with the Verdana font of the post body.

Further more I'd like to be able to have the sidebar body font at say a 10pt and the post body font at a 15pt, just as an example.


This was but one of the questions from Mr. Brown Thumb, my gardening friend in Chicago. As it turns out, while I was busy working on another project, another friend, Hans, came up with an easy solution. I must be living right!

I'll put Hans' solution here. He states that you can define an extra bodyfont-class in your CSS style sheet, for example:

.extrabodyfont {
font: Arial;
font-size: 1.2em;
color: #800080;}

Now, when you want a to use this font in a post, wrap the text inside span tags like this:

<span class="extrabodyfont">your text here</span>

This little piece of code has the added benefit of allowing you to change the size and color of the font also!

Another added bonus. If you are really fickle and want even more extrabody font choices, start labeling the classes .extrabodyfont1, .extrabodyfont2 etc. Then make changes to the class:

.extrabodyfont1{
font: Georgia;
font-size: 1.2em;
color: #800080;}

Then when posting,make sure to choose the corresponding span class.

<span class="extrabodyfont1">your text here</span>

The possibilities are endless!!

The Scoop on OpenID and Blogger Comments

I have been looking into OpenId and it's connection with Blogger. I went straight to the source, thanks to Janeywan for sending me the link to OpenID Commenting on Blogger Buzz.

If you haven't set up OpenID, you can still link to your blog — or any webpage, for that matter — by using the standard tag inside the comment form.

From Blogger Buzz

First, what does OpenID do? It allows you to take your identity with you, proving that you own a particular URL. Isn't that simple? Yes. And a big surprise is that you may already have an OpenID. If not, don't fret. There are several options to get one:

1. myOpenID which is what I used.
2. claimID
   
3. myvidoop
   
4. myID.net
5. VeriSign Labs
   

What does it mean to you, a blog owner? It means that readers can leave authenticated comments on your blog using their blog URLs from OpenID-enabled services such as WordPress.com, LiveJournal, and AOL Journals, or with their AOL/AIM accounts. When they leave a comment with an OpenID , you will see this icon next to their names. No more comment spoofing.

To enable this on your blog, go to your Dashboard | Settings | Comments | Who can Comment | check Anyone or Registered Users.

This is from myOpenID on using your own URL:

You can use your own URL as your OpenID, and still use myOpenID as your OpenID server. To set this up, create an account, and add the following markup into your page's <head<> section:

<link rel="openid.server"
href="http://www.myopenid.com/server" />
<link rel="openid.delegate"
href="http://youraccount.myopenid.com/" />
<link rel="openid2.local_id"
href="http://youraccount.myopenid.com" />
<link rel="openid2.provider"
href="http://www.myopenid.com/server" />
<meta http-equiv="X-XRDS-Location"
content="http://www.myopenid.com/xrds?username=youraccount.myopenid.com" />

Or another method...which I decided to use:

<link href='http://www.myopenid.com/server' rel='openid.server'/> <!-- For delegating OpenID v1.x-->
<link href='http://youraccount.myopenid.com' rel='openid.delegate'/> <!-- For delegating OpenID v1.x-->
<meta content='http://youraccount.myopenid.com/xrds' http-equiv='X-XRDS-Location'/> <!-- For delegating OpenID v2.x-->;

In both examples put your OpenID username where it says your account.

That's it. You can now use your own URL to log into OpenID enabled sites with myOpenID as your OpenID server.

Now, while I have your attention. Big Bad Blogger apologized for removing the URL field from the comments form prematurely. And they regreted making it appear that they were trying to force you into getting a Google Account. Don't you all feel bad for talking the way you did about them? Shame on you.

The Blogger openID debate

There seems to be a huge rumbling about Blogger these days. A revolution of sorts. I'm not jumping on that band wagon. It concerns comment links and openID.

Let me step out on a limb here and say that I didn't start blogging to become the most popular kid on the block. I started blogging because I felt I had something to share with others. Nor do I comment only to have a link back to my blog. I comment because I have something to say. Either to let the poster know that I appreciate a well written post, or I have something that could be of interest to that poster and their readers. I didn't choose a blogging platform for it's ability to allow links in it's comment section.

With that being said, I do think linking is important. But not for the reason you may think. I like following links and placing links for the information shared within that link.

I will do what I always do with Blogger. Find a way. Just to make it simple for my readers, I have put this in the Comment Form Message in the comment setting section of the dashboard. Now my readers may comment and leave a link to something of interest. Or, if they wish, they can leave a link to their blog. Either way, it is there and easy to use.

I'm playing around with some of the fixes I've found, but at this point I'm not entirely clear on what I'm fixing! It all seems to work fine.

I really don't see what the fuss is about. Blogger will get it together and we will live happily ever after in Blogger Land.

New Comment Feature in Blogger

I've been so busy, but I wanted to point out to those of you that haven't noticed the new comment feature feature that recently appeared in Blogger.

After leaving a comment, you will see a new choice Email follow-up comments to. There you are able to choose to have any follow-up comments sent to you.



I love this feature, being a long time advocate of any means to tell readers when a comment is left. One of Blogger's better moves. Comments are the backbone of blogs. And email follow-up comments is calcium. (Is that goofy or what??)

Locating the CSS style sheet

and i again i am able to do something with my blog with your very easy to use instructions. it took me a while before i can get it going as i didnt know where the CSS style sheet began. thank you so much! my blog is still in the works so no links yet. again, thank you. ;>

It seems the CSS style sheet is an elusive piece of code for some of you. Here is how to find it.

• Classic Blogger: Between the <style> and </style> tags. The first tag could have more in it like <style type="text/css" media="screen"> so don't let that concern you.
• Beta Blogger: Between the <b:skin><![CDATA[/* and ]]></b:skin>

The first tag is towards the beginning of your template in Classic and Beta Blogger. The style sheet it's self contains a lot of code that looks like this:

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

and

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

Note the "{ }" and the "#". They will be all over the place. That is a tale-tell sign of the CSS style sheet code.

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!

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"

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.

1. 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.)
2. 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:

1. 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.
   
2. Assign a color to each member.
3. 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:

1. Each member will have a unique name (Joe, Jane, poster1, etc.)
2. There will be a code reflecting the unique name for each member in the CSS style sheet.
3. 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!!!

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)

Hide/Show, Expand/Collapse - post element

I have been waiting for the right idea to start posting again. Thanks to The.Red.Mantissa experimenting with a favorite hack, Hide/Show, Expand/Collapse - Navigation Element, I have found the inspiration for that post. She stuck part of the expand/collapse code into the post itself. Uses? Hide a spoiler, shorten an extremely long post, add a recipe, book excerpt, or in my case, codes. Brilliant. Here is how it's done. +/-

Follow the first two steps in the instructions given in Hide/Show, Expand/Collapse - Navigation Element. Then, when writing the post, add this code to the post editing box:

<a aiotitle="click to expand" href="javascript:togglecomments('UNIQUE NAME')">+/-</a><div class="commenthidden" id="UNIQUE NAME"><p>HERE IS WHERE YOU PLACE THE HIDDEN TEXT.</div>

Added bonus! If you plan on using this hack often in your posts, simply add it to the Post Template by going to the Dashboard/ Settings/ Post Template, and put it in that box. As a matter of fact, it is easier to put it there and if you don't use it for a post, simply delete the code for that particular post.

Edit: Please note that each post must have a unique name for that post. I'm just going to start numbering mine. ie post100, post101, post102, etc.

Add a Google Search Engine to your Blog

You can add a great search engine to your blog with Co-op - now with Custom Search Engine. Customize it the way you want. Tell it to search only your site, or any sites you specify. Pick the badge that speaks to you! Place the code in your sidebar. Wonderfully simple!!

Comment Reminder

...take advantage of email notification for new comments...

Sometimes you take something so much for granted and you forget that others may not be aware of it. I'm speaking of being notified via email when a reader leaves a comment on your blog. It would be impossible to check all my posts daily for new comments.

Luckily, blogger has come up with a simple built-in solution. To take advantage of email notification for new comments, open your Dashboard/ Settings/ Comments/ Comment Notification Address. In that box type the address you want the comment sent to. Easy, easy, easy...

Pullquotes to Break the Boredom

I have been wanting a new pullquote in the worse way, but I have been putting out fires all across the blogosphere, with no time for pullquote shopping!

...A pullquote is a nifty little item...

Well, it seems that tonight all fires have been extinguished. And surprise, surprise, I can actually make a change on my blog!

I have loved the blockquotes on Buttermilk Clouds ever since I started working with it. The lines are simple, elegant, and it sets off the text within the blockquote without distracting from the overall feel of the post. Tonight I started playing with the code to see if I could modify it enough to become a pullquote. The results are outstanding! (I get excited easily by the strangest things...when the code actually works the way I want, pullquotes, CSS...the list goes on.) So, here 'tis. As you can see, I made the font different, a bit larger, and centered.

To get your own new snazzy pullquote, open your Dashboard/ Template/ Edit HTML The following code goes in the CSS style sheet:

.pullquote {
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Verdana, sans-serif;
color: #555;
text-align: center;
font-size: 1.4em;
border-top: 3px double #ccc;
border-bottom: 3px double #ccc;
}
.pullquote p {
padding: 0;
margin: 0;
}

If you wanted a different color font, change this value. Change this value for a different size font. You can make the border solid, dotted or dashed and change the border color here. Save your template. Now, when you create a new post, put this code in the post editor window - or - a little tip: if you plan to use pullquotes often, or just don't want to go digging for code, you can automate this process. Open Dashboard/ Settings/ Formatting/ Post Template and paste this code there:

<blockquote class="pullquote"><p>...THIS IS YOUR PULLQUOTE TEXT...</p></blockquote>

<p>TYPE POST HERE...

A pullquote is a nifty little item. Why? Because, everyone reads them! And that is that. Have fun!