Cara Pasang Breadcrumb Di Blog
Cara Pasang Breadcrumb Di Blog - Pada artikel kali ini BLOG TUTORIAL 2012 DAN ISLAMI akan coba berbagi tentang cara pasang breadcrumb di bog atau menu navigasi di atas postingan blog hal ini dimaksudkan sebagai salah
satu trik ngeblog agar blog lebih SEO Friendly. BreadCrumb juga termasuk teknik SEO yang sangat
disenangi search engine karena robot akan dengan gampang mengcrawl halaman blog
kita. dapat kita lihat tampilan BreadCrumb pada search engine dibawah ini:
Pada gambar di atas tulisan yang dilingkari merah adalah navigasi breadcrumb yang kita buat.
1. Masuk pada ID blogger anda di Blogger.com.
2. Pilih tata letak atau layout kemudian pada tab klik edit HTML
Sebelum memasang BreadCrumb backup lah template Anda terlebih dahulu [Click Download Full Template and please back up your template first. Untuk menghindari bila sewaktu-waktu ada kesalahan]
3. Edit HTML -> centang (kasih tanda) Expand Widget Template (jangan lupa).
Tips: Cara mencari kode di template blogger, tekan CTRL+F -> masukkan kode yang dicari dikotak yang tersedia.
4. Carilah kode berikut ini:
Ganti dengan kode berikut ini:2. Pilih tata letak atau layout kemudian pada tab klik edit HTML
Sebelum memasang BreadCrumb backup lah template Anda terlebih dahulu [Click Download Full Template and please back up your template first. Untuk menghindari bila sewaktu-waktu ada kesalahan]
3. Edit HTML -> centang (kasih tanda) Expand Widget Template (jangan lupa).
Tips: Cara mencari kode di template blogger, tekan CTRL+F -> masukkan kode yang dicari dikotak yang tersedia.
4. Carilah kode berikut ini:
<b:include
data='top' name='status-message'/>
<b:include data='top' name='status-message'/>
5. Lanjutkan
dengan kode di bawah ini:
Cari kode berikut:
<b:includable id='main' var='top'>
Ganti dengan kode berikut ini:
<b:includable id='breadcrumb' var='posts'>
6. Cari kode berikut:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<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>
» <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'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<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/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<!-- No breadcrumb on home page -->
<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>
» <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'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<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/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
]]></b:skin>
ganti kode tersebut dengan kode dibawah 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>
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>
7. Simpan Template. (SELESAI)
Semoga artikel Cara Pasang Breadcrumb Di Blog bermanfaat bagi Anda.
Post a Comment