About   All Tips   Tips by Category   Tips by Ability   Help!

Favicons- Intermediate


I’m sure you’ve noticed how some blogs and websites have tiny little pictures beside the web address at the top of the screen. That little picture is called a favicon. This tutorial will teach you how to get one!

You will need to create an image for this tutorial. If you do not know how to create an image or have no desire to do so, you can go to Favicons 4 Free where they have several images to choose from. All you have to do is copy the code that they provide and put it into the HTML of your template. Easy peasy.

Still want to try your hand at creating your own? It is important to note that the instructions below create favicons that are visible in Firefox only. Click here for a more complicated tutorial on how to make favicons that can be seen in IE and other browsers.

You will have to dive into the HTML of your template for this one, making this an intermediate tip. DO NOT attempt to install your favicon without first downloading a copy of your current template. Be careful not to change anything within the HTML of your template, unless you are directed to do so.

Now...how to create a favicon!

1. Create an image that measures 16 x 16 pixels. This can be tricky. I suggest creating a very simple design on a transparent background.

2. Save it as a .png or .jpg.

3. Upload your image to Photobucket as a tiny image.

4. Open up a blank word or notepad document.

5. Copy and paste the following code into the blank document:

<link href="http://photobucket.com/yourfaviconimage.jpg" rel="shortcut icon"> <link href="http://photobucket.com/yourfaviconimage.jpg" rel="icon">


6. Replace the red portions with the direct link to your image. The direct link to your image can be found in photobucket, underneath the image.

7. Copy the modified code.

8. Click to ‘edit html’ on your layout page. Download a copy of your current template if you have not already done so.

9. Scroll down until you see</head>.


10. Paste the code that you modified in step 6 right above </head>. It should look like the code highlighted in blue above.

11. Preview and save if you like what you see.

Enjoy your new favicon!!!

For more help with favicons visit:
Blogger Buster
GoodNCrazy

Creating a Friendly Following

Click here for helpful blog tips!


Like my new button? Feel free to grab it for your blog!

The following tips are for people who wish to form online friendships with other bloggers. These tips are based upon experience with my personal blog, not this one, which is more informative in nature. For those of you looking to increase your following in a different manner, click here for information that may be better suited to your needs.


You have spent several hours creating your blog. You’ve written a few AMAZING posts. You’ve posted adorable photos of your children. A pretty background from The Cutest Blog on the Block adorns your blog. Your blog is AWESOME! So, why on earth aren’t people commenting on your posts? Where are your followers?

It is entirely up to you to find readers for your blog. You will need to do a little bit of work in order to have a following. The more followers you desire, the more work you’ll need to do.

If friendship is what you desire, this work is FUN!

If you want more followers, follow more blogs. If you want friendship, reach out to other bloggers through kind, personal comments and show your email address in your profile so that they can respond to your comments. If you want people to comment on your blog, leave sincere comments on the blogs of others.

It really is that simple.

To begin, I would suggest finding a few blogs that are similar to yours. If you like what you see, consider becoming a follower of their blog. Leave kind comments on a post or two. Most of the time, these bloggers will visit you and leave a comment on your blog. They may even decide to follow you!

FYI: The more comments/followers/blogs a blogger has, the less likely they will be to visit your blog. I would try to befriend people who are also trying to make friends and increase their following.

In order to keep blogging friends coming back to your blog, you’ll need (want- I hope!) to visit their blogs ever so often to read and comment on their posts. Be sure to show your email address in your profile, so that others can quickly respond to your comments if they wish to do so.

Once you have made a couple of blogging friends, I would suggest checking out the bloggers in their followers lists. If people like their blogs, chances are they’ll like yours, too!

Important note:
I do not recommend advertising your blog in the comments section of other bloggers. “Hey there! Come visit my blog…” , etc. etc. It is blatantly OBVIOUS when I get a comment on my blog or an email from another blogger that has been copied and pasted a million times. Maybe this has been an effective ploy to increase followers for some, but I personally find it to be HUGE turn off. *I do believe that a blog address (url) can be added tastefully to a comment, so long as it is accompanied by a sincere comment about the post in which it is written. Promoting your blog should never be the main focus on a comment, in my opinion. :)

You may also consider participating in a few weekly meme’s, such as Wordful Wednesday, Mama Kat’s Writer’s Workshop and Photostory Friday. Visit their blogs for prompts, rules and more information. Basically, you write a post that fits the meme. Then you go to the host blog and add your link, which will be visible to all of the other participants. There are tons of weekly meme's out there. Keep your eyes open for cool ones to participate in. Fun, fun!

That, my friends, is what worked for me in the beginning. Blogging has taken me places I never dreamed I’d go. It has introduced me to friends all over the world that I would never have met otherwise. It has been an amazing ride, one that I do not see ending soon.

Best of luck to you as you embark on your blogging adventure. Simply do for other bloggers what you would like to have them do for you and you can't go wrong. Have fun and comment away! : )

Custom Drop Down Menus - Intermediate

Have you seen the new drop down menus at the top of my sidebar? The ones for beginner tips, etc.? I only recently learned how to do these. They’re surprisingly simple and require no template tweaking, as they are created as an HTML gadget. You do have to work with HTML, making this an intermediate tip.

To create a custom drop-down menu:

1. Copy and paste the following code into notepad or a new word document:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);"><option value=""/>Title of Drop Down Menu<option value="http://link1.com"/>Link 1 Title<option value="http://link2.com"/>Link 2 Title</select>

