How to Link a Menu Bar Link to a Label or Category

how to clean up your sidebar

For our tutorial today we are going to explain how to link a menu link in your navigation bar to a specific label (Blogger) or category (WordPress) on your blog. We have posted several tutorials in the past about how to set up pages/a navigation menu on your blog (see Adding Pages to your Blog & Adding a navigation menu to Genesis Theme) but in them we do not cover how to go about linking the menu links to labels/categories rather than to pages.

Linking your menu links to labels/categories is helpful if you want to showcase all of the posts for a specific label/category when that link is clicked on from the menu bar. For example, you might have a link in your menu bar for “Parties” that when clicked on, you want to show a list of all of the posts you’ve added the “parties” label/category to. This tutorial will explain how to achieve that in both WordPress and Blogger.

In WordPress

Step 1. Go to your WordPress dashboard and scroll down to “Appearance”. From there, click on the “Menus” link.

step1menu

Step 2. Scroll down to “Categories” and click the arrow to expand. Put a check mark next to all the categories you’d like to add to your navigation (note: categories must be in place prior to this step), and then click on “add to menu”.

step2categories

Step 3. This step is optional, but if you’d like to change the name of your category just in the navigation, you can do this by changing the text under “Navigation Label”.

step3name

Step 4. Last, just pick where you want your menu to show up (primary or secondary navigation) and click “Save Menu” and you’ll have categories linked in your navigation menu bar.

step4save

In Blogger

First you need to make sure you have your labels in place. View this tutorial for instructions on how to add labels. Once you have your labels in place, you can follow these steps:

Step 1. Temporarily add the labels gadget to your sidebar by going to “Layout” > “Add a Gadget” and finding the “Labels” gadget.

1

Step 2. View your blog and find the new “Labels” section at the top of your sidebar. Click on the label you want to appear in your menu bar. This will create a direct link for that label in the address bar. Then copy the url in the address bar.

2

Step 3.  Go back to your dashboard and go to “Layout” > “Pages” > “Edit.”  Note: if you don’t already have the pages gadget added, follow this tutorial to add it. Then return to this step.

3

Step 4. Click “+Add external link.”  Title the new link and then paste in the url that you just copied for that label. Then click “Save Link.”

4Step 5. Click and drag your new link to reposition where it falls on the menu bar. Then click “Save.”

5Do this for each menu link you want linked to a label. Then you can go back to “Layout” > “Labels” > “Edit” and remove the labels gadget from your sidebar if you don’t wish to keep it there.

Removing “Showing post with label…show all posts”

You may notice a “Showing posts with labels…show all posts” box when you click on the new link as shown below.

6

It’s kind of an eye sore, so to remove it, follow these steps:

Step 1. Go to “Dashboard” > “Template > “Edit HTML.”

7

Step 2. Click anywhere inside the template code box and then open a search box by typing CTRL + F. The search box will appear in the top right corner of the code box. Copy and paste in this code:

<b:includable id='status-message'>

11

After you’ve found that code in the html, click the arrow next to it to expand the rest of the code.

8

Step 3. Remove this portion of the code:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

9

Step 4. Replace it with this one:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

 

10

Save the template and the box will be removed.

If you have any questions, please feel free to leave them in the comments section and we will answer them as soon as possible.

 
Blog Templates - Designer Blogs

Posted by: Erin

Cleaning Up Your Sidebar

how to clean up your sidebar

One of the biggest disadvantages that bloggers can create for themselves is the aesthetic of their blog.  Readers will judge your blog within the first few seconds of looking at your page.  You could have the best content in the world, but if your blog looks sloppy, readers aren’t going to want to stick around.  Here are a few tips on how to clean up your sidebar to make it more appealing.

before

Take the above blog.  The basic design is clean and straightforward.  The post image is nice.  The content is promising.

The sidebar is a distracting mess.  The widgets don’t line up, the media buttons are awkward, the ad doesn’t fit.  It needs some work.

abouts

The about section should match the overall look of your blog.  I know there a million great fonts out there and you want to use them all, but DON’T!  Use the same fonts that come with your blog design.  If you don’t know what they are, ask!  Ask your designer.  Use font identifying sites to see if you can get a close match.

You can see on the example above that example on the right is justified to the left instead of being centered on the page.  One of the easiest ways to clean up your page is to make sure that all items are centered in your sidebar.  Simply putting <center> before the widget code and </center> after the code will give you a nicely centered item.

connect

There are hundreds of different social media icons available on the web and it is tempting to use some on your blog that stand out and make them different from other sites.  DON’T!  Try to find some simple icons that match your site or visit our blog accessories shop and purchase some custom designed ones from us. We’d love to help create coordinating social media buttons for you that blend nicely into your page.  The icons themselves are recognizable enough for them to stand out on there own.  This is one area where it is best to be understated.

sponsor

One of the biggest blunders I see with blog sidebars is poorly sized advertisements.  Generic ads come in several preset sizes and many bloggers, not knowing the dimensions of their sidebars, put up the ads they like best.  This can leave ads that are cut off.  This looks terrible and does a disservice t0 the companies that you are representing.  Try to place ads that are the width of your sidebar, or a bit smaller so that they fit nicely and can be shown in their entirety.  If you don’t know the dimensions of your sidebar, ask your designer.  They would be thrilled to help.  If you don’t have your own web designer, try downloading Firebug for the the Firefox browser.  This plugin allows you to hover over web elements to find out information about them;  information like width and height.

A few other sidebar foibles you would do well to consider:

– Limiting blog lists.

If you want to make a list of favorite blogs or websites, keep it short.  And endless scroll is annoying to readers and is an unwise use of space.

– Removing blog counters.

You should care about how many people visit your site.  Your readers should not.  They should appreciate you for your content, not your popularity.  Blog counters can come off as desperate and you aren’t desperate!

