U must b lucky: MEMBUAT REMAH ROTI PARKIR DI BLOGGER

Lha.. Mungkin sobat merasa aneh atau bingung, kok bisa ada remah roti parkir di blog. Siapa yang iseng, habis makan roti terus meninggalkan remah roti di blog. Hehehe..

Sobat yang baik, janganlah bingung itu tadi cuma sekedar intermezzo saja. Remah roti yang dimaksudkan di sini adalah terjemahan langsung dari kata bahasa inggris "breadcrumb" yang biasa dipergunakan orang dalam pengelolaan blog / website, program atau dokumen yang bertugas sebagai alat bantu navigasi untuk mengetahui jejak asal dari lokasi dalam sebuah blog / website, program atau dokumen. (Tuh kan jadi jelas sekarang maksudnya...)

Iseng punya iseng tapi tidak berhadiah ceritapun saya buat dalam bentuk tulisan. Ini dalam rangka menyehatkan otak dan jari-jari, makanya saya melakukan senam otak dan joging jari (alias merangkai kata dan mengetik), begini sobat blogger semuanya ini berawal dari jalan-jalan (Blog Walking) yang saya lakukan hari ini ke beberapa blog sahabat serta pada akhirnya saya mampir di http://afatih.wordpress.com yang halaman utamanya terdapat sebuah artikel sangat menarik hati saya (tidak tahu mengapa saya tertarik pada artikel ini ?) Artikel tersebut oleh yang punya blog diberi judul "Cara Membuat Breadcrumb Di Blogger Blogspot". Iseng-iseng setelah saya baca dan coba praktekkan pada blog ini dan berhasil. Dan sekarang remah roti / breadcrumb sudah parkir di blog ini (lihat di atas judul artikel ini atau lihat gambar di bawah ini, sob.)

Belajar yuk kita belajar..sob. Ada yang tertarik untuk membuatnya ?

Nah sekarang kita belajar bersama untuk memoles blog dengan menempelkan remah roti eh.. breadcrumb tadi pada blog kita.

Begini cara pasangnya supaya remah roti / breadcrumb parkir di blog kita (hehehe..) :

1. Login ke akun kamu di blogger.com.
2. Pada dashboard klik Rancangan atau Design lalu klik Edit HTML
3. Setelah Template blog kamu muncul jangan lupa beri centang / "v" dengan cara meng-klik kotak sebelum Expand Widget Templates.
4. Sebelum kita memulai merubah Template blog, ada baiknya jika terlebih dahulu kita buat backup template dengan cara meng-klik Download Full Template (sebagai antisipasi jika terjadi kegagalan). Kalau sudah dibackup sekarang kita mulai merubah template blog.
5. Langkah selanjutnya adalah mencari kode <b:include data="top" name="status-message"> pada Template blog kamu dengan cara menekan "Ctrl+F" dan masukkan kode tersebut di atas ke dalam kotak yang tersedia.
6. Setelah itu di bawah kode <b:include data="top" name="status-message"> tadi tambahkan kode berikut ini :

   <b:include data='posts' name='breadcrumb'/>

7. Selanjutnya kita cari lagi kode <b:includable id='main' var='top'>
8. Kemudian kita ganti <b:includable id='main' var='top'> dengan kode berikut ini :

   <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><!-- No breadcrumb on home page --> <br><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> <br>» <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'> <br><a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> <br></span> </p> <b:else/> <b:if cond='data:blog.pageType == "index"'> <br><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/> <br></b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'>

9. Selanjutnya kita cari lagi kode ]]></b:skin">
10. Kemudian kita ganti dengan kode berikut ini :

    .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>

11. Terakhir kita simpan perubahan di atas tadi.
12. Selesai.

Nah sobat gampangkan membuat remah roti alias breadcrumb menempel pada blog kita. Semoga apa yang disampaikan di atas dapat bermanfaat buat sobat semua.

Terima kasih saya sampaikan pada Mas Fatih Syuhud selaku Admin pada http://afatih.wordpress.com yang menjadi bahan inspirasi artikel ini. Maaf jika masih banyak kekurangan dalam penulisan artikel ini, namanya juga pemula / rookie yang mencoba senam otak dan joging jari dengan ilmu alakadarnya.

[Sumber inspirasi tulisan dari http://afatih.wordpress.com]
by