Blogger Tips & Tricks: Grab Buttons & Favicons

***UPDATED 12/17/09 (READ ONLY text boxes)***

Welcome to my latest installment of Blogger Tips and Tricks! I decided to group Grab Buttons and Favicons into one post. Though the two aren't exactly related, they are both about promoting your blog and its look & feel (discussed in Monday's post).

Just under my profile picture in the left sidebar, I imagine some of you have noticed my grab button, which I added 2-3 weeks ago. Well, I think I actually tried to call your attention to it in a post, too. Shameless, I know. :-) I've seen several great buttons out there, and have decided to display other bloggers' buttons just above my blogroll. Everyone likes a little link love, right?! With some of these buttons, I've had to copy them myself and save them in Photobucket so that I could link them to the respective blogger's site. Others have given me code that I can copy and paste directly onto my blog with little effort--that's what I was going for when I added my grab button.

HOW TO DISPLAY AND SHARE YOUR GRAB BUTTON

Making the button was easy for me--I created it the same way I made my header tabs that I talked about in Tuesday's post about functional headers. Many bloggers are fortunate enough to have theirs made professionally, which is even more awesome! So think about what you're looking for in a grab button. I think it's important that the button reflect the personality of you and your blog. In my case, I grabbed an image right from the header and customized it with my blog's name.

The hard part of the grab button was figuring out how to create the little text box in which I could display the code for the button. (By the way, again, you'll want to make use of a photo sharing web site, like Photobucket, for this little project.) Some of you may have wondered how I got those text boxes to show up in my post the other day. It was necessary in order to show you the code, rather than have Blogger automatically convert it into links and images, but now I'll show you how to do it!

Some of the code I showed you on Tuesday was actually for my site button, here it is again:





a href="http://www.melissas-bookshelf.com"><img border="0" alt="Photobucket" src="http://i116.photobucket.com/albums/o4/mlbraves03/Blogger%20Stuff/SiteButtonFinal.png" /></a>

If I hadn't placed it within that text box, you would see my grab button, linked to this blog, within this post. In order to create a READ ONLY text box that can't be edited, place this code before the code for your grab button: textarea rows="6" cols="24" readonly="yes". (PLEASE NOTE: You can adjust the number of rows and columns to suit the size of your sidebar area and length of your code. If you leave it with fewer rows, you'll see a scrolling bar show up. You may have to tweak the number of columns (really, characters) depending on the width of your sidebar/posting area.) At the end of the grab button code, you will use this closing HTML tag (MINUS THE EXTRA QUOTATION MARK, Blogger would not let the code display without it, darn Blogger):

<'/textarea> .

So, in Blogger, add your HTML gadget, copy and paste the code for your button once (this will be the actual button display) then use a text box to display the code for your button as I explained above. There you go! Once you have your own grab button, please feel free to let me know and I will add yours to my sidebar :-)

WHAT THE HECK IS A FAVICON?

So yeah, favicon (pronounced fave-icon) was a new word to me too--I discovered it when I wanted to create a logo to replace the Blogger logo in the address bar of browsers. Well ladies & gentlemen, that little logo you see up there is called a favicon. Who knew?!

Once you create the image you'd like to use--remember, these are tiny so it's best to keep it simple--there's a fabulous site you can use to (1) shrink it to 16px by 16px and (2) host the image for free! The site is http://www.iconj.com/. You will then be able to get code from that site, which you will place in the header area in your blog, using "Edit HTML," under "Layout."

**UPDATE** I noticed a few days ago that the iconj site does not seem to be working, and I'm not sure if that's a permanent issue or not. Here is another option for you. This site, html-kit, will let you generate a favicon (.ico) file from a picture you have stored on your computer. Just upload the photo and then download the Favicon kit that is generated. You can then use FileDen, a free photo storage site, to store the .ico file. So where you see a link to the iconj.com file in the examples that follow, you would replace that link with a link to your fileden file (which should look something like this: http://www.fileden.com/files/2009/6/9/2471226/favicon.ico). (END UPDATE)

That was the part where I actually had some trouble, so I hope to eliminate that for all of you reading this. *Fingers crossed.* When I first added the code, my favicon was not displaying on Safari, but I could see it on Firefox and Explorer. Well, as it turns out, there was another piece of code that solved that problem. Because I was trying to do this specifically for a Blogger site, as opposed to WordPress or whatever, it was harder to be sure I was finding usable information. Funny thing is, when I finally DID find it... the blog was written in French. Lol. It's been years... over a decade... since I had to read French. But, thankfully, I managed to figure out what I needed to do, and suddenly my favicon was visible to me in all of my browsers. Success!

The code I was given by the ICONJ web site was as follows (pretend the "<" and ">" are used at either end. Blogger is giving me trouble with posting HTML code today):

link href='http://www.iconj.com/ico/y/r/yrn412yzqv.ico' rel='shortcut'
For this favicon to display in all browsers, you actually need to add one more little bit of code just after rel=' shortcut icon'.

That code is: type='image/x-icon'/

So the final code looks like this (again, missing the opening and closing "<" and ">", be sure you include that in yours. DARN Blogger.):





link href='http://www.iconj.com/ico/y/r/yrn412yzqv.ico' rel='shortcut type='image/x-icon'/
Copy and paste the code you are given for your favicon--remember to include that extra piece I gave you above if it's not included--in the very top header portion of the HTML code for your blog, right after the "head" tag (normally between "<" and ">", but Blogger is not letting me use some codes today, even with the text box.) Voila! Your favicon is visible to the world!

Questions? Comments? Need more help or clarification? Leave me a comment! I'm still learning all of this, but if I don't know the answer to your question, I'll definitely help you find it!

***Special thanks to an email from a reader on 12/17/09 who pointed out that my text boxes were able to be edited by others. And thanks to Google Search I found out how to fix that with this HTML Tutorial on Textarea.***

Please stay tuned for the next edition of Blogger Tips & Tricks: Useful Widgets