About   All Tips   Tips by Category   Tips by Ability   Help!

Drop Down Labels-Advanced


I recently did a makeover for someone who wanted their labels displayed in a drop down menu rather than a bulky list. Blogger does not offer this option yet, and I had no clue how to do it. Luckily, I stumbled upon this tutorial by Amanda over at BloggingTips.com. Woooo hooooo! Jackpot!

Amanda's drop down labels tutorial requires that you make changes to the HTML of your template. It is NOT for beginners. I recommend that you download a copy of your current template before beginning. Practice this tutorial on a practice blog and make sure you completely understand what to do and are successful in doing so BEFORE installing this feature on your real blog.

Make sure you have a labels gadget on your blog (or practice blog) before getting started or you will not be able to find the code that needs to be replaced in your template.

Good luck, have fun, and BE CAREFUL! While you're in there, consider decluttering your sidebars even more by removing some gadgets (the more you have, the slower your blog will load), putting your archives in a drop down menu, or removing the dotted separators in between your sidebar items. :)

Related Posts:
Drop Down Menus- Archives
Drop Down Menus- Custom (Intermediate)
Remove Dotted Sidebar/Post Separators (Intermediate)

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! :)

Custom Colors

Ever want the hex or RGB value for a color that you see on the internet? Perhaps you really like the pink that I used for my sidebar title underline and would like to use the exact shade on your blog. After a lot of trial and error, you might be able to stumble upon a very similar shade, but it would be tough to pinpoint the exact color. The good news for Firefox users is that there is a add-on called ColorZilla that you can install that will show you the value for any color that you see on the web!

This tip is for Firefox users only, so those of you who only use Internet Explorer are out of luck this time. I do have an upcoming tip that will show you how you can get custom colors on IE, but it's not nearly as cool as this one. :(

Here's how to use ColorZilla:

1. Install ColorZilla by clicking here.

2. Find a color on the web that you want the RGB or hex values for. Click on the eyedropper icon in the bottom left corner of your screen (circled in purple in the image below). If you do not see an eyedropper icon, right click on the page and select ColorZilla-->eyedropper.


3. Move your mouse (represented by the cross in the image above) to the color that you would like to copy, then look down in the lower left corner of your screen. The RGB value and six digit hex code will be shown. Write these codes down for future reference.

Another great feature of ColorZilla is the Webpage DOM Color Analyzer. You can get the color scheme for any page by right-clicking on the page and selecting ColorZilla-->Webpage DOM Color Analyzer. A palette containing most of the colors on the page will appear at the bottom of your screen. Simply click on the color that you want and the RGB and hex values will pop up. Too cool!

Related Post:
Custom Colors For Your Blog - SUPER Easy!

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! :)

Search For Tips!

Click below to search for tips by:

Category - Coming Soon!
Ability Level

An alphabetical list of all of my tips can be found in my sidebar. -->

You can search for tips by using the search box in the upper left corner of this blog. Use simple keywords for best results.

Looked everywhere, but can’t find the tip you’re looking for? Check out my help section!

Tips by Category

Coming Soon! Please refer to the alphabetical list of all tips in my sidebar. :)

How To Get An HTML Code For Buttons/Images

There are many reasons why you might need an html code for an image. Perhaps you've created a button that you would like to share with others. Maybe you'd like to add larger photos to your sidebar. Whatever the reason, getting an html code for an image is as easy as 1, 2, 3.

How to get an HTML code for your photo/button:

1. Upload your image to Photobucket.

2. Go to the album that your image is in. Find and hover over the thumbnail of the image.


3. Copy the HTML code from the box that pops up. Most often, the code will automatically copy when you click on it. If it doesn't, you'll need to click on the code to put your cursor in the box, then triple click to highlight the entire code. There will be characters in the code that will not appear in the box, so be sure to copy the whole thing.

Voila! Now you have an html code for your image! There are several other online photo storage sites out there. I used Photobucket in this tutorial because it's what I am most familiar with. :) 

Related Posts:
Create A Grab Box For Your Button
Customize Your Sidebar Photos

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! :)

Announcements- An Alternative to Sticky Posts

I must admit, I'm not a big fan of sticky posts. I would rather make a short announcement for my readers to see instead.

You may wish to create an announcement that links to a giveaway that you are having or to relay some other important information that you really would like for your readers to see.

To create an announcement above your posts:

1. Go to your page elements page. (dashboard-->layout-->page elements)

2. Click on 'add a gadget' above the 'blog posts' section. If there is not an 'add a gadget' option in this area, then click on the one under your header or above your sidebar.

3. Scroll down and click on 'Text'.



4. Write your announcement in the big box, adding a link if you'd like. You can modify the color and bold or italicize the text to your liking. If you wish to center your announcement, you can do so by clicking on 'edit html' in the right corner and adding <center> before the text and </center> after it.

5. Save.

6. If you were not able to add a gadget above Blog Posts, you will need to click and drag your new text gadget so that it rests above this section. See example below:



Enjoy your announcement!

Related Posts:
Sticky Posts
Add Recurring Words to Posts (like a signature)
Scheduling Posts to Publish at a Later Date

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! :)

Improve Blog Loading Time

Having a blog that loads slower than Christmas is a sure way to repel readers. No one (not even your mother) wants to wait fifteen seconds to read what you have to say.

Not too long ago, I discovered Pingdom's free full page test tool. Check it out! It shows you exactly how long it takes your blog to load for others. Using your own computer to judge load time is inaccurate, but Pingdom does this for you from an external source.

To see how fast your blog loads:
1. Click here to go to the Pingdom free full page test tool.
2. Enter in the URL (web address) of your blog.
3. Click on 'Test Now'. I recommend also checking the 'save test' box.
4. In a few seconds (hopefully) your test will be finished and you can see specifically what is slowing your blog down.

Here's what my recent test results looked like (for another blog, not this one):


See those blue/green/yellow lines? They show how fast each gadget on your page is loading. The longer the line, the longer it takes to load. You can see in the photo above that the background of this particular blog (red arrow) takes the longest amount of time to load, followed by the header (blue arrow). All in all, it took this blog 3.6 seconds to load (circled in orange at bottom), which is pretty fast. If I wanted it to load faster, I could make changes to the header in order to make it less bulky and remove the wallpaper in the background.

There are other ways to improve the loading time of your blog. I will share these with you in future tips. :)