Cara Membuat Breadcrumbs atau Navigasi Diatas Posting Blog Sederhana.

mas ihsan -, Selamat datang kembali di blog saya, ingin berbagi trik baru namun tidak ada ide yang muncul di bahtera pikiran saya, maka saya kkembali ke beberapa trik lama, semoga ini bisa bermanfaat untuk anda para pembaca, kali ini tentang Cara Membuat navigasi breadcrumbs di Blogger.
Menurut pakar SEO, Navigasi Breadcrumb ini sangat disukai oleh Search Engine, karena dengan adanya navigasi tersebut, Mesin Pencari semakin mudah mencari kata kunci di setiap halaman blog kita.

Contoh navigasi breadcrum sebagai berikut :
Home >> label >> judul posting/artikel.

Seperti yang terpasang di atas title posting blog ini.
Ada dua cara membuat nya, dengan handphone atau dengan komputer secara online.
Terserah anda mau bertempur menggunakan alat yang mana.
Pertama bagi pengguna komputer, kita bisa belajar membuat contoh membuat navigasi breadcrumb dengan online di komputer di bawah ini:

1. Login ke blogger > Rancangan > Edit HTML.
Download dulu template anda sebelum melanjutkan, agar dapat dikembalikan bila terjadi kerusakan.

2. Beri centang 'expand widget templates'.

3. Cari kode JavaScript CSS template atau anda bisa langsung mengetikan kode berikut ]]></b:skin>

4. Letakan kode berikut di atas nya kode merah atau bisa anda campur dengan JavaScript CSS.
/* navigasi bread jabungleopark ------------------------------ */
.breadcrumb { padding:5px 5px 5px 0px; margin: 0px 10px 0px 10px; font-size:90%; line-height: 1.2em; border-bottom:1px double #bbbbbb; }

5. Lalu cari kode <b:if cond='data:post.title> .
(tekan CTRL+F untuk cara cepat mencari kode.
Bila terdapat dua kode, pilih yang pertama.)
6. Kemudian copy kode dibawah ini, letakkan dibawah kode Merah di atas.
<b:if cond='data:blog.pageType == "item"'> <div class='breadcrumb'> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> » <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'>,</ b:if> </b:loop> » </b:if> <data:post.title/> </div> </b:if>
7. jangan lupa SAVE.

lihat hasilnya.
Kedua bila anda tidak punya komputer, bisa saja anda membuat nya melalui handphone symbian.

1. Buka Opera mini > Login ke blogger > Rancangan > Edit HTML.

2. Download template anda secara lengkap dari link di atas kolom upload, letakan di manapun anda suka

3. Buka x-plore > Cari Template yang sudah anda download dari opera mini anda > open file.

4. Cari kode JavaScript CSS template blog anda atau bisa langsung mengetikan kode berikut ]]></b:skin>
( klik tombol Menu > Find > Masukan kode. Agar lebih cepat )

5. Letakan kode berikut di atas nya kode merah atau bisa anda campur dengan JavaScript CSS.
/* navigasi bread jabungleopark ------------------------------ */
.breadcrumb { padding:5px 5px 5px 0px; margin: 0px 10px 0px 10px; font-size:90%; line-height: 1.2em; border-bottom:1px double #bbbbbb; }

6. Lalu cari kode <b:if cond='data:post.title> .

7. Kemudian copy paste kode dibawah ini, letakkan dibawah kode Merah di atas.
<b:if cond='data:blog.pageType == "item"'> <div class='breadcrumb'> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> » <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'>,</ b:if> </b:loop> » </b:if> <data:post.title/> </div> </b:if>
8. Kemudian buka Menu > Save.
9. Buka Opera mini > Masuk ke Blogger > Rancangan > Edit HTML. > Upload template.

Lihat hasilnya.
Selamat mencoba, semoga bermanfaat. Silahkan berkomentar.