Tuesday, 16 February 2016

Panduan dan Tutorial Membuat Breadcrumbs di Atas Judul artikel

Salam para masta blogger, kali ini saya akan memberikan tutorial dan belajar membuat breadcrumbs di blog. Breadcrumbs itu apa ?? Bila anda sekalian tidak tahu saya akan menjelaskannya sekarang.
Breadcrumbs adalah sebuah label dan judul artikel anda di beranda pos anda, fungsinya supaya penampilan blog anda semakin cantik dan memudahlan para pengunjung untuk kembali mencari artikel yang lain. Mungkin kedengarannya sederhana tipi hal ini sangat bermanfaat dan banyak fungsinya. Ini adalah contoh gambar yang sudah jdi di blog saya


Tutorial membuat breadcrumbs.
Baca ok sampai seslesai. Langkah pertama seperti biyasa silahkan anda login ke akun blogger anda sendri, selanjutnya silhkan anda menuju ke Template lanjut silahkan anda pilih Edit HTML.
Kalau anda sudah masuk ke edit HTML maka anda akan di perlihatkan Kode HTML yang rumit. Ok tak usah pusing saya akan jelaskan secara jelas supaya anda bisa dalam membuat breadcrumbs ini.
Baca dengan benar di bagian ini !!.
Langkah pertama. Anda harus mencari kode ]]></b:skin>. Bila anda susah mencarinya atau tidak menemukan dalam menggunakan CTRL+F silahkan lihat gambar di bawah ini.


Kalau anda sudah menemukan silahkan anda masukan kode ccs di bawah ini. Cara memasngkannya silahkan klik titik tengah kode yang sudah di tunjukan oleh gambar di atas, selanjutnya anda cari kebawah kode  ]]></b:skin>. Kalau sudah ketemu silahkan pastekan kode ccs di bawah ini pas di atas kode yang barusan di cari.

.breadcrumbs{ padding:5px 5px 5px 0; margin:0; font-size: 90%; line-height:1.4em; border-bottom:1px solid black; }

Langkah ke dua silahkan anda cari kode  <b:includable id='post' var='post'> . Dalam mencari kode ini silahkan anda menggunakan metode CTRL+F lalau pastekan kode yang di cari di kolom yang di sediakan. Kalau sudah ketemu silahkan pasangkan kode berikut ini tepat di bawah kode yang barusan dicari.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Home</a> &gt; <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 != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &gt; <data:post.title/> </div> </b:if> </b:if>

Selanjutnya siahkan anda simpan lalau lihat hasilnya.

Itu sedikt dari saya tentang tutorial dan belajar membuat breadcrumbs di blog. Semoga bermanfaat bagi anda yang sudah membaca artikel saya. Sebagi admin saya ucapkan terima kasih