Showing posts with label Blogger. Show all posts

Monday, November 22, 2010

What is the correct image url for blogger favicon?

.ico, .gif, .jpg, .png - correct favicon image extensions

Now you have learned how to change your blogger favicon to your favorite icon or image. However after following the instructions, it still has that old blogger favicon and the code didn't work at all. You might have inserted a wrong image url.

Favicon / Image Extensions

There are many image extensions but you should consider only four that can be used on the web. These are the GIF, JPEG /JPG, PNG, and the icon extension ICO.

Correct Image URL

Before inserting a link, make sure that the link is alive. The link should be the direct address to the image itself and not to the page or post you have seen it. The following URL format should be followed:

http://{address here}/{image name}.gif
http://{address here}/{image name}.jpg
http://{address here}/{image name}.jpeg
http://{address here}/{image name}.png
http://{address here}/{image name}.ico

You should open the link first to know that it is alive and you have the correct direct link of the image. To determine that the link is alive, when you open the link, it should display the image alone and the favicon of the link is the image itself.

Sample Images

http://www.jellymuffin.com/icons/happy_birthday/images/53.gif
http://www.downloadatoz.com/_imgbank/ha/happy-birthday/Happy-birthday.icon.gif
http://t0.gstatic.com/images?q=tbn:ANd9GcRXR-I3LQHxEfABq0ACT3-7scIXFTKgRcbZNswFI5ybJaB78mXq
http://www.logosforwebsites.com/wp-content/uploads/2009/07/favicon.ico
http://i203.photobucket.com/albums/aa109/Malder666/Misc/favicon.png

Tuesday, October 5, 2010

How to Change Favicon in Blogger

A step by step guide on how to change the default blogger favicon to your own favorite icon.

Adding a favicon in blogger is very easy, as easy as 1-2-3. You just to need the basic knowledge of changing your blogger template. All you need to do is to insert the following link code below in your template, between the head tag. I recommend you add it above the </head> tag.

The Link Code

<link href='{image url}' rel='shortcut icon'/>
<link href='{image url}' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='{image url}' rel='icon'/>
<link href='{image url}' rel='icon' type='image/vnd.microsoft.icon'/>

The Image URL

The image url is the web address of the image you are going to use as your favicon. It may either be in the following format: jpg, gif, or png. Since it is a web address, you need to upload it on a photo hosting site, Photobucket. Replace the {image url} with your exact image url. Do you know the correct image URL?

Get Your Favicon Code Easily With Our Favicon Code Generator!

The Head Tag

The head tag begins with this tag: <head> and ends with this tag: </head>. Go to Layout->Edit HTML.

Locate for end head tag (</head>) and paste your link code above it, then save it.

The result may take some time because of some delays brought by the browser you are using. I have tried once using firefox and it didn't changed the favicon immediately. But this will surely work perfectly. Do you know know where to upload your favicon?

Friday, January 23, 2009

Adding Nuffnang's Alternate Code in Single Post Only in XML Blogger Template

My previous post is about adding AdSense only in single post in XML Blogger Template. Now, Patsy, a blogger friend who visited my blog, commented on that post and asked about adding nuffnang ads instead of AdSense.

I remembered that I have a Nuffnang account and I still haven't tried using there ads. So, I tried changing the AdSense code to Nuffnang. Nuffnang provided to code, the default and the alternate. First, I tried using the default code and it worked properly. However, when I tried using the alternate, it had resulted to an error.

Now, this tutorial is mainly on how to add Nuffnang's Alternate Code in XML Blogger template without an error in relation to my previous post.

Inserting directly the default Nuffnang code would not result to an error. But if you use the alternate code, an error will appear. You still need to convert a few characters into html entities to make it work.

I said only few characters because you only have to change 2 characters repeated twice in the alternate code, the < and the >. Now here's the thing, you need to change "< to <" and "> to >" in the document.write syntax.

It would look like this one: (click image to enlarge)

After modifying the code, you may now proceed with Step 3 of the my previous post.

I would recommend that you just use Nuffnang's default code to make it easier.

That's all folks... Happy Friday to all!

Tuesday, January 20, 2009

Adding Adsense Code Inside Single Post Only in XML Blogger Template

A page element is applied to the general blogs layout. Adding a page element for AdSense above or below the `Blog Post` section doesn't allow you to limit the display of Google ads on a single post only. However, there is a solution to this problem.

This technique is for advance blogger but it doesn't mean the beginners couldn't do it also. Every tutorial must be understandable to beginners also, so as possible as I can, I have made simple steps to make it easy for beginners to follow. I have included useful images to make it more understandable. Lets start.

Step 1: Generate your AdSense Code

Since our concern basically is with AdSense and Blogger, we'll start by generating our AdSense code. It looks like this one.

Step 2: Cleaning your AdSense Code

Cleaning your adsense code is very important to errors. As you have observed, there are some highlighted text on the image above. These highlighted text must be remove like this image below.

Though we have already done removing the highlighted text, the code is still now clean. We still have to replace the double quotations with the single quotations. After doing it, the clean AdSense code would look like this one.

Step 3: Inserting the Adsense Code to our XML Template

To understand more clearly the thing I am going to discuss in this step, please refer always to the highlighted parts of image above.

Before you insert the code, you need to add a conditional tag to your adsense code to make it appear only on the single post. You need to insert your adsense code in between this conditional tag.

Conditional Tag:

<b:if cond='data:blog.pageType == "item"'>
Your AdSense Code here
</b:if>

On the `Edit HTML` section in your Layout, enable the `Expand Widget Template` to view the complete code of your template. Locate the tag "<p><data:post.body/></p>" and insert the final code above it. It should look like this image below. After inserting the code, you may now save your template.

Isn't that easy enough for beginners? If in any case there is something you don't understand or an error has appeared, feel free to comment here and I will gladly answer you the best that I could.

Sunday, January 18, 2009

Favicon Not Allowed in Blogger?! Of Course Not!

I believe there's nothing in the Blogger Terms of Service that states about favicon restrictions, not even template restrictions. You may read the terms yourself. I might have missed something. But even a keyword like "icon" or "template", I could not find any when I tried to search it.

I have tried to search it in Google also but I could not find any result that states about these kind of restrictions in blogger. All I can see are words about adding favicons to blogger or perhaps animated favicons for blogger.

Though I have found one post where it said that blogger did not allow, but was because he made it wrong that resulted to an error and then concluded it was not allowed. Don't be deceived immediately the the things you've read. As I have said, I might have missed something, so read the terms yourself.

If you want to learn how to change your favicon, you better start reading "how to change favicon in blogger".

If Blogger really doesn't allow things like this one, I believe there are remedies they have made in their system or perhaps should not allowed us to have full control to out templates.

Happy Blogging