Breadcrumbs, which is similar to pagination, works well for sites having hierarchically arranged pages. They are often seen on the top-most of a site's body. Some as simple as text while others are styled for their theme. Today, we will be adding a total of 4 choices "awesome" breadcrumb trail to your site. Better try this one to add a "PRO" looking and helps you manage your navigation specially those e-commerce sites.
HELPFUL THOUGHTS
These helpful thoughts is quoted from Jacob Gube of smashingmagazine.com.
"Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.
You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.
Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website."
You might be asking yourself, "Is this automatic?". Unfortunately, no. But once you're done, the output is worth the effort. I compiled four styles of breadcrumbs on one external file (just for YOU) to avoid mess and keep you comfortable. These styles are taken from four different sites which can be seen on the demo page. Ok, head to the tutorial.
FILES NEEDED
How to use these files? Click Here!
HEADER CODE
Where to place these codes? Click Here!
<link rel="stylesheet" href="http://mwtdatabase.weebly.com/files/theme/breadcrumbs.css" type="text/css" />
Notes:
Change the red text with your site address. Since we want each page to be affected by the style, you need to insert the code above on your sites head (not page head). Just go to SEO > Header code and paste it on the box and be sure to save the changes. More instructions on "3 ways in edting your site's <head>".
BODY CODE
Where to place these codes? Click Here!
To use breadcrumbs, I prepared a simple illustration. We assume you have the following menus and sub menus:
1. HOME
2. IMAGES
A. Abstract
a. New Arrival
b. Featured
B. Nature
3. VIDEOS
A. Comic
B. Real Footage
These will be the sample breadcrumbs structure:
For Abstract Page : HOME > IMAGES > Abstract
For Featured Page : HOME > IMAGES > Abstract > Featured
For Real Footage Page : HOME > VIDEOS > Real Footage
You need to start with your homepage and be reminded that each menu has their own link except the last one knowing that it's your destination page.
You need to insert the code for each corresponding pages. To do that, simply go to the page you want, drag an embed code element and paste the HTML codes below. The location of your breadcrumbs should be on the top of each page and the width should be as wide as your container (do not add elements on its left or right).
Now here are the HTML codes, 4 of your choices, you can add to any of your pages.
Style 1.
<ul class="breadcrumbs1">
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6">Widgets</a></li>
<li>About Me</li>
</ul>
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6">Widgets</a></li>
<li>About Me</li>
</ul>
Style 2.
<ul class="breadcrumbs2">
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6">Widgets</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Time%20and%20Dates?max-results=6">Time and Dates</a></li>
<li><a href="http://www.myweeblytricks.com/p/about-me.html">About Me</a></li>
</ul>
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6">Widgets</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Time%20and%20Dates?max-results=6">Time and Dates</a></li>
<li><a href="http://www.myweeblytricks.com/p/about-me.html">About Me</a></li>
</ul>
Style 3.
<ul class="breadcrumbs3">
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6">Widgets</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Time%20and%20Dates?max-results=6">Time and Dates</a></li>
<li><a href="#" class="current">About Me</a></li>
</ul>
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6">Widgets</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Time%20and%20Dates?max-results=6">Time and Dates</a></li>
<li><a href="#" class="current">About Me</a></li>
</ul>
Style 4.
<ul id="breadcrumbs4">
<li><a href="http://www.myweeblytricks.com/" title="Home"><img src="http://mwtdatabase.weebly.com/files/theme/breadhome.png" alt="Home" class="home" /></a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6" title="Sample page 1">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Time%20and%20Dates?max-results=6" title="Sample page 2">Time and Dates</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6" title="Sample page 3">Widgets</a></li>
<li>About Me</li>
</ul>
<li><a href="http://www.myweeblytricks.com/" title="Home"><img src="http://mwtdatabase.weebly.com/files/theme/breadhome.png" alt="Home" class="home" /></a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6" title="Sample page 1">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Time%20and%20Dates?max-results=6" title="Sample page 2">Time and Dates</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6" title="Sample page 3">Widgets</a></li>
<li>About Me</li>
</ul>
Notes for the 4 HTML codes above:
Yellow text - Name of your menu or page or category.
Green text - link of your menu or text.
CONCLUSION
Once configured, publish your site. If the output is correct, then time to start working with other pages. Again, remember that adding breadcrumbs is slow but worth the effort.
Now on your part, if you successfully insert this on your site, why not post your site below so that every can see how you did it.
I will wait for it.
0 comments: