Cara memasang Breadcrumb pada Blogspot - Hallo sahabat Cara Sign Up, Pada Artikel yang anda baca kali ini dengan judul Cara memasang Breadcrumb pada Blogspot, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blog Triks, Artikel Navigation, Artikel Template Hack, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara memasang Breadcrumb pada Blogspot
link : Cara memasang Breadcrumb pada Blogspot

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

Sekianlah artikel Cara memasang Breadcrumb pada Blogspot kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara memasang Breadcrumb pada Blogspot dengan alamat link http://carasignup.blogspot.com/2011/05/cara-memasang-breadcrumb-pada-blogspot.html

Tweet