Friday, April 29, 2011

How to Make Breadcrumbs (Navigation Menu Above Post Articles)

Maybe you've seen websites others have Navigation as in the picture in addition,

If you look at it, surely you will be made easy to find out the type of category of a post.
Navigation is commonly called the Breadcrumb.

Breadcrumb also suport for Google and also received support, in other words SEO (Search Engine Optimation) you will be better.

Okay guys ... make Breadcrumb / sequential navigation menu above posts do not take a long time, please copy and paste the code below, and make Breadcrumb / sequential navigation menu at the top of the post you have mastered.
very easy!

Steps How to Make a Breadcrumb On Blogger

1. Make sure you have your Postings Label
2. Next, select Layout and then select Edit HTML, do not forget! radio click on Expand Widget Templates.
3. Next find the following code (use Ctrl + f on your keyboard to help facilitate the search):

<b:includable id='main' var='top'>

4. Then place the appropriate breadcrumb following script on it.

<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs Navigation Menu by http://www.abiez.com -->
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>

          Browse:
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
&gt;  <b><data:post.title/></b>
          </b:if>

        </b:if>
      </span>
      </p>
  </b:if>
<!-- End of Breadcrums -->
</b:includable>


5. Next find the code below

<b:if cond='data:post.dateHeader'>

6. Place the following code right above it.

<b:include data='post' name='breadcrumbs'/>

7. The final step, find this code ]]></ b: skin>
place the breadcrumb css code lines below right above it.

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

8. Don't forget ..! save the template and you can see the results


Note:
Guy's... Breadcrumbs navigation menu is visible only above or below the title of your article to your blog when you open the page rather than a posting to the main page of your blogspot.

0 komentar:

Post a Comment

Enter your email address:

Delivered by FeedBurner

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More