Cara Membuat Navigasi Breadcrumb di Blog

Cara Membuat Navigasi Breadcrumb di Blog

Anonymous    04:55   

Cara Membuat Navigasi Breadcrumb di Blog  - Cara memasang / memberi navigasi breadcrumb di blog atau cara membuat menu navigasi breadcrumb di blog atau cara membuat menu berjajar di atas posting di blog - Apa itu navigasi breadcumb? Navigasi breadcrumb adalah suatu bentuk navigasi konten blog kita sedemikian rupa sehingga bisa membantu pengunjung lebih mudah untuk menjelajah konten blog. Lalu bagaimana cara membuat navigasi breadcrumb itu? Gampang! Berikut ini saya akan menulas bagaimana cara membuat navigasi breadcrumb.

1. Login ke Blog sobat >> Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).

2. Lalu cari kode <b:if cond='data:post.title'> (bisa menggunakan CTRL+F atau F3). Jika ada dua kodenya pilih yang pertama. 

3. Kemudian copy kode dibawah letakkan dibawah <b:if cond='data:post.title'> tadi.

<b:if cond='data:blog.pageType == "item"'> <div class='breadcrumb'> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187; <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> &#187; </b:if> <data:post.title/> </div> </b:if>

4. Lalu cari kode berikut  ]]></b:skin>

5. Letakkan kode berikut di atas kode nomor 4

.breadcrumb { padding:5px 5px 5px 0px; margin: 0px 0px 10px 0px; font-size:90%; line-height: 1.2em; border-bottom:3px double #e6e4e3; }

7. Simpan Template dan lihat hasilnya.

Happy Blogging..!

Cara Membuat Navigasi Nomor Halaman di Blog

Cara Membuat Navigasi Nomor Halaman di Blog

Anonymous    02:44   

Cara Membuat Navigasi Nomor Halaman di Blog - Cara memberi atau memasang navigasi nomor halaman di blog - Ada yang sudah tau apa itu navigasi nomor halaman? Itu lho navigasi yang berupa nomor-nomor di bawah sebuah page/halaman blog atau orang-orang sering menyebutnya sebagai navigasi page number atau pages number navigation. Tujuan dari pembuatan menu ini adalah untuk memudahkan pengunjung menjelajahi blog kita sehingga kemungkinan mereka akan betah, hehe.. Tapi itu jika sudah pengunjung, jika belum punya atau pengunjung masih sedikit, sebagai seorang blogger, sobat juga bisa mengedit template blog sobat menjadi lebih SEO Friendly. Baca: Cara Mengubah Template Blogspot Menjadi SEO Friendly. Oke, lanjut ke masalah awal, jika masih bingung mengenai navigasi nomor halaman, berikut contoh cuplikan gambar dari blog teman saya (antigaptek.com) yang mungkin bisa membantu sobat.

Mungkin ada yang bertanya, mengapa di Blog ini sendiri tidak terpasang menu semacam ini? Jawabannya sangat simple, sebenarnya saya juga sangat ingin memasangnya, tapi template yang saya gunakan tidak mendukung. Hadeh.. Lantas, bagaimana cara memasang navigasi page number di blog kita? Itu mudah sekali. Silakan ikuti uraian berikut ini:

1. Login ke akun blog sobat.

2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).

3. Cari kode ]]></b:skin>

4. Letakkan script berikut di bawah tepat di atas kode nomor 3 tadi

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
} 

5. Cari kode </body> dan letakkan script di bawah tepat di atas kode berikut.

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

6. Simpan template sobat dan lihat hasilnya.
Oke, sekian tutorial dari saya mengenai cara membuat pages number navigation di blog. Semoga bermanfaat..