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

Thursday Thunks (04.16.09)

Welcome to the April 16th version of Thursday Thunks!

Where we make you think a little bit before you blog!

We pick a subject, and your job is to interpret it anyway you want. Write about it on your blog... simple as that. Maybe you can interpret it as a picture - we don't care! Don't forget to go visit the other participants' blogs. Read and comment about all their Thursday Thunks! Thats what all this is about afterall, isn't it? We'll have so much fun and become lifelong friends....

This week we will answer some crazy questions brought to you by Kimber, the color rainbow and the number 2.

1. Recently Berleen and I discovered the allure of the Twilight series. Have you ever been sucked in to the latest "thing"? (Like Harry Potter, the movie Titanic, social networking, etc. etc. etc.)

I almost always am late getting sucked into the latest thing. With Harry Potter, I refused to read them until I saw an interview with J. K. Rowling after Goblet of Fire was published and I realized I might actually LIKE the books. I gobbled up the first four in a week. With Twilight, I guess I was living under a rock, because I hadn't even heard of them until last Fall, and I ended up getting them for Christmas.

2. What software do you use for your email?

Personal email = gmail. Work email = Outlook

3. Are you comfortable being nude?

Sure, in the shower =P
Maybe a better question is am I comfortable TALKING ABOUT being nude?

4. What is something you plan on doing this summer?

My husband's family reunion in June.

5. Do you have a favorite movie/book quote? If so, what is it?

Not really. I have to admit that quotes just don't tend to stick with me. I love them at the time, but they are usually quickly forgotten.

6. How many email addresses do you have?

Let's see... One for me, one for work, one for my hubby and me, one for junk email... 4, I guess!

7. Is the sky falling?

NO!

8. Have you been to the Grand Canyon?

No, but I'd like to go.

9. When was the last time you mailed a hand written letter?

Years ago, literally. I can't even remember, to be honest.

REVIEW: Wicked Lovely by Melissa Marr

Series: Wicked Lovely #1
Genre: Young Adult, Fiction, Fantasy
Pub Date: April 2008, HarperCollins
Format: Trade Paperback, 352 pages
Source/FTC Disclosure: I purchased my copy of this book. I was in no way compensated for this review and my opinions are my own.

Rule #3: Don't stare at invisible faeries.

Aislinn has always seen faeries. Powerful and dangerous, they walk hidden in mortal world. Aislinn fears their cruelty—especially if they learn of her Sight—and wishes she were as blind to their presence as other teens.
Rule #2: Don't speak to invisible faeries.

Now faeries are stalking her. One of them, Keenan, who is equal parts terrifying and alluring, is trying to talk to her, asking questions Aislinn is afraid to answer.
Rule #1: Don't ever attract their attention.

But it's too late. Keenan is the Summer King who has sought his queen for nine centuries. Without her, summer itself will perish. He is determined that Aislinn will become the Summer Queen at any cost—regardless of her plans or desires.
Suddenly none of the rules that have kept Aislinn safe are working anymore, and everything is on the line: her freedom; her best friend, Seth; her life; everything.
Faerie intrigue, mortal love, and the clash of ancient rules and modern expectations swirl together in Melissa Marr's stunning 21st century faery tale.

MY THOUGHTS

First off, I have to say it's nice to be posting a review again! I haven't had as much time for reading as I would like over the last few days, but in the end I MADE time for Wicked Lovely...

I have to admit that before reading Faerie Wars by Herbie Brennan a few weeks ago, I hadn't really read any books that were devoted to faery folklore. Actually, I'm not sure how devoted to the actual faery lore that book was, but I think Melissa Marr did an amazing job writing about faeries in Wicked Lovely. It's safe to say that I'm now a fan of faeries, whereas before I could take them or leave them. I decided to buy this book after I knew that Marr would be doing a book signing at a nearby Barnes & Noble at the end of the month. I wanted to see if it would be worth going to the signing to get the newest book in the series, so of course I had to at least read the first book. And, barring some unforeseen complication, on April 26th at 2:00pm you can bet I'll be in the crowd waiting to get my books signed!

