Cara Gampang Pasang Navigasi Breadcrumbs di Blogger - Pada kesempatan ini Cara Design Blog akan memberikan tutorial blogger cara mudahmembuat navigasi breadcrumbs pada blog.
Apa arti dan fungsi dari navigasi breadcrumbs itu?
Navigasi Breadcrumbs adalah bantuan navigasi yang digunakan dalam user interface sebuah website ataupun blog. Hal ini memungkinkan pengguna untuk melacak lokasi halaman atau dokumen dengan mudah.
Navigasi Breadcrumbs biasanya dibuat horizontal di bagian atas postingan blog maupun halaman web. Para blogger sering meletekan navigasi breadcrumbs ini di bawah bar judul atau header. Breadcrumbs yang juga di sebut Rootlink ini menyediakan link kembali ke halaman sebelumnya (beranda), setiap pengunjung menggunakan navigasi breadcrumbs ini untuk menuju ke halaman saat ini atau di situs-hirarkis struktur-halaman induk yang sekarang.
Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Simbol (>) sering berfungsi sebagai pemisah hirarki. Namun banyak juga blogger yang memakai simbol (�).
Struktur dari Navigasi Breadcrumbs pada umumnya seperti ini:
Home page > Section page > Subsection page
Manfaat dari membuat navigasi breadcrumbs adalah membuat blog lebih SEO Friendly. Blog yang sudah menggunakan navigasi breadcrumbs memiliki daya untuk SEO dan SERP di Google Search Engine dibanding blog yang tidak memakai breadcrumbs.
Bagaimana cara membuat navigasi breadcrumbs itu?
Untuk menjawab pertanyaan ini perkenankan Cara Design Blog memberikan tutorial blogger cara mudah membuat navigasi breadcrumbs.
Berikut ini tutorial cara mudah mudah membuat navigasi breadcrumbs :
1. Masuk Dasbor Blog Kamu
2. Template > Edit HTML > Lanjutkan > Exspand Widget Template
3. Cari: ]]></b:skin>
4. Letakan kode beikut tepat diatas ]]></b:skin>
.breadcrumbs {5. Cari: <b:includable id='main' var='top'>
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
6. Letakan kode berikut di atas kode no.:5.
<b:includable id='breadcrumb' var='posts'>6. Preview/pratinjau untuk melihata apakah ada kesalahan dalam input kode kode tersebut. Kalau tidak ada kesalahan lanjutkan langkah no.:7.
<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>
7. Save Template.
Selesai, Semoga Bermanfaat
Anda sedang membaca artikel tentang Cara Gampang Pasang Navigasi Breadcrumbs di Blogger dan anda bisa menemukan artikel Cara Gampang Pasang Navigasi Breadcrumbs di Blogger ini dengan url http://agraanggakara.blogspot.com/2013/11/cara-gampang-pasang-navigasi.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Gampang Pasang Navigasi Breadcrumbs di Blogger ini sangat bermanfaat bagi teman-teman Anda, namun jangan lupa untuk meletakkan link postingan Cara Gampang Pasang Navigasi Breadcrumbs di Blogger sebagai sumbernya.
Related Post:
blogspot
- Cara Memasang Widget Share Melayang Di Blogger
- Tutorial Cara Membuat Postingan Blog Dengan Gampang
- Cara Mudah dan Murah Membuat Blog di blogger.com
- Cara Buat Email Gmail Dengan Mudah dan Cepat
- Gmail Atau Google Mail
- Cara Menyembunyikan Navbar Pada Blogger Dengan Mudah
- Cara Mengganti Template Blog Download'an
- Cara Gampang Mengganti Template Blog
- Cara Membuat Read More Otomatis Pada Blogger Mudah
- Cara Menghilangkan Navbar Blogger Dengan Mudah
- Cara Buat Related Post Dengan Thumbnail Mudah
- Cara Buat Tombol Share Button di Atas Postingan Blog Kita
- Cara Insert Gambar Pada Postingan Blog Kita
- Cara Pasang Widget Sharing is Caring Di Bawah Postingan
- Cara Membuat Label di Blog
- Cara Cepat Dan Mudah Untuk Parsing HTML
- Cara Mengukur Berat Blog Dengan Aplikasi Online
- Cara Mengukur Kecepatan Load Blog Dengan Aplikasi Online Numinion
- Pasang Widget Gambar HUT RI Ke-68 Keren
- Cara Memasang Gambar Animasi Dipojok Layar
- Memasang Berbagai Animasi Terbang Di Blog
- Cara Membuat Kotak Script Postingan
- Membuat Back To Top dengan Efek Jquery
- Cara Membuat Related Post berScroll
seo
- Cara Memasang Widget Share Melayang Di Blogger
- Gmail Atau Google Mail
- Cara Membuat Read More Otomatis Pada Blogger Mudah
- Cara Buat Related Post Dengan Thumbnail Mudah
- Cara Membuat Label di Blog
- Cara Cepat Dan Mudah Untuk Parsing HTML
- Cara Mengukur Berat Blog Dengan Aplikasi Online
- Cara Mengukur Kecepatan Load Blog Dengan Aplikasi Online Numinion
- Cara Memasang Widget Alexa
- Apa Sih Alexa Rank Itu?
- Cara Cepat Untuk Menurunkan Alexa Rank
- Daftar Blog Dofollow 2013
- Memasang Meta Tags otomatis Disetiap Postingan
- Cara Edit Page Title
tips
- Cara Memasang Widget Share Melayang Di Blogger
- Tutorial Cara Membuat Postingan Blog Dengan Gampang
- Cara Mudah dan Murah Membuat Blog di blogger.com
- Cara Buat Email Gmail Dengan Mudah dan Cepat
- Gmail Atau Google Mail
- Cara Menyembunyikan Navbar Pada Blogger Dengan Mudah
- Cara Mengganti Template Blog Download'an
- Cara Gampang Mengganti Template Blog
- Cara Membuat Read More Otomatis Pada Blogger Mudah
- Cara Menghilangkan Navbar Blogger Dengan Mudah
- Cara Buat Related Post Dengan Thumbnail Mudah
- Cara Buat Tombol Share Button di Atas Postingan Blog Kita
- Cara Insert Gambar Pada Postingan Blog Kita
- Cara Pasang Widget Sharing is Caring Di Bawah Postingan
- Cara Membuat Label di Blog
- Berbagai Emoticon Facebook Chat Box By Xat Keren
- Kode Emoticon Facebook Terlengkap Dan Terbaru
- Cara Cepat Dan Mudah Untuk Parsing HTML
- Cara Mengukur Berat Blog Dengan Aplikasi Online
- Cara Mengukur Kecepatan Load Blog Dengan Aplikasi Online Numinion
- Pasang Widget Gambar HUT RI Ke-68 Keren
- Tips Cara Melihat ID Facebook Dengan Mudah Dan Cepat
- Website Pengukur Kecepatan Upload dan Download Sebuah Modem
- Cara Membuat Dan Berbagi Wifi Dengan CMD
0 comments:
Post a Comment
Sisihkan waktu anda untuk berkomentar, tetapi berkomentarlah dengan bahasa yang baik dan sopan, Spam Sara dan Mencantumkan alamat Url tidak akan ditampilkan, Setiap komentar menunggu moderasi admin Terimakasih :)