Sitemap Lengkap Dengan Fitur Artikel Terbaru, Label dan Pencarian

Cara Membuat Sitemap Lengkap Dengan Fitur Artikel Terbaru, Lebel, dan Pencarian - Setelah tadi jalan-jalan blogwalking saya menemukan artikel dari blog Mas Indra DP, yang membahas tentang membuat sitemap atau daftar isi dengan fitur lengkap. akhirnya membuat saya tertarik untuk memasang nya di blog saya. setelah berhasil memasang saya ingin berbagi kepada sobat blogger yang juga ingin membuat sitemap ini di blog sobat. Sebelumnya saya pernah posting Responsive Simple Sitemap Dari Kompi Kjaib.
Dan pada kesempatan kali ini saya akan posting tentang Cara Membuat Sitemap lengkap dengan fitur Artikel Terbaru, Label, dan Pencarian.

Sitemap/Daftar isi atau bisa di bilang Peta Situs ini memang Penting untuk kita buat/terapkan di situs/blog kita. Dengan banyak tujuan yang kita dapatkan, sitemap akan memudahkan pengunjung yang ingin menjelajahi semua isi dari situs/blog kita. Nah bagi anda yang ingin membuat sitemap lengkap ini mari kita ikuti caranya sebagai berikut. Sitemap ini sudah responsive dang sangat simple. untuk demonya bisa anda lihat Disini.

1. pertama anda masuk di akun blogger anda.

2. pilih menu ==> Laman ==> Buat Laman Baru


3. Setelah halaman terbuka silahkan pilih mode HTML. Dan pada form judul laman silahkan anda tulis sitemap atau daftar isi atau terserah anda. Setelah itu Coppy kode di bawah ini dan tempelkan pada isi laman tadi.

<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:1pxsolid #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:010px 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:0auto}
#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>

<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" placeholder="Ketik dan tekan ENTER"/></form></td></tr></tbody></table></div><header id="result-desc"></header><ul id="feed-container"></ul><div id="feed-nav"></div>
<script src="https://googledrive.com/host/0B6d8LexqwLakUzlHQVBIaVJQSE0" type="text/javascript"></script>


jika sudah silahkan klik Publish. Selesai.

Saran saya ketika anda ingin membuat sebuah halaman laman, Biasakan menulis judulnya terlebih dahulu. Agar URL laman sesuai dengan judulnya. Demikian Artikel kali ini tentang Cara Membuat Sitemap Lengkap Dengan Fitur Artikel Terbaru, Label, dan Pencarian. Selamat Mencoba.

Sumber: http://infonya.indradp.com/2016/03/cara-membuat-sitemap-daftar-isi-dengan-fitur-lengkap-di-blog.html

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser