Cara Membuat Title Pada Breadcrumbs

Redi

Panduan Blog, Seo

Kamis, 30 Januari 2014

Belum ada komentar

Cara Membuat Title Pada Breadcrumbs - Karena kemaren banyak yang tanya tentang membuat breadrumbs yang seo  friendly dan valid HTML5 yang di sertai dengan title secara otomatis , maka kali ini saya akan menjawab pertanyaan mengenai Breadcrumbs yang di sertai dengan title . sebenarnya cara untuk memberikan title pada  Breadcrumbs ini sangat mudah , namun kayaknya karena belum ada yang share tutorial ini , mungkin anda kebingungan atau kesulitan untuk membuat title pada breadcrumbs . Anda hanya perlu menambahkan sedikit kode expr:title='bla.bla.bla' pada label dan home yang dapat membuat Breadcrumbs tersebut ada titlenya

Untuk demo anda bisa mengarahkan post anda di link Breadcrumbs atau melihat gambar di bawah ini

Berikut Cara Membuat dan Memasang Title Pada Breadcrumbs :

1. Pertama sobat cari dulu kode

<b:includable id='breadcrumb' var='posts'>...</b:includable>

Lalu ganti kode diatas dengan kode dibawah ini

<b:includable id='breadcrumb' var='posts'>
           <b:if cond='data:blog.homepageUrl != data:blog.url'>
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &#187; <span><data:blog.pageName/></span></div>
             <b:else/>
             <b:if cond='data:blog.pageType == &quot;item&quot;'>
               <!-- breadcrumb for the post page -->
              <b:loop values='data:posts' var='post'>
               <b:if cond='data:post.labels'><span itemscope='itemscope' itemtype='http://schema.org/WebPage'>
                <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
                 <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url' title='Beranda'>Beranda</a></span>
                 <b:loop values='data:post.labels' var='label'>
                   &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' expr:title='data:label.name' property='v:title' rel='v:url'><data:label.name/></a><b:if cond='data:label.isLast == &quot;true&quot;'/></span>
                 </b:loop>
                 &#187; <span><data:post.title/></span>
                </div></span>
                <b:else/>
                 <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &#187; <span>Tanpa Label</span> &#187; <span><data:post.title/></span></div>
               </b:if>
              </b:loop>
              <b:else/>
              <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                <!-- breadcrumb for the label archive page and search pages.. -->
               <div class='breadcrumbs'>
                <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
               </div>
               <b:else/>
               <b:if cond='data:blog.pageType == &quot;index&quot;'>
                <div class='breadcrumbs'>
                 <b:if cond='data:blog.pageName == &quot;&quot;'>
                  <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Semua Posting</span>
                  <b:else/>
                  <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Posting dalam <data:blog.pageName/></span>
                 </b:if>
				</div>
			   </b:if>
			  </b:if>
             </b:if>
            </b:if>
           </b:if>
          </b:includable>

2. Langkah yang kedua Pasang CSS-nya telebih dahulu . ( pasang kode dibawah ini diatas kode ]]</b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}a

Perhatian Brow :)
CSS di atas digunakan atau di pasang bagi yang belum memasang CSS Breadcrumbs , tapi jika anda sudah memasang CSS Breadcrumbs maka CSS di atas sebaiknya di abaikan saja , atau anda bisa mengganti css yang lama dengan css diatas