– Removing blog badges for your friends’ sites.

We know that you are well-intended supporting your girlfriends’ blog – but endless amounts of linky buttons clutter your sidebar and distract from your aesthetic.  If you really like a blog or product, write about it.  It will be flattering to the subject and will drive more traffic to their site than a sidebar link.

after

Ah! Now doesn’t that feel better?
 
Blog Templates - Designer Blogs

Posted by: Emily

Free November Wallpaper

Free November Wallpaper

october wallpaper previewFree November Wallpaper

Enjoy this month’s wallpaper on all of your devices!

For personal use only.

 
 
Premade Blog Themes - Designer Blogs
Posted by: Erin

How to Use a Custom Domain on Blogger

How to Use a Custom Domain on BloggerBy default, Blogger uses the blogspot.com url extension on all blogs created through Blogger (e.g. www.myblog.blogspot.com). But what if you want to drop the blogspot.com extension and use a custom URL (e.g. www.myblog.com) as your blog address instead? Well this tutorial will show you how.

It’s a great idea to switch over to a custom URL because they appear more professional and are far better for SEO. When using a custom URL, your readers will enter in your custom URL into the address bar to find your blog instead of your default blogspot.com URL. Your blog will still continue to be hosted by Blogger, which means you’ll still log into your Blogger dashboard the same way and Blogger will continue to host all your content (post, gadgets, images, etc.)– the only difference is that your blog will now have new and professional looking URL when people view it. So lets take a look at how this is done.


PART 1: PURCHASE A DOMAIN

The first thing you’ll need to do is purchase a domain name from GoDaddy (if you already have one, skip to part 2). Head over to GoDaddy.com and click on “Domains” and then “Domain Name Search”

9
This will then allow you to search for available domain names. You may have to try a few different names in order to find one you like that is available. Once you find an available domain name, then select it and it will be added to your cart. You can then choose whether or not you’d like to make it private. It will offer you to add Website Builder and Linux Web Hosting, but DO NOT purchase those as you will not be needing them for this. If you’d like an email address to match your domain, you can opt for that as well. Then just proceed to checkout and enter in the necessary information to make your purchase.

Now that you’ve secured a domain name, you can move on to part 2.


PART 2: SET UP YOUR DNS ZONE FILE

You will most likely already be logged into your Godaddy account and ready to do your domain transfer, but if not, go ahead and log in by going to GoDaddy.com and entering in your login info.

First we need to set up your DNS settings. DNS stands for Domain Name System, and a DNS server determines what site a given address takes you to. So far, you have a domain name but none of the servers on the internet know what to do with it yet. You’ll need to do two things (1) create a CName and (2) create A(Host)’s so visitors who leave off the www won’t see an error page.

1. Log into your GoDaddy account and click the big green “Manage” button next to Domains.

1

2. Next click the domain name you’d like to work with.

2

3. On the Domain Details page click the “DNS Zone File” tab.

3

4. Scroll down to the CName (Alias) section and find the “www” host. Click the Edit Record button and in the “Points to:” area, first delete whatever is currently there (most likely it’s set to: @) and replace that with ghs.google.com instead. Set the TTL to 1 Hour if it’s not already set to that. Then click the big green “Finish” button.

4

5. Now scroll back up to the A (Host) section and delete ALL existing A (Host) records by clicking the trash can icons next to each one.

6

Now click “Add Record.”
7
6. In the box that pops up, click on the drop down menu under “Record type:” and click “A (Host)”

Then in the “Host:” box, add your new URL WITHOUT the www at the beginning (see example below).
And add the first of these FOUR IP numbers:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Then click the big green “Add Another” button so you can add the remaining three IP numbers. After you’ve done this for all four IP numbers, then you can click the “Finish” button. Remember that there are a total of four IP numbers, so you will need to repeat step 6 for each of the four IP numbers listed above!!

5

7. Your four new A (Host) records will now look like this:

8

Now you are done with the GoDaddy side of things and can head back over to Blogger to finish things up.


PART 3

Hang in there!!!! You are almost done!

8.  Log into your Blogger account. In your dashboard go to Settings > Basic > Publishing and click on “Setup a 3rd party URL for your blog”

10

9. Type in your new domain name in the area provided. Be sure to check that you want the redirect in place. You can leave the “use missing file host?” option set to no.

11
Click “Save” and you are…

DONE!

Now view your blog and you’ll see your new URL in place of your old default blogspot.com address. You now you have the benefits of a .com with the easy maintenance of a blogspot! Congratulations! (NOTE: Sometimes it takes a few hours or even a day or so for the transfer to take place. Don’t be nervous, it will happen!)

Remember you can always have us DB girls transfer your domain for you, for a $40 fee. To purchase our help with this, just visit our blog accessories shop and purchase the “domain transfer” option. We currently only transfer blogs using godaddy.com domains, so keep that in mind if you want us to do your transfer.

And as always if you have any questions or ideas for future tutorials leave a comment here or contact us.

Happy Blogging!!

Premade Blog Themes - Designer Blogs

Originally posted 10/5/10 by: Lauren
Updated 10/21/16 by: Erin

12 Favorite Free Halloween Fonts

free-halloween-fonts

1. Nightmare | 2. Night Stalker | 3. Black Widow | 4. Sabonete | 5. Horror Hotel | 6. October Crow | 7. Ghoulish | 8. 28 Days Later | 9. Cartographer | 10. Magic School | 11. Death Branch | 12. Scary Halloween

 
 

Other free Halloween fonts: Spooky Halloween Fonts
Other popular Halloween printables: Halloween Prints | Halloween Tags | Halloween Bag Toppers

Premade Blog Themes - Designer Blogs

Posted by: Erin