2. Replace the colored sections with your own information. The above code only includes two links. You may add more links by adding the following code after the current links (in orange and blue above) and before </select>

<option value="http://newlink.com"/>New Link Title

3. Go to your Page Elements page and click on ‘add a gadget’. Select ‘HTML/Javascript’.

4. Copy and paste the code you modified in step 2 into the gadget box.

5. Save.

For example:

Here's how I created my ‘Beginner Tips’ drop down menu. *FYI: My actual beginner tips drop down menu contains several links. For this demonstration, I'm only using the top four.

1. First, I copied the code from step 1 above and pasted it into a blank Word document. Then I replaced the colored info with my own info. This is what it looked like:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);"><option value=""/>Beginner Tips
<option value="http://sneakymommablogdesign.blogspot.com/2009/02/blog-tip-tuesday-backing-up-your-blog.html"/>Backing Up Your Blog
<option value="http://sneakymommablogdesign.blogspot.com/2009/04/blogger-nav-bar.html"/>Blogger Nav Bar</select>

2. I copied the code in step two and pasted it twice (because I wanted to add two more links) in my newly created code before the </select> tag. Then I replaced the red words with my own info, which made my code look like this:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);"><option value=""/>Beginner Tips
<option value="http://sneakymommablogdesign.blogspot.com/2009/02/blog-tip-tuesday-backing-up-your-blog.html"/>Backing Up Your Blog
<option value="http://sneakymommablogdesign.blogspot.com/2009/04/blogger-nav-bar.html"/>Blogger Nav Bar
<option value="http://sneakymommablogdesign.blogspot.com/2009/01/see-who-visits-your-blog.html"/>Blog Statistics
<option value="http://sneakymommablogdesign.blogspot.com/2009/03/centering-sidebar-images.html"/>Centering HTML Images</select>

3. I copied the entire code that I created in Word.

4. I added an HTML gadget to my sidebar and pasted the code into the big box. Then I saved it.

I suggest starting simple. Try creating a drop down menu with just a few links. Once you have successfully created a working drop down menu, then proceed to making a longer one. The fewer links you have to work with, the easier it will be to spot mistakes.

The width of your drop down menu depends upon how many characters (letters) are in your longest title. Your titles MUST NOT exceed the width of your sidebar, or else the drop down feature will not work. You may have to play around with the lengths of your titles in order to make it fit.

For more help with drop down menus, please click here to view a tutorial over at Technical Bliss.

Related Posts:
Drop Down Menus- Labels (Advanced)
Drop Down Menus- Archives

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN 
Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)

Text and Link Colors-Beginner

This is a beginner tutorial that teaches how to change the colors of a blog using Blogger's easy to use 'fonts and colors' feature. It will also show you to where to find custom colors and how to put them on your blog.

***Disclaimer: If your blog has had some design work done to it, you may be unable to use Blogger's fonts and colors page to make changes to your blog. There is a way to make these changes within the HTML of your template and most designers prefer to make changes that way. I think it's much easier to utilize the fonts and colors tool for color changes when redesigning a blog, but that's just me. :) ***

So, let's begin!

Go to your dashboard-->layout-->fonts and colors.

Important: Be sure to PREVIEW before clicking on SAVE. Below the 'fonts and colors' choices is a preview of your blog. Make sure you like what you see before saving.

To make a color change:

1. Click on a section below page elements (refer to red arrow in image below).
2. Click on a new color from the color palettes on the right.
3. Once you select a color, scroll down to see a preview of what your blog looks like with the color change (refer to orange arrow in image below).
4. If you like what you see in the preview, click 'save'. If not, select a new color or return to the previous color. If your previous color is not there, simply click on 'clear edits'.



For example, if I wanted to make the background of my blog black instead of white, I would:

1. Click on the fonts and colors tab (dashboard-->layout-->fonts and colors).
2. Click on the box that says 'Page Background Color' (beneath the red arrow in image above)
3. Click on the color black (on the right, with all of the other colors)
4. Scroll down to see if I like the way it looks in the preview (beneath orange arrow in the above image)
5. If I like it, I will save. If I do not, I will simply select white again to revert back to my previous color or select a new one. As long as you do not click on SAVE, no changes will be made to your blog.

********************************************************************

Don't care for the colors that Blogger offers in the color palettes?

That's where that little box labeled 'edit color hex code' (boxed in yellow above) comes in.

In that little box is a # sign and six numbers. I could really get into what each number means and all that jazz, but I think you'd rather me just get to the good stuff. What you need to know is that every color has a six digit hex code.

If you know a color's hex code, you can type it into the nifty little box, hit enter, and poof! It will change the color of the item that you have selected from the list on the left.

Well, where do you go to find those codes? There are so many people out there who LOVE working with code and such. They are more than happy to share this information with you for free, via their websites. :)

The following is a list of sites with color charts that you can use:
http://www.december.com/html/spec/colorhex.html
http://www.webmonkey.com/reference/Color_Charts
http://www.htmlgoodies.com/tutorials/colors/article.php/3478961

Google 'hex code color charts' and you'll find even more color codes! If you have made the switch to a Firefox browser, you can also use a cool program called ColorZilla to create custom colors.

Simply find the color you want to use and copy its code. Then open up your fonts and colors page, erase the characters in the box, and paste in the new code. Don't forget the # sign at the beginning!

Have fun! :)