Cara Membuat Google Breadcrumbs Stylish

	Dengan SEGALA HORMAT ,Kami mohon dukungan dan Partisipasinya dalam membebaskan Indonesia dari reputasi BURUK oleh Search Engine Google,Yahoo & Bing sebagai Negara Penghasil SPAM dan SPAMMER terbanyak ke-3 (tiga) didunia, Kami minta waktu anda sejenak untuk bergabung pada komunitas SEO Indonesia tanpa SPAM dan SPAMMER,terima kasih atas partisipasinya.

Breadcrumbs sekarang tidak hanya dipakai untuk navigasi untuk pengunjung dan web crawler,namun juga untuk menambah style dan keindahan blog,penerapannya pun dapat di rubah sesuai selera masing-masing,caranya agak sedikit berbeda dengan membuat tabel di postingan,lalu,bagaimana Cara Membuat Google Breadcrumbs Stylish agar bisa diterapkan pada blog blogspot?.

Style Yang saya bagikan untuk Membuat Google Breadcrumbs Stylish dibawh ini hanya dasarnya saja,anda bisa merubah bentuk dan backgroundnya sesuai dengan selera anda masing-masing.

Berikut pa yang harus anda lakukan

1. masuk ke Template =>> edit HTML
2. klik CTRL+F
3. Cari kode berikut

<b:include data='top' name='status-message'/>

4. Paste-kan kode HTML dibawah ini dibawah kode tersebut

<b:include data='posts' name='breadcrumb'/>

5. Kemudian cari lagi kode

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

6. Paste kode dibawah ini di atasnya

<b:includable id='breadcrumb' var='posts'>
                                <b:if cond='data:blog.homepageUrl == data:blog.url'>
                            <!-- No breadcrumb on home page -->
                     <b:else/>
          <b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><a href="http://www.netoopsblog.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
               <b:loop values='data:posts' var='post'>
                   <b:if cond='data:post.labels'>
                        <b:loop values='data:post.labels' var='label'>
                             <b:if cond='data:label.isLast == &quot;true&quot;'>
                                              
                            <a expr:href='data:label.url' rel='tag'>
                           <data:label.name/>
                             </a>
                             </b:if>
                                    </b:loop>
                                   <b:else/>
                                      Unlabelled
                                    </b:if>
                                        
                                          <span>
                                            <data:post.title/>
                                          </span>
                                        </b:loop>
                                      </span>
                                    </p>
                                    <b:else/>
                                    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                                      <!-- breadcrumb for the label archive page and search pages.. -->
                                      <p class='breadcrumbs'>
                                        <span class='post-labels post-navigation'>
                                          <a expr:href='data:blog.homepageUrl'>
                                            Home
                                          </a>
                                           Archives for
                                          <data:blog.pageName/>
                                        </span>
                                      </p>
                                      <b:else/>
                                      <b:if cond='data:blog.pageType == &quot;index&quot;'>
                                        <p class='breadcrumbs'>
                                          <span class='post-labels post-navigation'>
                                            <b:if cond='data:blog.pageName == &quot;&quot;'>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               All posts
                                              <b:else/>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               <span>Posts filed under
                                                 <data:blog.pageName/></span>
                                            </b:if>
                                          </span>
                                        </p>
                                      </b:if>
                                    </b:if>
                                </b:if>
                          </b:if>
        </b:includable>

7. terakhir,cari kode  

]]></b:skin>

8. Pastekan lagi kode berikut diatasnya

 .breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}
.post-navigation > a:after, .post-navigation > a:before {
    border-bottom: 13px solid transparent;
    border-left: 11px solid #B7B7B7;
    border-top: 13px solid transparent;
    content: "";
    display: inline-block;
    left: 100%;
    position: absolute;
    top: -2%;
    z-index: 1;
}
.post-navigation > a:after {
    border-left-color: #F2F2F2;
    left: 99%;
}.post-navigation > a:hover {
    padding-left: 23px;
}
.post-navigation > a {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 1px solid #B7B7B7;
    color: #000000;
    padding: 4px 12px;
    position: relative;
    text-decoration: none;
transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
}
.post-navigation > span {
    padding-left: 14px;
}

Pada sebagian template,kode breadcrumbs diatas tidk bisa diterapkan kalu kodenya belum di parse,untuk keberhasilan anda dalam menerapknnya,parse-kan kode berikut pada situs parser secara online.jika masih belum berhasil maka pertanda pada tatanan HTML blog anda terdapat kode-kode error atau terlampau banyak chace.

Demikian Cara Membuat Google Breadcrumbs Stylish,semoga apa yang saya sampaikan jadi manfaat bagi anda.

terima kasih atas perhatiannya.

Jika Video Dapat Gangguan Klik Button >>