Cara memasang Breadcrumb pada Blogspot

- Hallo sahabat Carabuatblo9, terimakasih telah mampir ke blog yang sangat sederhana ini. dalam pembahasa kali ini izinkan saya untuk menyampaikan sebuah artikel dengan judul Cara memasang Breadcrumb pada Blogspot, dan sebelumnya, saya berharap dengan adanya postingan kali ini bisa menambah wawasan dan informasi anda sebagai pencari informasi. dan semoga postingan kali ini bisa membawa manfaat baik untuk saya selaku penulis maupun untuk anda sebagai pengunjung, Amiiin

Oke, sebelum anda membaca artikel Cara memasang Breadcrumb pada Blogspot sebaiknya anda juga membaca artikel-artikel yang sudah pernah saya bahas sebelumnya, dimana artikel ini bisa anda lihat pada daftar dibawah ini.

Cara memasang Breadcrumb pada Blogspot

Pernahkah mendengar istilah Breadcrumb ? Bagi anda yang sudah lama melakukan blogging sudah tentu tau dengan istilah ini. Tetapi bagi yang baru, breadcrumb merupakan menu navigasi yang mempermudahkan pengunjung blog mengetahui posisinya dalam blog tersebut. Sehingga pengunjung blog dapat berpindah lokasi dari konten menuju home.

Breadcrumb juga berfungsi untuk menggambarkan struktur atau lokasi dari artikel yang dibacanya diblog. Biasanya breadcrumb diletakkan pada bagian atas header atau disebelah bawah header. Sebagai contoh bisa dilihat pada bagian atas judul artikel ini.

Bagaimana cara membuat breadcrumb pada blogspot ?

1. 1. Login ke blogger anda.


2. Klik DESIGN > Edit Html. Jangan lupa mem-backup template anda terlebih dahulu, kemudian klik Expand Widget templates.


3. Lalu carilah kode berikut ini :
   
   

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

   Gantilah kode tersebut dengan kode dibawah ini 
   
   

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



4. Langkah berikutnya carilah kode dibawah ini :
   
   

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

   dan ganti dengan kode ini :
   
   

   <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 == "item"'> 
   <!-- breadcrumb for the post page --> 
   <p class='breadcrumbs'> 
   <span class='post-labels'> 
   <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 == "true"'> » 
   <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 == "archive"'> 
   <!-- breadcrumb for the label archive page and search pages.. --> 
   <p class='breadcrumbs'> 
   <span class='post-labels'> 
   <a expr:href='data:blog.homepageUrl'>Home</a> » Arsip untuk <data:blog.pageName/> 
   </span> 
   </p> 
   <b:else/> 
   <b:if cond='data:blog.pageType == "index"'> 
   <p class='breadcrumbs'> 
   <span class='post-labels'> 
   <b:if cond='data:blog.pageName == ""'> 
   <a expr:href='data:blog.homepageUrl'>Home</a> » Semua posts 
   <b:else/> 
   <a expr:href='data:blog.homepageUrl'>Home</a> » Kategori <data:blog.pageName/> 
   </b:if> 
   </span> 
   </p> 
   </b:if> 
   </b:if> 
   </b:if> 
   </b:if> 
   </b:includable> 
   <b:includable id='main' var='top'>



5. Berikutnya carilah kode :
   
   

   ]]></b:skin>

   dan tambahkan kode ini diatasnya :
   
   

   .breadcrumbs { 
   padding:5px 5px 5px 0px;
   margin: 0px 0px 15px 0px;
   font-size:95%;
   line-height: 1.4em;
   border-bottom:3px double #e6e4e3;
   }



6. Simpan template anda, dan lihat hasilnya

Demikianlah Artikel Cara memasang Breadcrumb pada Blogspot

ini saya sajikan khusus untuk para pengunjung tercinta. semoga artikel Cara memasang Breadcrumb pada Blogspot, ini bisa memberi manfaat untuk anda semua. baiklah, sekian postingan kali ini. dan jangan lupa untuk memberikan sedikit kenangan berupa komentar sebagai tanpa jejak anda dalam kunjungan ke blog jelek ini

Terimakasih anda telah membaca artikel yang berjudul Cara memasang Breadcrumb pada Blogspot artikel ini diberi link https://carabuatblo9.blogspot.com/2011/06/cara-memasang-breadcrumb-pada-blogspot.html Semoga artikel ini bisa bermanfaat.

Tweet