A Round-Up of Free Blogging Icons!

These are some icons I found and thought I'd share. What a fun way to pull together your blog!! And best of all...they are all FREE!! You can download each set from the link under the image.

A set of sweet Irish Icons


Several wild RSS feed icon sets

From DefiantArt

Free Vector Icon PSD Set

Simplistica (has a nice calendar icon!)

Stickers Icons

Sketchy Paper Icons (I LOVE this set)

Valentine Love

Glossy Blogging Icons

Function Icon Set

Bottle Icon Set (cute, cute, cute!)



Coquette Icon Set

Vector Icon Set

Post Larger Images with Blogger

Have you ever wished that you could post larger images via the Blogger: Upload Images window? I found a neat trick from a reader, Miranda.

This requires a blogger template with extra width in the posting section so it will display the larger images.

Upload your image in the post window, Dashboard | Posting | Create | Add Image icon. After doing that, click on the Edit HTML tab and you will see this image code:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfD95WXFoBJGXok5hUIQcZdFNzS208heTaWHIIk3WYuNPb5KC33ktW-v9WIbZsu_mNn06GyrMouRrp45I6yL-KVCTaDbSTkEUWGnu2gbjubwDocmeFyC3t58a9zq_hkpsPkjZa12z1pfv4/s1600-h/DSC_2693.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfD95WXFoBJGXok5hUIQcZdFNzS208heTaWHIIk3WYuNPb5KC33ktW-v9WIbZsu_mNn06GyrMouRrp45I6yL-KVCTaDbSTkEUWGnu2gbjubwDocmeFyC3t58a9zq_hkpsPkjZa12z1pfv4/s400/DSC_2693.JPG" alt="" id="BLOGGER_PHOTO_ID_5237868380194789154" border="0" /></a>

All you change is the s400 to s800! Then you have a nice large image on your blog.

I'm not sure how legal this is. All I know is that it works.

EDIT: Question was brought up about draft users. I didn't realize the image code was different, but it is. So, if you use Blogger in Draft, here is your instructions. Follow the directions above. You will see this image code:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA0xM0T2ufp5aJb1Qds4Awt07xPmbWWNY_2glvdgwg6BVaw5Opm7BZaGuSd-VRW3kK5oQ9Fhv720kgSl82lV9Xx7FZa0gfuDITsQ3F1kpqv7wDBq7iOT3JwNtEdSt075iLEpCOT9qfS06v/s1600-h/DSC_2689.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_OFh1WWXWCHM/SLDBAvBlhrI/AAAAAAAAB7g/kTUthEX2IYc/s320-R/DSC_2689.JPG" /></a></div>

Change this s320-R to this s800-R. Where there's a will, there's a way!

EDIT 09/08/08: Thanks to The A of DNA for: If you don't want it as large as s800 replace it with s576!

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.

+/- (hide/show, expand/collapse) Labels

I'm on a label enhancement mission. Maybe my drop down menu label method didn't do it for you. Good news! Here is another option for you label makers using the infamous +/- method. This is simple, simple, simple.

Step 1 - Without expanding your widgets, find this code in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Step 2 - Replace that line with this code:

<b:widget id='Label2' locked='false' title='Labels and Feeds' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<ul>
<b:loop values='data:labels' var='label'>
<li>


<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

TaDa! Label those posts!

EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.

Drop Down Menu for Labels

Hi Annie
I've just successfully used your instructions on adding tabs to my blog and have seriously cleaned up my sidebar, for which I sincerely thank you but, I would like to go a bit further. My Label list is pretty long and I would like to have a scroll bar or drop down menu for it. Trouble is, I can't see how I can get the scroll bar instructions on BlogU to work with the Label page element 'cos there's nowhere to enter the code given and I can't find anything about a drop-down (unless I've passed over it) on your blog.
Just thought it was worth an email to ask advice and to say thank you for the info I've already used successfully. I've recommended your site to a friend and put a link on my blog list ....


My readers are keeping me on my toes! Here is another request...this time for a drop down menu for labels. Here are the steps to accomplish this.

Step 1 - find this code in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Step 2 - replace that line with this:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

There are a few places in this code to customize it. Change this number to change the width of the box to fit in your sidebar. Change the wording that shows in the first line of your drop down box...to whatever you like.

Now you have a sweet little drop down menu to corral those labels that are getting out of hand. Go now and label with reckless abandon!!!

EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.

EDIT: 08/21/08 - If you want to display the label count {trees (5) birds (9) flowers (3)} after each label use this code in Step 2:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

EDIT 09/07/08: Here is an example of the drop down box before expanded and after:

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!