Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Membuat Halaman Sitemap dengan Filter di Blog

Keberadaan halaman daftar isi atau yang sering disebut dengan sitemap adalah hal yang penting. Karena halaman ini berisi daftar lengkap seluruh artikel, sehingga akan menjadi suatu navigasi bagi para pengunjung untuk menjelajahi setiap artikel yang terdapat di sebuah blog. Namun menurut saya pribadi agar halaman sitemap ini digunakan oleh pengunjung, sebelumnya blog kita harus sudah beberapa kali menyajikan artikel yang bermanfaat bagi mereka, sehingga pengunjung tidak ragu untuk mencari artikel lain yang dibutuhkan melalui halaman sitemap.

Banyak sekali jenis dan gaya dari halaman sitemap yang sebelumnya sudah dibahas oleh rekan-rekan Blogger lain. Saya sendiri baru membahas Halaman Sitemap dengan Tampilan Sederhana yang memiliki proses load yang cepat. Dan untuk kali ini saya akan membagikan pada rekan-rekan Blogger sekalian sebuah sitemap dengan fitur filter di dalamnya.

Halaman Sitemap dengan Filter

Cara Kerja Halaman Sitemap dengan Filter

Apa maksudnya halaman sitemap dengan filter? Sitemap dengan filter ini berbeda dengan halaman sitemap sederhana yang sebelumnya saya bagikan. Selain menampilkan seluruh artikel yang terdapat di dalam blog, juga dilengkapi dengan sebuah fitur untuk untuk menyortir artikel yang ditampilkan sesuai dengan kebutuhan pengunjung. Sehingga para pengunjung dapat mencari artikel yang dibutuhkan dalam lingkup yang lebih sempit.

Halaman sitemap yang menampilkan seluruh daftar artikel tanpa memiliki fitur filter, mengharuskan pengunjung untuk menelusuri satu persatu artikel di dalam daftar saat mencari konten yang dibutuhkan. Namun berbeda dengan halaman sitemap yang satu ini yang menyediakan 3 fitur filter, yaitu pengurutan berdasarkan artikel yang baru dibuat atau artikel yang baru diperbarui, menampilkan artikel berdasarkan kategori tertentu, kemudian dilengkapi dengan mesin pencari.

Untuk lebih jelasnya silakan cek live demo dari halaman sitemap dengan filter pada link berikut ini.

Membuat Halaman Sitemap dengan Filter di Blog

Karena terdapat fitur untuk menampilkan artikel berdasarkan kategori tertentu, maka sebelumnya kamu harus Menerapkan Label atau Kategori pada Setiap Artikel. Dan untuk memulai membuat halaman sitemap dengan filter, pada Dashboard Blogger silakan masuk ke menu Laman kemudian buatlah Laman baru. Berilah judul pada halaman terlebih dahulu, misalnya "Sitemap" atau "Daftar isi". Dan untuk selanjutnya masuklah ke penulisan mode HTML.

Terdapat elemen tabel pada sitemap yang satu ini. Sebagian template blog otomatis memberikan tampilan border pada setiap tabel yang dibuat, walaupun dalam penulisan HTML nya kita tidak memberikan border. Dan jika border tabel pada sitemap ini ditampilkan, halaman sitemap akan terlihat kurang rapi.

Jika template kamu otomatis memberikan tampilan border pada tabel, terlebih dahulu silakan letakkan script berikut pada kolom HTML. Namun jika template kamu tidak seperti demikian, maka kamu bisa melewati tahap ini.
<style type="text/css">
td {border:0px !important;}
table {border-bottom:0px !important}
</style>

Kemudian lanjut membuat halaman sitemap dengan filter di blog. Masih pada mode penulisan HTML, silakan letakkan script berikut pada kolom yang disediakan.
<style scoped="scoped" type="text/css">
#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:none;margin:0;padding:5px;font-size:86%;text-transform:uppercase;outline:0;-webkit-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-moz-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
#feed-container{display:block;clear:both;margin:0 30px;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 16px;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:700}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin:10px 0 0}
#feed-container li img{margin:0 10px 5px 0;padding:5px;float:left;display:block;}
#result-desc{margin:0 30px;padding:0;border-bottom:2px solid #eee}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 10px 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 30px 0;text-align:center;font-weight:700}
#feed-nav a,#feed-nav span{border:1px solid #C9C9C9;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none!important}
}
</style>
<br />
<div id="table-outer">
<table><tbody>
<tr><td><label for="feed-order">Urutkan artikel berdasarkan:</label></td> <td><select id="feed-order"> <option selected="" value="published">Artikel terbaru</option> <option value="updated">Artikel yang terakhir di update</option> </select></td></tr>
<tr><td><label for="label-sorter">Filter artikel berdasarkan kategori:</label></td> <td><select disabled="" id="label-sorter"> <option selected="">Loading....</option> </select></td></tr>
<tr>                 <td><label for="feed-q">Cari artikel dengan kata kunci:</label></td> <td><form id="post-searcher">
<input id="feed-q" type="text" />
</form>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<header id="result-desc"></header>
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://firebasestorage.googleapis.com/v0/b/btutorialscript.appspot.com/o/js%2Fsitemapfilter.js?alt=media&token=2b40f909-bb8f-43c9-8981-92c9a92c6af8" type="text/javascript"></script></div>
<div style="text-align: right;">
<a href="http://www.b-tutorial.com/2016/05/membuat-halaman-sitemap-dengan-filter.html" style="font-size: 10px;" target="_blank">Cara Membuat Sitemap dengan Filter</a></div>
</div>

Kemudian kamu bisa memberikan deskripsi pada halaman ini dengan opsi Deskripsi Penelusuran pada setelan laman yang terdapat di bagian kanan. Dan terakhir silakan Publikasikan Laman, maka kini kamu telah memiliki sebuah halaman sitemap dengan fitur filter di blog yang kamu miliki.

Agar pengunjung dapat menemukan halaman ini saat mengunjungi blog kamu, kamu bisa memasang menu Sitemap pada menu navigasi blog kamu. Silakan baca artikel mengenai Cara Mengedit Menu Navigasi Blog. Atau kamu bisa meletakkan menu sitemap di posisi mana saja yang kamu inginkan.

Artikel terkait : Membuat Halaman Sitemap dengan Filter di Blog

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

Copyright © 2014-2016 B-Tutorial - All Right Reserved