Sahabat blogger pasti sudah lebih faham apa itu sitemap dibandingkan dengan saya. Namun disini saya akan sharing sedikit apa itu sitempa dan manfaatnya untuk blog kita. Menurut bahasa sitemap adalah sebuah peta situs atau denah atau struktur lokasi link di blog. Sitemap berfungsi sebagai gambaran lengkap tentang konten apa saja yang di bahas dalam blog tersebut. Sitemap sangat berguna bagi para pengunjung dalam menemukan semua artikel yang termuat dalam blog kita.
Sesuai topik diatas disini saya akan share 5 style sitemap yang menurut saya recomended untuk blogger sekaligus cara pemasangannya.
A. Sitemap berbentuk tabulasi :
1. Login ke blogger agan dan buat laman baru judul terserah agan.
2. Pastekan code berikut dalam mode HTML.
<link href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css" rel="stylesheet"></link>
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
blogUrl: "http://blog-agan.blogspot.com", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>3. Ganti code berwarna orange dengan alamat blog agan.
4. Publish dan lihat hasilnya.
B. Sitemap tabulasi style 2
Langkah - langkahnya sama dengan poin A, bedanya pada codenya saja. Pastekan code berikut untuk membuat sitemap sperti gambar diatas.
<style type="text/css">
#resultDesc {
margin:0;
padding:0 0;
color:#999;
font-weight:bold;
}
#resultDesc span {
margin:0 auto;
padding:5px 10px 7px;
color:#D64D52;
}
#feedNav,#feedNav:hover {
margin:0 auto;
height:34px;
line-height:34px;
text-align:center;
color:#fff;
font:bold 12px/30px Arial,Sans-Serif;
background-color:#3c3c3c;
border-top:1px solid #444;
-webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
-moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#feedNav a,#feedNav span {
color:#999;
padding:0;
text-decoration:none;
}
#feedNav:hover {
color:white;
background-color:#444;
}
#feedNav:active {background-color:#527915;}
#feedNav span {cursor:wait;}
#table-outer {
height:30px;
text-align:center;
padding:0;
margin:15px 20px 0;
}
#table-outer #orderFeedBy {float:left;}
#table-outer #postSearcher {float:right;}
#table-outer input {
display:inline-block;
vertical-align:right;
margin:0 2px 0 0;
padding:0 0;
}
#table-outer select[disabled] {opacity:.4;}
#postSearcher input,#table-outer select {
width:33%;
background-color:#111;
border:none;
padding:5px 5px;
font:normal normal 10px Tahoma,Verdana,Arial,Sans-Serif;
text-transform:uppercase;
color:#777;
outline:none;
-webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
-moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
box-shadow:inset 0 1px 3px black,0 1px 0 #444;
}
#postSearcher {
width:33%;
padding:0;
}
#postSearcher input {
width:96%;
padding:5px 5px;
}
#postSearcher input:focus,#table-outer select:focus {background-color:#090909;}
#tabbed-toc {
width:100%;
margin:5px auto 0;
background-color:#333;
border-left:1px solid #222;
border-right:1px solid #444;
border-top:1px solid #222;
border-bottom:1px solid #444;
overflow:hidden;
position:relative;
color:#888;
}
#tabbed-toc .loading {margin:20px 47%;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc #labelSorteres {
width:20%;
float:left;
margin:0 auto;
}
#tabbed-toc #labelSorter ul {
position:relative;
margin-top:-36px;
background-color:#333;
}
#tabbed-toc #labelSorter li a,#tabbed-toc #labelSorteres #loadCat li a {
display:block;
font:bold 10px/28px Helmet,Freesans,Sans-Serif;
height:34px;
line-height:34px;
overflow:hidden;
text-overflow:ellipsis;
color:#CCC;
border-top:1px solid #444;
border-left:1px solid #444;
border-bottom:1px solid #222;
border-right:1px solid #222;
text-transform:uppercase;
text-decoration:none;
padding:0 10px;
margin:0;
cursor:pointer;
}
#tabbed-toc #labelSorteres #loadCat .allowed,#tabbed-toc #labelSorter .allowed {cursor:not-allowed;}
#tabbed-toc #labelSorter li a:hover {
outline:none;
background-color:#3c3c3c;
color:white;
}
#tabbed-toc #labelSorter li a.active-tab {
color:#C4DEF0;
font-size:13px;
font-weight:bold;
outline:none;
z-index:1;
padding:0 10px;
margin:0;
background-color:#3c3c3c;
}
#tabbed-toc #labelSorter li a.active-tab:hover {cursor:not-allowed;}
#tabbed-toc #labelSorter .disabled,#tabbed-toc #labelSorter .disablet {display:none;}
#tabbed-toc .feedline {
width:80%;
float:right;
text-align:left;
margin:0 auto;
padding:0;
background-color:#333;
border-bottom:1px solid #222;
}
#tabbed-toc #feedContainer {background-color:#333;}
#tabbed-toc #feedContainer li {
float:left;
width:100%;
margin:0 auto;
list-style:none;
background-color:#333;
font:10px Helmet,Freesans,Sans-Serif;
-webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
-moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc #feedContainer li.bold {width:50%;}
#tabbed-toc #feedContainer li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc #feedContainer li a.item-title {
display:block;
position:relative;
font-weight:normal;
font-size:13px;
color:#999;
border-top:1px solid #444;
border-bottom:1px solid #222;
height:34px;
line-height:34px;
padding:0 12px;
text-transform:uppercase;
text-decoration:none;
outline:none;
overflow:hidden;
}
#tabbed-toc #feedContainer li a.item-title:hover,#tabbed-toc #feedContainer li a.item-title:focus {
color:#999;
outline:none;
border-left:4px solid #066696;
-webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
-moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc #feedContainer li .summary {
display:block;
height:50px;
padding:10px 12px 10px;
font-style:italic;
color:#ccc;
border-top:1px solid #444;
border-bottom:1px solid #222;
overflow:hidden;
}
#tabbed-toc #feedContainer li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #3c3c3c;
background-color:#292929;
}
#tabbed-toc #feedContainer li .itemfoot {
clear:both;
height:34px;
line-height:34px;
padding:0 10px;
color:#666;
border-top:1px solid #444;
border-bottom:1px solid #222;
overflow:hidden;
position:relative;
}
#tabbed-toc #feedContainer li .itemfoot a.itemrmore {
float:right;
font-weight:bold;
color:#3B5998;
text-decoration:none;
}
#tabbed-toc #feedContainer li .itemfoot a.itemrmore:hover {
color:#555;
background-color:transparent;
text-decoration:none;
border-color:transparent;
}
</style>
<div id="table-outer">
<select id="orderFeedBy">
<option value="published" selected>POSTING TERBARU</option>
<option value="updated">POSTING DIPERBAHARUI</option>
</select><span id="resultDesc"></span>
<form id="postSearcher">
<input type="text" id="feed-q-box" value="" autocomplete="off" onkeyup="resetField();" />
</form>
</div>
<div id="tabbed-toc"><span id="labelSorteres"><div id="loadCat"></div><div id="labelSorter"><li class="toc-tab-item"><a class="allowed" href="javascript:changeSort(0);">SEDANG MEMUAT LABEL...</a></li></div></span>
<div class="feedline">
<ul id="feedContainer"></ul>
<div id="feedNav"></div>
</div>
</div>
<script type="text/javascript">
var tocConfig = {
url: "http://alamatblogkamu.blogspot.com", // Ganti nilainya menjadi URL blog anda
feedNum: 12, // Jumlah posting yang tampil
numChars: 100, // Jumlah ringkasan posting
thumbWidth: 40, // Ukuran thumbnail posting
newTabLink: true, // Membuka link pada tab baru
showDates: true, // Menampilkan tanggal publis
labelName: false, // Menentukan label yang akan di tampilkan
showSummaries: true, // Menampilkan ringkasan posting
showThumbnails: true, // Menampilkan thumbnail posting
navText: "Berikutnya ▼", // Memuat artikel lainnya
frontText: "Kembali ke Awal ⇑", // Artikel sudah mencapai batas
moreText: "Selengkapnya ►", // Readmore atau baca selengkapnya
loading: "<span>Memuat Content...</span>", // Sedang memuat content
searching: "<span>Mencari...</span>", // Sedang mencari content
noResult: "Tak Ditemukan", // Content tidak di temukan
loadCat: "Sedang Memuat Label...", // Memuat label
resetCat: "Reset Ulang Category...", // Reset label
noImage: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==", // Artikel tanpa gambar
monthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"] // Bulan terbit artikel
};
</script>
<script src="http://externalproject.googlecode.com/svn/trunk/eks/js/tocConfig.js"></script>C. Sitemap Style 3
Untuk memuat sitemap seperti gambar diatas cukup tambahkan code dibawah ini :
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://alamatblogkamu.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>D. Sitemap ala kang ismet
Untuk membuat style sitemap seperti punyanya blog kang ismet, agan cukup buat laman baru dan pastekan code berikut dalam HTMLnya.
<style scoped="scoped" type="text/css">
/* Basic Skin for Multi Feed Loader */
.list-entries{background:white;border:1px solid #d8d8d8}.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}.list-entries li{padding:1em;border-bottom:1px solid #ddd}.list-entries .main-title{padding:0}.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0 !important}.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}.list-entries .title a:hover{text-decoration:underline;color:#5886a7}.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}.list-entries .summary{overflow:hidden;color:#999}.list-entries .more-link{border-bottom:none;}.list-entries .more-link a{display:block;line-height:2em;height:3em;overflow:hidden;text-decoration:none;background-color:#82b965;padding:.5em 1em;position:relative;font-weight:bold;color:white}.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}.list-entries .more-link a:hover{background-color:#71a555}
/* Custom CSS */
.list-entries {
margin:7px;
width:46.7%; /* Lebar widget */
float:left;
font-size:11px;
}
</style>
<div id="feed-list-container">
</div>
<div style="clear: both;">
</div>
<script type="text/javascript">
var multiFeed = {
feedsUri: [
{
name: "Cheat Modoo Marble",
url: "http://mathundip.blogspot.com",
tag: "Cheat Modoo"
},
{
name: "Blogging",
url: "http://mathundip.blogspot.com",
tag: "Blogging"
},
{
name: "My Blog",
url: "http://mathundip.blogspot.com",
tag: "My Blog"
},
{
name: "Materi Kuliah",
url: "http://mathundip.blogspot.com",
tag: "Materi Kuliah"
},
{
name: "Info Undip",
url: "http://mathundip.blogspot.com",
tag: "Info Undip"
}
],
numPost: 4, //jumlah postingan yang tampil
showThumbnail: true, //menampilkan thumbnail
showSummary: true, //menampilkan rigkasan
summaryLength: 80, //menampilkan banyaknya rigkasan
titleLength: "auto",
thumbSize: 72,
containerId: "feed-list-container",
readMore: {
text: "Selengkapnya",
endParam: "?max-results=8"
}
};
</script>
<script src="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js" type="text/javascript"></script>Untuk setelannya ganti code yang berwarna merah dengan Label yang akan ditampilkan, ganti code yang berwarna kuning dengan url blog agan dan yang terakhir ganti code yang berwarna hijau untuk juga dengan label blog agan.
E. Sitemap Dengan jQuery Acordion
Untuk membuat sitemap seperti gambar diatas agan cukup membuat laman baru dan pastekan code berikut dalam mode HTML.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link href="https://googledrive.com/host/0B685uqap5sAIQWVXbHMyZ2ozX0U/sitemap-v1.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="https://googledrive.com/host/0B685uqap5sAIc0tvWHphd1lvT0E/sitemap-v1.js"></script> <script src="AlamatBlogAnda/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script> <script type="text/javascript"> var accToc = true; </script> <script src="https://sites.google.com/site/bloghostingbagus/javascript/daftarisiv2.js" type="text/javascript"></script>Perlu diperhatikan jika blog agan sudah ada script yang sama dengan script warna orange maka script tersebut tidak usah ikut dicopy/ mnding dihapus saja. Dan ganti code warna hijau dengan alamat blog agan.
Cukup sekian share artikel tentang sitemap/ daftar isi pada blog, silakan agan pilih sesuai dengan selera agan masing - masing.