Fix for Broken Favicons

I have been bombarded with emails from disgruntled bloggers that have lost their favicons. But, don't despair! There is a fix. I don't know how, or why it happened, but some of my blogs were also missing their favicon. Not all of them. But some. Once again, I don't know why. (Maybe a reader out there knows why.)

Anyway, the good news is, the fix is simple!! There are 2 steps.

Step 1 - find your favicon code in your template. It should be near the top of your template. Copy that code.

Step 2 - Paste that code here:

]]></b:skin>
PASTE ICON CODE HERE
</head>

If I have learned anything from this...we bloggers LOVE our favicons!!

Post Title With an Image

First off, I love your blog! You do so many cool things with it! I was looking at some of the blogs you have done for other people. I particularily like http://christyann-photography.blogspot.com/search/label/baby. After looking at I was wondering, how did you do the image and fonts for the Post Title? I thought you did an excellent job! If you have time, I would love to know how. If not it is ok. Thanks!

--
Carrie Jo


Pretty easy to accomplish! You must locate the .post h3 part of your CSS style sheet. Before doing anything, remember to save your template!

.post h3 {
background:url(YOUR POST IMAGE) no-repeat;
padding: 20px;
margin: 20px;
margin-top:.25em;
margin-left: 0px;
margin-bottom: 20px;
border-top:1px dashed #42c4de;
border-bottom: 1px dashed #42c4de;
padding:10 0 4px;
font: normal normal 100% Georgia, Times, serif;
font-size:240%;
font-weight:bold;
line-height:1.4em;
color: #49331c;
text-transform:uppercase;
text-align: center;
}

This is the line of code that you add to the .post h3 section.

Depending upon the size of your image (I would recommend keeping it small...around 20-30 px square.) you will adjust these values. Now, this will be different for each blog...each image. So trial and error will see you through.

If you want some sort of border, this is the code. And here are some values that you can use instead of dashed:

1. dotted
2. solid
3. double
4. groove
5. ridge
6. inset
7. outset

Save your work and you have a cute little image in your post title!

Another way to remove "Subscribe to: Posts (Atom)"

While working on a template, I was trying to remove the Subscribe to: from the bottom of the page. For some reason, previous methods that have worked for me in the past, didn't work on this template. I ended up adding this bit of code to the CSS style sheet:

.feed-links {
display:none;

}

That did it! Who knows why. Certainly I don't...I'm just happy it worked and thought I'd share.

Related Posts

Have you ever wanted a feature under your post that shows related posts from your blog? I found this way to do it from JackBook.com. It was originally designed by Hoctro with modifications by JackBook. This uses labels/categories that you already have in place to show Related Posts by Category.

There are two steps to this hack. But before you begin, be sure to save your template!

Step 1: Go to your Dashboard | Layout | Edit HTML | check Expand Widget Templates and locate this code:

<data:post.body/>

Step 2: Place this code after the code you just located:

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- ***http://hoctro.blogspot.com***Jan,2007**** -->
<!-- ***Related Articles by Labels - Take Two*** -->

<!--
Modified by JackBook.Com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->

<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Save your work and all is done.

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.