Cara Membuat Navigasi Breadcrumbs

Cara Membuat Navigasi Breadcrumbs - Breadcrumbs berfungsi untuk meningkatkan SEO pada blog, konon Blog yang mempunyai breadcrumbs memiliki SEO dan daya SERP yang tinggi di Google dibandingkan dengan blog yang tidak memakai breadcrumbs.

Inipun salah satu faktor pendukung jika ingin blog sobat lebih diperhatikan Google, faktor lainnya juga dari template sobat jika template sobat ringan plus ramah dengan Google (friendly) serta internal link yang baik maka Google akan memperhatikan blog sobat. Jika belum tahu atau pernah melihat namun tidak mengerti apa namanya agar lebih jelasnya lihat penampakan dibawah ini atau bisa langsung lihat diblog ini :

Berikut Cara Membuat Navigasi Breadcrumbs :

Langkah 1

Login ke Blogger

Langkah 2

Masuk ke "Rancangan - Edit HTML"

Langkah 3

Cari kode dibawah ini :

<b:include data='top' name='status-message'/>

Langkah 4

Ganti kode langkah ke 3 dengan kode dibawah ini :

<b:include data='top' name='status-message'/><br /> <b:include data='posts' name='breadcrumb'/><br /> 

Langkah 5

Setelah diganti lalu cari kode dibawah ini :

<b:includable id='main' var='top'>

Langkah 6

Lalu kode langkah 5 ganti dengan kode dibawah ini :

<b:includable id='breadcrumb' var='posts'><br /> <b:if cond='data:blog.homepageUrl == data:blog.url'><br /> <!-- No breadcrumb on home page --><br /> <b:else/><br /> <b:if cond='data:blog.pageType == "item"'><br /> <!-- breadcrumb for the post page --><br /> <p class='breadcrumbs'><span class='post-labels'><br /> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a><br /> <b:loop values='data:posts' var='post'><br /> <b:if cond='data:post.labels'><br /> <b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:label.isLast == "true"'> »<br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><br /> </b:if><br /> </b:loop><br /> <b:else/><br /> »Unlabelled<br /> </b:if><br /> » <span><data:post.title/></span><br /> </b:loop><br /> </span><br /> </p><b:else/><br /> <b:if cond='data:blog.pageType == "archive"'><br /> <!-- breadcrumb for the label archive page and search pages.. --><br /> <p class='breadcrumbs'><span class='post-labels'><br /> <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/><br /> </span><br /> </p><b:else/><br /> <b:if cond='data:blog.pageType == "index"'><br /> <p class='breadcrumbs'><span class='post-labels'><br /> <b:if cond='data:blog.pageName == ""'><br /> <a expr:href='data:blog.homepageUrl'>Home</a> » All posts<br /> <b:else/><br /> <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/><br /> </b:if><br /> </span><br /> </p></b:if><br /> </b:if><br /> </b:if><br /> </b:if><br /> </b:includable><br /> <b:includable id='main' var='top'><br />

Langkah 7

Setelah itu cari kode dibawah ini :

]]></b:skin>

Langkah 8

Letakkan kode dibawah ini tepat diatas kode langkah 7

.breadcrumbs {<br /> padding:5px 5px 5px 0px;<br /> margin: 0px 0px 15px 0px;<br /> font-size:95%;<br /> line-height: 1.4em;<br /> border-bottom:3px double #e6e4e3;<br /> }

Langkah 9

Klik simpan.

Selamat mencoba, semoga berhasil dan Happy Blogging :D

Keterangan :

• Pada kode langkah 8 yang menunjukkan kode #e6e4e3 dapat sobat edit sesuka hati, kode tersebut menunjukkan arti warna.
• Masih pada langkah 8 kode yang menunjukkan font-size:95% dapat diubah menurut selera sobat, dan kode tersebut mewakili dari ukuran teks pada breadcrumbs.

Wassalam.

Advertistment

Category › Tutorial Blog