Cara Membuat Breadcrumb Blog - Setelah membaca dan mengetahui apa fungsi breadcrumb blog, tentunya anda ingin membuat breadcrumb blog yang sama seperti yang ada di artikel blog ini. seperti penjelasan pada artikel sebelumnya, Breadcrumb merupakan link navigasi dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman utama (home). Pertanyaannya. pentingkah breadcrumb blog digunakan? Penting, silahkan baca cara mengetahui breadcrumb blog terbentuk dan fungsi breadcrumb.
Jadi, berikut cara membuat breadcrumb blog sederhana
Jadi, berikut cara membuat breadcrumb blog sederhana
- Masuk ke akun Blogger anda
- Klik Template >> Edit HTML >> centang Expand Widget Template >> tekan Ctrl+F pada keyboard
- Cari kode ]]></b:skin>
- Letakkan kode berikut ini tepat sebelum kode
red;">]]></b:skin>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}Cari kode seperti ini : <div class='post hentry'>
Letakkan kode berikut ini tepat setelah atau sebelum kode <div class='post hentry'>
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Browse » <a expr:href='data:blog.homepageUrl'>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> </b:if>
Simpan template
Kenapa saya membuat judul dengan breadcrumb blog sederhana? Karena tampilan dari breadcrumb ini menampilkan semua tag, label, atau keyword yang digunakan sehinggan tampilannya akan seperti yang ada di gambar diatas (lingkaran merah) dan jika anda ingin membuat breadcrumb blog seperti breadcrumb artikel ini, baca di Cara Membuat Breadcrumb Khusus. Okey, terimakasih, sekian dulu cara membuat breadcrumb blog sederhana
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Browse » <a expr:href='data:blog.homepageUrl'>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> </b:if>
Artikel yang bermanfaat, semoga berkah
BalasHapus@kabupatenmagetan.com amin,,
BalasHapusmakasi ya...
coba dulu gan...nice info
BalasHapus@Obat Kuat Alami silahkan mas, semoga bermanfaat..
BalasHapusMakasih, saya dah coba dan berhasil
BalasHapus@Mull alhamdulillah, terimakasih juga atas kunjungan serta komentar anda, salam kenal
BalasHapusTerima kasih Gan Infonya,sangat bermanfaat, ane coba bagus, Salam Kenal. Dan sukses Selalu,
BalasHapustrims sangat berguna,,saya coba mas,,:)
BalasHapussaya kesulitan mas
BalasHapus