Monday, June 27, 2011

How To Create Breadcrumbs Navigation

Creating a navigation menu on the top row or the term posting an article called breadcrumb, is an effective way to provide convenience of visitors in to see a blog posting categories.
Beside, in terms of SEO (search engine optimization), Google already supports this breadcrumbs. To result from a blog that has been made breadcrumbs/navigation menu above a post, you can see the picture.

cara membuat breadcrumb.

Steps :

  1. First, make sure you have made the label on the blog
  2. next, go to the Dashboard, select Layout and then select Edit HTML, do not forget to tick Expand Widget Templates .
next, find the following code (use Ctrl+F on your keyboard for searching):

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

  1. Once you find the code, put the appropriate breadcrumb following script on it.

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

    <!-- Breadcrumbs hack. By Hoctro 9/11/2006 -->
      <b:if cond='data:blog.pageType == "item"'>
          <p class='breadcrumbs'>
          <span class='post-labels'>
            <b:if cond='data:post.labels'>

              <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'> <></a>
              <b:if cond='data:post.title'>
    &gt;  <b><data:post.title/></b>

    <!-- End of Breadcrums Hack -->

  2. Then, search again the following code:

    <b:if cond='data:post.dateHeader'>
  3. If you have found, put the following code right above it
    <b:include data='post' name='breadcrumbs'/>
  4. Now, you find this code ]]></b:skin>, and put the following code on it
    .breadcrumbs {
    border-bottom:1px dotted #000;
    margin:2em 0 0.5em;
    padding:0 0 0.5em;

  5. Save your template and done.

NB: breadcrumbs navigation menu is visible only above your article or below the title of your blog when you open a page of a post instead of the main page of your blogspot

Share To Your Friends


Pasang emoticon dibawah ini dengan mencantumkan kode di samping kanan gambar.

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q:
:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57

Post a Comment


Popular Posts

Subscribe Email

Enter your email address:

Delivered by FeedBurner

Tukar Link Yuk ?,, Copy/paste code HTML berikut ke blog anda

A.O.L Blog

Get Free Music at
Get Free Music at

Free Music at

A.O.L Blog Copyright © 2009. Template created by Nadiar supported by Bey