CARA MEMBUAT NAVIGASI YANG BAIK BUAT BLOG

Blobo. Halo gans , Sebuah blogger tanpa navigasi yang baik ibarat kita masuk ke gedung besar tapi tidak ada penunjuk arah yang memberitahukan kita, nah kesulitan kan? Pentingnya sebuah navigasi agar memudahkan pengunjung blog menemukan informasi apa yang dia cari di blog kita gan. Tapi jangan salah gan membuat navigasi sendiri tidak asal yang ada malah bingung tuh pengunjung kita gan.

Kolom navigasi dasar pada blogger sendiri sudah bagus gan tapi untuk memberikan kesan istimewa ada beberapa navigasi yang membuat blog kita lebih profesional, nah hal ini terkadang banyak dilupakan oleh beberapa bloger apalagi pemula , juga ada nilai tersendiri bagi google untuk menelusuri blog atau situs yang memiliki navigasi lengkap dan jelas.

Oke apa saja yang diperlukan dalam pembuatan navigasi ? yuk kita simak gan!

1. Kita Tambahkan Widget Archive pada blog Kita

Dengan menambahkan widget Archive pengunjung bisa memilih halaman mana yang akan ia kunjungi untuk mendapatkan informasi yang ada di blog kita.

=> Klik Tombol" tata letak/ lay out " pada menu blogger
=> Pilih letak penempatan widget dan "Klik add gadget/ tambahkan gadget"
=> Pilih widget archive kemudian aturlah bagaimana widget archive agan akan ditampilkan
=> Klik Save otomatis widget archive akan ditambahkan pada blog agan

2 Buatlah Bread crumb

Breadcrumb merupakan barisan link internal dimana link itu menampilkan alur situs atau blog kita gan. Biasanya breadcrum berada pada atas halaman atau bagian bawah halaman. Beberapa template bloger ada yang sudah ready breadcrumb tapi untuk template dasar dari blogger belum ada gan.

Untuk membuat breadcrumb aga bisa ikuti langkah berikut ini,

=> Klik edit template pada bloger -> klik edt html

=> Letakan kode css berikut ini

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover

sebelum kode ]]></b:skin> atau </style>

=> Setelah itu cari kode seperti berikut ini

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

=> Letakan kode berikut ini pada bagian bawahnya

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=5"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

=> Klik Save / simpan lalu cek dengan mengunjungi salah satu halaman apakah sudah tampil atau belum bisa juga menggunakan alat test struktur web milik google.

NB: HARAP DIPASTIKAN TERLEBIH DAHULU APAKAH TEMPLATE YANG AGAN PAKAI SUDAH MENGGUNAKAN BREADCRUMB ATAU BELUM JIKA SUDAH ADA MAKA KODE TERSEBUT TIDAK AKAN BEKERJA

3. Buatlah Sitemap atau halaman daftar isi

Halaman daftar isi berfungsi ketika setiap post kita harus diberi label jadi nanti otomatis mengelompokan per label postingan.

=> Buatlah page/ laman baru pada menu page/laman pada bloger,

=> Klik mode html kemudian masukan kode berikut ini

<script src="https://cdn.rawgit.com/mowdot/mysitemap/master/sitemapku.js"></script>
<script src="URL BLOG AGAN /feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

=> Masukan Url blog agan pada kode tersebut
=> Klik simpan dan coba lihat maka halaman daftar isi blog agan sudah siap dipasang dan digunakan gan.

4. Gunakan Laman 404 yang bagus,

Apa laman 404 ? Adalah laman dimana pengunjung kita menemukan laman yang tidak ada dalam situs kita. Biasanya terjadi karena pengunjung mengetikan url yang salah atau link yang dituju rusak atau terhapus.

Cara sederhana membuat laman 404 adalah sebagai berikut

=> Klik setting pada menu blogger.
=> Klik menu peferensi dan penelusuran
=> masukan pesan khusus untuk halaman yang tidak ditemukan pada bagian Pesan Khusus untuk Laman Tidak Ditemukan.
=> Klik Save dan coba kunjungi blog anda dengan menambahkan /404 pada belakang url.

Nah itu dia gan beberapa point penting yang harus diperhatikan untuk pembuatan navigasi dalam situs kita. Selain membantu pengunjung navigasi diatas juga membantu situs kita untuk lebih mudah terindeks gan. Selamat mencoba dan semoga bisa bermanfaat ya gan. (ijjal)

special thank for:

http://www.arlinadzgn.com/2016/04/cara-memasang-breadcrumbs-seo-friendly.html
https://duarupa.blogspot.com/2016/10/cara-membuat-sitemap-blog.html

CARA MEMBUAT NAVIGASI YANG BAIK BUAT BLOG

1 komentar: