• Translate

4/18/2016

Cara Membuat Sitemap / Daftar Isi Blog Dengan Fitur Lengkap

Tutorial Blogspot |

Advertisement

Cara Membuat Sitemap / Daftar Isi Blog Dengan Fitur Lengkap | Sitemap dengan fitur lengkap ini saya dapat berdasarkan informasi dari kang Adhy owner kompiajaib.com. Saya tertarik dengan sitemap ini karena selain banyak fitur ternyata juga sangat responsive. 

Tujuan para blogger membuat Sitemap / daftar isi adalah agar pengunjung dapat dengan mudah melihat semua artikel di blog kita dalam satu halaman. Dengan begitu maka pengunjung dapat mengetahui artikel-artikel kita mulai dari yang paling baru sampai artikel yang telah lama dipublikasikan.

Ada banyak macam style sitemap blog yang berada di  dunia maya, seperti halnya Sitemap dengan pilihan Sortir, Sitemap berdasarkan Kategori, dan banyak lagi lainnya. Nah, kelebihan dari sitemap yang memiliki fitur lengkap ini adalah dapat menampilkan daftar artikel berdasarkan yang paling baru, artikel yang terakhir diupdate atau dirubah, artikel berdasarkan kategori/label, memiliki fitur pencarian artikel dan juga menampilkan jumlah komentar pada setiap artikelnya. Daftar isi ini juga memiliki tampilan yang responsive serta valid HTML5 dan CSS3.

Bagi yang ingin mencoba Sitemap ini, silahkan ikuti tutorialnya di bawah ini:
  • Silahkan buka menu Pages di Dashboard Blogger. Lalu klik tombol New Page.
New Page Blogger

  • Tuliskan nama pages sesuai dengan keinginan anda, misalnya sitemap, daftar isi. dan jangan lupa silahkan pilih option HTML.
HTML Option
  • Setelah itu silahkan copy-paste kode dibawah ini ke halaman editor pages yang sudah dalam option HTML
 <style scoped="scoped" type="text/css">
strong, b:hover{display:none !important;}
#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>
<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>

<header id="result-desc"></header>

<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://googledrive.com/host/0Bw9JHrugzgvtX3ZWQ0xDRmFTb1U" type="text/javascript"></script>
  • Jika sudah, silahkan klik publish.
Nah, Selesai juga Membuat Sitemap / Daftar Isi Blog Dengan Fitur Lengkap. Semoga bermanfaat.

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • 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 please parse the code in the parser box below.
Show Parser Box

2 comments Add Comment

kenapa mas Sugeng? Puyeng ya? :p

Reply

Comments not appropriate topic will sign SPAM.