One of my favorite aspects about this book was the quotes that Marr took from classic books about faerie folklore and used to open each chapter. You can really tell that she did her research before writing this story. Since I began reading this with little knowledge of the faery lore, I feel like I also learned a bit by reading this book. And don't we all like to learn something new? :-)

And best of all, I loved the characters. LOVED them. All of them. From the beginning I was swept into the story and the characters and I didn't want to put the book down. Aislinn and Seth just seemed so real and were very well-developed. Aislinn had natural moments of fear and doubt as her experiences with the faeries unfolded, yet she was also able to draw upon inner strength to face her fears and do what must be done; indeed, what was inevitable. I also enjoyed the romance between Aislinn and Seth--Marr portrayed their blossoming relationship so beautifully. I also liked Keenan, the Summer King, and Donia, the Winter Girl, from the very beginning. Marr simply did a wonderful job with ALL of the characters' personalities, interactions and behaviors, I can't say enough about that!

There was one thing I didn't particularly like, and I'll try not to give too much away here, but this will be a bit of a spoiler, it can't be helped... I thought the final scenes with Beira, the Winter Queen, were rather anti-climactic. However, I was mollified (well, actually quite pleased) as I read how it was all resolved. The whole storyline and the world Marr wrote about really were incredible. I cannot wait to read Ink Exchange and Fragile Eternity.

Other reviews of Wicked Lovely:

Books and Needlepoint ~ Tiny Little Reading Room
The Written World ~ Teen Book Review ~ Becky's Book Reviews
Stephanie's Confessions of a Book-a-holic
Paperback Frenzy ~ About Books ~ Wondrous Reads
The Book Reader ~ Literary Escapism ~ Liv's Book Reviews
A Blog of Books ~ Midnight Twilight's Book Blog
Bookluver-Carol's Reviews ~ And Another Book Read...
The Longstockings ~ On The Nightstand ~ Ink and Paper
Gimme More Books! ~ Bloody Bad Book Blog ~ Bart's Bookshelf

Devourer of Books ~ My Favorite Author ~ Things Mean a Lot

Lissa's Long Yarn ~ The Page Flipper ~ Serendipity

Teaser Tuesdays: Wicked Lovely

Teaser Tuesdays is hosted by MizB at Should Be Reading. Please check out her blog for more teasers! She asks you to:

(1) Grab your current read

(2) Open to a random page

(3) Share two (2) “teaser” sentences from somewhere on that page

(4) BE CAREFUL NOT TO INCLUDE SPOILERS! (make sure that what you share doesn’t give too much away! You don’t want to ruin the book for others!)

(5) Share the title & author, too, so that other TT participants can add the book to their TBR Lists if they like your teasers!

So here's mine. I'm in the middle of two books this week, one of which I left at the office yesterday, so this little teaser will be from page 110 of Wicked Lovely by Melissa Marr...

Allison grabbed her books for the afternoon classes. Her friends shouldn't be talking to him; he shouldn't be in her space. And he definitely shouldn't radiate that inviting heat, making her think of lazy days, of closing her eyes, of relaxing...

Blogger Tips & Tricks: Functional Headers

Welcome to my second post of tips and tricks to make Blogger work for you! One of the features I began to turn green over when I saw it on other Blogger sites was a header with working links, tabs, or whatever you fancy. You can see examples on Nymeth's Things Mean a Lot and Becky's Book Reviews. (Yes, that's where the envy began, I admit it!) After fruitless hours of searching for a way to do that within Blogger's settings and layout page, I did some searching on Google, using phrases like "header tabs in Blogger" and "header links in Blogger." Finally I was able to answer the question:

HOW CAN I CREATE A FUNCTIONAL HEADER IN BLOGGER?

You know those "Add a Gadget" links in the "Page Elements" section of Blogger's "Layout" tab? Notice you don't originally have that option with the header? Well, here are instructions for adding elements to the header (meaning I could create tabs and links): Blogging For Good In the Modern World.

Finally! I could give up my header-envy and focus on other blog elements to be jealous about. :-)

