Cara Membuat Breadcrumb - Pasang Breadcrumb Navigation Blogspot

Asep Akang 25 Apr 2011 6 comments
1. Mengenal apa itu breadcrumb

Jika Anda perhatikan navigasi directory label seperti yang Anda lihat diatas judul posting ini, agar lebih jelas coba perhatikan urutan main menu yang di navigasikan oleh tanda >> yang mengarahkan ke posisi directory label penyimpanan yaitu directory dimana halaman posting tersimpan.

Ini contohnya:
Home>>SEO>>Pasang Breadcrumb Navigation Diatas Judul Post Page.

Jadi, jika menurut Saya breadcrumb itu adalah suatu attribute pada template blog atau website yang berfungsi memudahkan pencarian oleh robots dengan bantuan berupa arahan yang membawa ke lokasi tempat dimana file tersimpan.

Baiklah pada panduan dan tutorial gratis sekarang kita akan bersama-sama belajar memasang atau mengaktifkan breadcrumb tersebut pada halaman blog kita. 

Pertama login ke blogger.com, setelah login ikuti panduan berikut:


* Setelah masuk halaman dasbor/dashboard, klik "Design" atau "Rancangan". Dari halaman Tata Letak/Layout Klik "Edit HTML".

* Tandai dengan ceklist pada kotak disamping tulisan "Expand Widget Template".

* Cari kode seperti ini:
<b:include data='top' name='status-message'/> di template Anda.

* Ganti dengan kode berikut:

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

* Cari kode seperti ini:

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

* Ganti dengan kode berikut:

<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> » Archives for <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> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

* Cari kode seperti ini: ]]></b:skin> dan ganti dengan kode berikut:

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

* Save template, lihat hasilnya dengan cara mengklik salah satu judul posting Anda

Selamat mencoba dan semoga berhasil.


Sumber : http://www.zaenudin.com/2010/10/pasang-breadcrumb-navigation-diatas.html

Artikel Terkait

TERIMA KASIH ATAS KUNJUNGAN SAUDARA
thumbnail Judul: Cara Membuat Breadcrumb - Pasang Breadcrumb Navigation Blogspot
| Twitter | Facebook Page
Published :25 Apr 2011 Jam 08.09
Rating: 4.5 Reviewer: 7
Silakan jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi tulisan ini. Terima kasih sudah singgah serta membacanya, Semoga tulisan ini bermanfaat bagi sobat Blogger Copast semuanya amin.

Pin It

Silahkan tentukan pilihan komentar anda!



atau

6 komentar:

  1. Great information and inspiration,Your post have the information that is helpful and very informative. I would like you to keep up the good work.You know how to make your post understandable for most of the people.Thanks and keep up the good work. used bus plugs and bus ducts


    BalasHapus
  2. I have to say I really like reading this alot. It's obvious that your knowledge of the subject is deep and this made for a very interesting read. Thanks for this insightful post
    Rotary auto lifts

    BalasHapus
  3. Excellent information. This site definitely explains essential concepts to its readers. Thanks for continuing to write such wonderful articles
    Establishing Business Value

    BalasHapus
  4. It is my great pleasure to visit your site and to take pleasure in your excellent post here. I like them very a lot. I can feel which you paid much attention to those articles, as all of them make sense and extremely informative.To watch TV online visit this link: http://livelifeonline.tv/

    BalasHapus
  5. nice croot artikelnya gan :D visit balik ya gan http://sentraeduksi.blogspot.com/

    BalasHapus

Komentar anda dimoderasi, Kata-kata yang kurang baik tidak akan saya tampilkan atau saya hapus Terima kasih

Pengikut

Blogger Copast
Designed by Bamz
Untuk SEO lebih lanjut kunjungi
Trik SEO terbaru

Statistik

Page Rank
blogger-copast.blogspot.com Webutation

ping fast  my blog, website, or RSS feed for Free Blog Directory & Search engine blog search directory Personal Blogs - Blog Rankings Technology Blogs Blog Directory My Zimbio My Ping in TotalPing.com I ♥ Validator GeoURL Blogger Copast Yahoo bot last visit powered by MyPagerank.Net Msn bot last visit powered by MyPagerank.Net Personal - Top Blogs Philippines Blog Search: The Source for Blogs
Link Centre Directory and Search Engine
Active Search Results blogger-copast.blogspot.com trustrank blogger-copast.blogspot.com Real PageRank

http://blogger-copast.blogspot.com$3,065$3,065How much is yours?

Waudit score SEO Reports for blogger-copast.blogspot.com Top SEO Sites Blogarama - The Blog Directory IndoUrl - indonesian directory, webmaster friendly
blogger-copast.blogspot.com CoolSocial.net Badge
dirbit.com free search engine submission Link Exchange with BLOGGER COPAST how to create a website AskDirectory.com - FREE Web Directory Blog Directory Blog Search Links Exchange Blog Directory | Submit to Directories and Promote your Blogs Frety Webengine bloggercopast's Profile on Ping.sg  Ping Url ping.sg - the community meta blog for singapore bloggers blogger-copast.blogspot.com-Google pagerank and Worth Personal Blogs
Online Marketing
Feedage Grade B rated
eXTReMe Tracker
Amfibi Web Search & Directory Sistema Enlaces Reciprocos Search Engine Submission and Marketing Services ExactSeek: Relevant Web Search waplog
blognation.com
Submit Blog Directory Situs Monitor Backlinks Site Meter

Enter your email address:

Delivered by FeedBurner