Blogspot : Breadcrumbs Menumpuk di Label Page

Setelah beberapa lama mulai berkomitmen menulis di blog, serasa kurang lengkap kalau data statistik pengunjung tidak menunjukkan peningkatan. Saya mulai mencari kesana-kemari kiat-kiat untuk mengoptimalkan pencarian di search engine yang biasa sebut dengan Search Engine Optimizer (SEO).

Saya mulai mengikuti langkah-langkahnya, mulai dari mengganti meta data keyword dan deskripsi, page title, hingga tiba menambahkan breadcrumbs. Terimakasih untuk teman-teman yang udah share pengalamanannya. Mohon maaf link tidak saya tampilkan karena saya lupa dimana saja saya ambil sumbernya (tulisan ini tidak kopas lho).

Breadcrumbs pun berhasil dibuat setelah mengikuti petunjuk yang diberikan. Hanya saja posisinya kurang ke kekiri.  Yaitu tampilannya sebagai berikut :

BreadCrumbs Sebelum Diedit

Saya coba edit cssnya. Berikut CSS yang diberikan pertama kali :

.breadcrumbs {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiihSz-7MmPkNFksGJd536M_sCOWZJdV3QZzWBDBhrXL8qj65aNa_Lrfj0za3J-INXTOG-8deL65T-wPHzDKwDh6UFmkfKbSzPgQvwfdllKJgzH83tdaFprKt6NCsOnLA3uYidRdIDKsv0/s1600/box2-top.gif);
float: left;
border: 1px solid #E6E6E6;
width: 600px;
font-size: 11px;
margin: 0px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}

Agar letaknya sesuai dan ukurannya juga pas, maka saya mengganti nilai dari width, margin dan padding menjadi :

.breadcrumbs {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiihSz-7MmPkNFksGJd536M_sCOWZJdV3QZzWBDBhrXL8qj65aNa_Lrfj0za3J-INXTOG-8deL65T-wPHzDKwDh6UFmkfKbSzPgQvwfdllKJgzH83tdaFprKt6NCsOnLA3uYidRdIDKsv0/s1600/box2-top.gif);
float: left;
border: 1px solid #E6E6E6;
width: 565px;
font-size: 11px;
margin: 5px 10px 10px 0px;
padding: 5px 10px 10px 0px;
}

tampilannya menjadi seperti ini :

BreadCrumbs Setelah diedit

Puas rasanya melihat hasilnya. Kemudian saya coba cek blog, klik artikel-artikel yang lain. Tetapi rasa puas itu sedikit terhenti ketika melihat hasil breadCrumbs sewaktu meng-klik salah satu label. Hasilnya menumpuk dan berantakan seperti berikut :

BreadCrumbs Menumpuk di Label Page

Tampilan di atas sangat mengganggu. Saya coba untak-atik kodingnya tetapi hasil tidak memuaskan. Kemudian saya coba-coba di browser untuk mengganti CSSnya dengan bantuan Inspect Element. Dan berhasil. Permasalahannya ada di float: left; 
Saya remark float menjadi //float: left;
Dan hasilnya pun menjadi sempurna seperti gambar dibawah ini :

BreadCrumbs di Label Page Setelah Diedit

Untuk melihat hasilnya secara langsung, bisa dilihat di : http://arinineech.blogspot.com/search/label/Blogspot