Membuat Sitemap Keren Pada Halaman Statis

Membuat Sitemap Keren Pada Halaman Statis

Kegunaan sitemap atau daftar isi pada blog adalah untuk memudahkan pengunjung melihat-lihat artikel yang ada pada blog tersebut. Penting untuk suatu blog memiliki sitemap, selain untuk menampilkan semua artikel yang ada pada blog tersebut, pengunjung juga dapat mengetahui artikel terbaru atau terupdate pada blog. Sebenarnya google telah memberikan fasilitas berupa widget arsip blog, namun widget yang berlebihan hanya akan membuat loading menjadi lebih lama. Oleh karena itu, saya merekomendasikan untuk membuat halaman khusus untuk sitemap.

Telah banyak artikel yang membahas sitemap, jadi saya akan membahas versi saya sendiri. Bisa Anda lihat sitemap pada blog ini, tampilan yang digunakan cukup menarik dan daftar isi yang diperlihatkan menurut label. Ini dapat memudahkan pengunjung agar lebih mudah mencari artikel sesuai tema yang di inginkan. Artikel terbaru pada tema yang dipilih juga dapat dengan jelas dilihat, sehingga pengunjung dapat mengikuti artikel terupdate pada blog ini. Bila tertarik untuk memasangnya pada blog Anda, silahkan ikuti tutorial berikut.

1. Silahkan login ke blog sobat lalu menuju ke Template > Edit HTML, lalu letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>

/*CSS Sitemap ---- http://wajahilmu.blogspot.com/ */
#tabbed-toc{margin:0 auto;background-color:#fff;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#FC7569}
#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 12px Tahoma,Sans-Serif;color:#F53B3B}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none}
#tabbed-toc .toc-tabs{width:20%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Tahoma,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#FC7569;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#fff;color:black}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#F53B3B;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:5px solid #F53B3B;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px Tahoma,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#2d2d2d;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden}
#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
#tabbed-toc .panel li:nth-child(even){background-color:#fff}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#F9F9F9;color:#FC7569;outline:none}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}

2. Jika sudah, silahkan save lalu buat halaman baru untuk sitemapnya. Saya merekomendasikan Anda untuk membuatnya dihalaman statis blog.

Baca juga : Cara Memasang Konversi Kode Pada Blog

3. Pada halaman Statis tersebut, ubahlah kedalam mode HTML jangan Compose agar kodenya aktif.

4. Masukkan Kode pemanggil Sitemapnya

<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="tabbed-toc">
<span class="loading">Loading Sitemap .. Please Wait.. :)</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://wajahilmu.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#FC7569;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="https://googledrive.com/host/0B2oQSsObIa2ldzBoUDlQWElRQlk" type="text/javascript"></script>
</div>

Keterangan :

• Ganti http://wajahilmu.blogspot.com/ dengan alamat blog sobat,
• Anda dapat menentukan jumlah artikel terbaru yang ingin di tampilkan dengan mengganti angka 15 pada showNew.

5. Silahkan di publikasikan dan lihat hasilnya.

Demo

Bagikan Artikel ini