BERBAGI ILMU

Pada kesempatan kali ini saya akan membagikan tutorial bagaimana cara membuat daftar isi /sitemap blog pada (blogger.com). sesuai dengan namanya "Daftar Isi" yang berarti apa saja yang terdapat dalam sebuah blog (semua isi blog). dengan tutorial ini, maka kita akan membuat dan tahu bagaimana benuk dari daftar isi tersebut.

daftar isi yang akan saya bagikan cukup simpel namun dalam segi fungsionalitas sangat membantu untuk pribvadi saya, karena pada daftar isi yang akan kita buat berupa postingan-postingan yang dikemas sedemikian rupa, sehingga dapat lebih memudahkan untuk mencari artikel pada/postingan terbaru, misal sesuai pada label yang dituju.

gambarannya seperti pada contoh dibawah ini :

Untuk cara membuatnya silahkan ikuti langkah berikut

1. Masuk ke dasbor blogger dan pilih pages/ halaman. kemudian pilih new page

2. setelah halaman baru terbuka silahkan kasih judul Daftar isi dan pilih HTML

3. Kemudian copy paste kode html di bawah ini

<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" placeholder="Ketik dan tekan ENTER" type="text" /></form></td></tr></tbody></table></div><br /><br /><header id="result-desc"></header><br /><br /><ul id="feed-container"></ul><div id="feed-nav"></div>

4. selesai. tinggal save. maka daftar isi telah siap untuk dipublish. Mungkin cukup itu saja, semoga bisa memberikan manfaat. keep enjoy and have a nice day :)