Kali ini saya akan memberikan sebuah cara yang cukup mudah dilakukan, jika Anda ingin menambahkan fitur sitemap pada blog Anda. Beberapa cara ini saya kumpulkan dari berbagai macam blog yang ada di internet. Semoga ini bisa menambah referensi untuk Anda semua. Sebelum itu sudah ada yang tau apa sitemap itu?
Pengertian sitemap
Sitemap merupakan teknik simpel yang sering kali dilakukan atau digunakan oleh seorang pemilik website atau blog untuk memudahkan para pengunjung atau pembacanya saat mengunjungi situsnya. Dengan menggunakan sitemap para pemiliki website atau blog dapat memberi tahu semua informasi yang terdapat pada website atau blognya. Tentunya menggunakan sitemap yang keren dan 100% SEO friendly.Keuntungan Menggunakan Sitemap
Dengan menggunakan sitemap pada website atau blog kita tentu akan mendapatkan keuntungan, beberapa keuntungan tersebut adalah:Memudahkan para pengunjung website atau blog.
Memberikan informasi secara lengkap.
Sebagian dari langkah SEO.
Membuat tampilan website atau blog menjadi rapi.
Serta masih banyak lagi keuntungan apabila website atau blog kita menggunakan sitemap.
Cara Membuat Sitemap
Cara untuk membuat sitemap ini cuku mudah. Berikut beberapa langkahnya:Masuk ke blogger.com.
Plih menu laman.
Pilih laman baru.
Ubah settingan dari Compose menjadi HTML.
Lalu masukkan script sitemap-nya.
Lalu sesudah dimasukkan script silakan klik menu publikasikan.
Beberapa Sitemap Keren dan 100% SEO Friendly
Berikut beberapa sitemap keren dari beberapa blog yang sudah sayang rangkum:
Sitemap atau Daftar Isi Keren dan 100% SEO Friendly: Contoh 1
<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/0B2ww3WS8P1MJM2JkeHlyUVp4dnc/" type="text/javascript"></script>
<script src="http://www.YOURBLOGDOMAIN.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Keterangan:
Ubah http://www.YOURBLOGDOMAIN.com dengan URL blog Anda.
Sitemap atau Daftar Isi Keren dan 100% SEO Friendly: Contoh 2
<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript"></script>
<script src="http://www.YOURBLOGDOMAIN.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Keterangan:
Ubah http://www.YOURBLOGDOMAIN.com dengan URL blog Anda.
Sitemap atau Daftar Isi Keren dan 100% SEO Friendly: Contoh 3
Code Sitemap Contoh 2
<style type="text/css">
#table-outer {
padding:7px 10px;
margin:30px 30px 0;
}
#table-outer table {
width:80%;
margin:0;
}
#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 5px;
font-size:86%;
text-transform:uppercase;
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;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
#table-outer input:focus,#table-outer select:focus {}
#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:116px;
overflow:hidden;
word-wrap:break-word;
text-overflow:ellipsis;
}
#feed-container li a {
text-decoration:none;
color:#000;
}
#feed-container li a:hover {
text-decoration:none;
color:#eee;
}
#feed-container li .news-text {margin:10px 0 0;}
#feed-container li img {
margin:0 10px 5px 0;
padding:5px;
background-color:#eee;
border-radius:5px;
float:left;
}
#result-desc {
margin:0 30px;
padding:0;
border-bottom:2px solid #eee;
}
#result-desc span,#result-desc div {
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:bold;
text-transform:uppercase;
}
#feed-nav a,#feed-nav span {
border:1px solid #eee;
padding:0;
color:#999;
text-decoration:none;
display:block;
height:30px;
line-height:32px;
}
#feed-nav a:hover,#feed-nav a:active {
color:#555;
}
#feed-nav span {cursor:wait;}
@media (max-width:800px) {
#feedContainer li {
float:none;
display:block;
width:auto;
height:auto;
}
#feedContainer:after {
display:none
}
}
</style><br />
<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">POSTING TERBARU</option>
<option value="updated">POSTING DIPERBAHARUI</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 dengan kata kunci:</label></td> <td><form id="post-searcher">
<input id="feed-q" type="text" /><br /></form>
</td> </tr>
</tbody> </table>
</div>
<br />
<header id="result-desc"></header><br /><br />
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://googledrive.com/host/0B81NL4MdK9CkZDEwUDJLb3FxYUU" type="text/javascript"></script>
Sitemap atau Daftar Isi Keren dan 100% SEO Friendly: Contoh 4
Code Sitemap Contoh 4
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#tocTable {
border:2px solid white;
font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:#333;
border-collapse:collapse;
text-align:left;
margin:0 0 5px;
}
#tocTable th,
#tocTable td {
border:1px solid white;
background-color:#fafafa;
padding:10px 15px;
}
#tocTable th {
background-color:#5d5d5d;
font-weight:bold;
color:white;
text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
width:60%;
background-color:#5A930D;
}
#th-2,#th-3 {width:20%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
padding:0 !important;
background-color:#2372A7;
}
#tocTable td.toc-header-col-3 {background-color:#D7DEF0}
#tocTable a {
display:block;
text-decoration:none;
color:white;
padding:10px 15px;
background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
background-color:#174B6F;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
display:block;
width:220px;
font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:#333;
cursor:pointer;
border:none;
outline:none;
background-color:#eee;
margin:0 0 2px 0;
padding:5px;
}
</style>
<script>
var theTotalPosts = 9999, // Tentukan jumlah maksimal posting
theOptions = "Sortir...", // Label opsi 1
theSortPosts = "Sortir berdasarkan Abjad", // Label opsi 2
theSortLabels = "Sortir berdasarkan Label", // Label opsi 3
theTitles = "Judul Artikel", // Header tabel 1
theLabels = "Label Artikel", // Header tabel 2
theDates = "Bulan Terbit", // Header tabel 3
theBlankLabels = "Tak Berlabel", // Label kosong
theSiteUrl = "http://www.YOURBLOGDOMAIN.com"; //
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/toc-table-sort.js"></script></div>
Keterangan:
Ubah http://www.YOURBLOGDOMAIN.com dengan URL blog Anda.
Sitemap atau Daftar Isi Keren dan 100% SEO Friendly: Contoh 5
Code Sitemap Contoh 5
<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibers0VQ1it6zQhOuD88CsA_HutwQ8EBFAaIgHHQiVK2ReXHu9jc0w9580f1As1SUHgdhlBTWbgKVF8vBCyyyC1-AlRKWDAk413fr8fEHz8OdRpyhIFWWeuS0j4ADwc58_-JjC8I85sCU/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn2uHS0oHTg6i1TDH-rANhz-t2e6gglsi14tEtAyl0zLbI95rAlOjIAqIPHHGLPKA3or-VlDe9BMXFdI8X6wQQtz13eD1HQnaWw8ofRxcBd1EJ51N9eUD8XC2lluLrMdPNnZeHdE73MpY/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzKbumpiEhofTLpPIs8mwStzYdiPVZZ7tBw4yJKerCCR348zooVxuwmY5qg_cWdIxzvX0d-wGgq_FRT4TPufy37YL0iz6Z-ldB3Rz_XVEepNCZyItSGLYoOIOxWy_EFW_gvBHjwC128gA/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/javascript"></script><script src="http://www.YOURBLOGDOMAIN.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>
Keterangan:
Ubah http://www.YOURBLOGDOMAIN.com dengan URL blog Anda.
Sitemap atau Daftar Isi Keren dan 100% SEO Friendly: Contoh 6
Code Sitemap Contoh 6
<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#8A94F0;
-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:#000;
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 12px Tahoma,Sans-Serif;
color:white;
}
#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:#000;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#C4C9F8;
color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#181D67;
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 #181D67;
-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:#051466;
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:#eee;
}
#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:#999;
color:none;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
border:2px solid #333;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#224C19;
-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
box-shadow:2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:white;
color:#333;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>
<br />
<div id="tabbed-toc">
<span class="loading">Memuat Sitemap... :)</span></div>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://www.YOURBLOGDOMAIN.com",
containerId: "tabbed-toc",
activeTab: 1,
showDates: false,
showSummaries: false,
numChars: 200,
showThumbnails: false,
monthNames: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true,
maxResults: 9999,
preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="https://iwan-namikaze.googlecode.com/files/sitemapkeren.js" type="text/javascript"></script></div>
Keterangan:
Ganti tulisan Memuat Sitemap...:) menjadi tulisan yang diinginkan. Tulisan ini akan muncul apabila browser memuat sitemap.
Ubah http://www.YOURBLOGDOMAIN.com dengan URL blog Anda.
Sitemap atau Daftar Isi Keren dan 100% SEO Friendly: Contoh 7
Code Sitemap Contoh 7
- Silahkan Anda Buka Blogger.com
- Jika Sudah Silahkan Kalian Pilih Blog Kalian
- Setelah Itu Masuk Ke Tempelate > Edit HTML
Nah Sekarang Silahkan Kalian Copy Script Dibawah Tepat Diatas ]]></b:skin> atau </style> Jangan Lupa Untuk Menggunakan CTRL + F Untuk Mempermudah Anda Mencari Code Tersebut
CODE CSS
#table-outer table{width:100%;margin:0;padding:0}
#table-outer input,#table-outer select{padding:4px;font:inherit;border:2px solid #ecf0f1;width:170px;box-sizing:border-box}
#table-outer select{cursor:pointer;outline:none}
#table-outer input:focus{outline:none}
#resultDesc{margin-bottom:10px}
#feedContainer{overflow:hidden;margin-top:20px}
#feedContainer strong{font-size:10px}
#feedContainer,#feedContainer li{padding:0;margin:0;list-style:none}
#feedContainer li{float:left;width:50%;margin-bottom:10px;position:relative;z-index:0}
#feedContainer .inner{padding:8px;margin:0 5px;position:relative;background-color:#fff;border:1px solid #f9f9f9;height:133px}
#feedContainer img{float:left;margin:0 8px 0 0;max-width:100%;border:1px solid #f9f9f9;padding:2px}
#feedContainer .toc-title{max-height:33px;overflow:hidden}
#feedContainer .toc-title:hover{text-decoration:underline}
#feedContainer .news-text{font-size:11px}
#feedNav a,#feedNav span{display:block;text-align:center;color:#fff;text-decoration:none;background-color:#444;padding:5px;width:95%;margin:0 auto;transition:all 0.3s linear}
#feedNav a,#feedNav span:hover{background-color:#333;transition:all 0.3s linear}
#feedContainer .date{display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px}
#feedContainer .date .dd{font-size:9px;line-height:5px;font-weight:bold}
#feedContainer .date span{display:inline-block;line-height:5px;text-align:center;margin-left:5px}
- Nah Setelah Itu Silahkan Kalian Simpan
- Jika Sudah Sekarang Kalian Masuk Ke Menu Laman/Page
- Klik Laman Baru Untuk Membuat Laman Baru
- Berikan Judul Pada Laman Tersebut Berupa Sitemap (Bisa Anda Kreasikan Sendiri)
- Jika Sudah Silahkan Kalian Ganti Dari Compose Ke HTML Seperti Foto Dibawah
Nah Setelah Itu Silahkan Kalian Paste Kan Kode Dibawah Ini
HTML
<div id="table-outer">
Oleh <a href="http://www.anjasmp.blogspot.com/" target="_blank">Anjasmp</a></div>
<div id="table-outer">
<br />
<table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select><br />
<br /></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>
<script src="https://arlina-design.googlecode.com/svn/tocs.js" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
Jika Sudah Sekarang Kalian Publish Laman Dan Lihat Hasilnya.
Sitemap atau Daftar Isi Keren dan 100% SEO Friendly: Contoh 8
<div dir="ltr" style="text-align: left;">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;box-shadow:0 0 0 1px #eee;}
.table-of-content .toc-header{position:relative;color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;transition:initial;}
.table-of-content .toc-header:hover{background-color:#fdfdfd;}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#fc4f3f transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#fcfcfc!important;transition:initial;border-bottom:1px solid #e9e9e9;border-top:1px solid #fff;}
.table-of-content li:first-child(border-top:0}
.table-of-content li:last-child(border-bottom:0}
.post ol li a,.post ol li a:link{color:#444!important;text-decoration:none;font-size:86%;transition:initial}
.post ol li a:visited{color:#999;transition:initial}
.post ol li a:link:hover,.post ol li a:visited:hover{color:#fc4f3f;text-decoration:underline;transition:initial}
.post ol li:before{display:none}
ol {text-shadow:initial;}
.post a:link {color:#444!important;}
</style>
<br />
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
url: 'http://www.YOURBLOGDOMAIN.com',
containerId: 'table-of-content',
showNew: 5,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#fc7569;padding:1px 6px 2px 6px;line-height:normal;float:right;border-radius:3px;text-transform:uppercase;">baru</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 0,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script><br />
<script src="//googledrive.com/host/0B8a75E285BMHV3VMNHlrRTF3YzA"></script>
</div>
Keterangan:
Ubah http://www.YOURBLOGDOMAIN.com dengan URL blog Anda.
Sitemap atau Daftar Isi Keren dan 100% SEO Friendly: Contoh 9
Code Sitemap Contoh 9
<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#000;font-family:inherit;font-weight:400;font-size:14px;background-color:#fb8282;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#eae6e6}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fff}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#fff!important;transition:initial}
.table-of-content a{color:#000;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#ff000;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ff0000;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<br />
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
url: 'http://www.YOURBLOGDOMAIN.com',
containerId: 'table-of-content',
showNew: 7,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#0f9b65;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">BARU</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="https://googledrive.com/host/0B0jnymbj3SiqSkhtRzJHVWNSYkU/ylubis-sitemap.js"></script>
</div>
Keterangan:
Ganti tulisan Memuat konten... menjadi tulisan yang diinginkan. Tulisan ini akan muncul apabila browser memuat sitemap.
Ubah http://www.YOURBLOGDOMAIN.com dengan URL blog Anda.
Sitemap atau Daftar Isi Keren dan 100% SEO Friendly: Contoh 10
Code Sitemap Contoh 10
<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript"></script>
<script src="http://www.YOURBLOGDOMAIN.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Keterangan:
Ubah http://www.YOURBLOGDOMAIN.com dengan URL blog Anda.
No comments:
Write komentar