You can choose to add your gadget above or below your current Header field. One quirk I haven't been able to fix: The additional element is partially hidden behind the sidebar and posting sections in the Layout. It doesn't appear that way on the actual blog, but for editing and moving objects, it's made it slightly more challenging. If anyone knows how to fix that, I'd be eternally grateful! See, these posts aren't all about me telling you what I know about Blogger, because I still have a lot to learn and hope that many of you will share your ideas with me.

But back to links in the header... Here's what I chose to do--you may think I'm nuts and will opt for an easier method. I decided to create buttons that had the look and feel of my blog, using a combination of Picture Viewer/Editor (on the Mac, you could use Paint on a PC) and Power Point to play around with text options, etc. (If you have access to it and are familiar with Photoshop, I'm sure you could do really amazing things with buttons, etc.) Anyway, Macs have this really cool feature where you can "take a picture" of just a part of what is on your screen, similar to the Alt-Print Screen option on PC's. **If PC's let you take a partial-picture, perhaps someone can share that info in a comment.** Anyway, I took a picture of one of the butterflies in my header, sized it down and popped it onto a rectangle of a coordinating color in my blog (all in the Picture Editor) and then I typed up some text (without a background color) in Power Point (again I tried to get a custom font color similar to one of my blog colors), copied & pasted it on the picture, tweaked the text box size as needed, and boom! A picture of a tab that could be linked back to a post on my site. Not to mention, we've also confirmed that I'm a HUGE dork!

I uploaded all of my "tabs" to Photobucket--if you aren't using a photo sharing web site, I highly recommend it. You'll be surprised how quickly you take up your Blogger storage space by uploading every picture you need, every time you use it. BTW, as for how to size your tabs, I have to be completely honest: I got lucky that all of mine fit perfectly across my header. But you should be able to determine pixel widths that would work to match up to the width of your Outer-Wrapper (mentioned in yesterday's post). Or, if you're just going with simple text links, the text will conform to the outer-wrapper width, and depending on how many links you have, you may end up with multiple rows when you look at the blog in your browser window.

Anyway, from there I added an HTML gadget to my header and pasted the code for each tab, one right after the other. (I would also recommend using an HTML gadget as opposed to Link Lists, so you can run the links horizontally under the header, assuming that is the look you are going for.) Here's an example of what the HTML code looks like from Photobucket (yes, it's ugly, I'm sorry):



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

Using the "a href" code above, it is linking to the picture's address on the photobucket web site. (The code that begins with <img...> is for the picture itself.) You can change that web address to link to the post with the information pertinent to your tab by replacing that code with the permalink of your post:



<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>

NOTE: I chose to center my tabs while I was adding them, since originally I wasn't sure if I'd have enough to fit across the header. You can do this by starting the HTML code with <center> and closing it off after you've pasted all your tab codes with </center>.


You can link text the same way you linked those pictures up there, as well. Simply use the code as follows:



<a href="URL of web site you want to link to">Text you want to link.</a>

If you want the link to open in a new window so that your site doesn't disappear from view, add this code right after the "URL you wish to link to"

target="_blank" (precede the word target with a space as shown in the example below)

So your new code looks like this:



<a href="URL of web site you want to link to" target="_blank">Text you want to link.</a>

You can add that target="_blank" code after any URL you want to open in a new window. So you could do the same with your tabs or any links you include in your blog posts. I have to admit I haven't bothered with it there because it would be too much trouble--I know most of us don't have all the time in the world to devote to our blogs--we need to post and move on!

Questions? Need clarification? Does this help you at all? Leave a comment and let me know what you're thinking!

Stay tuned for the next edition of Blogger Tips & Tricks: Grab Buttons/Badges