Cara Membuat Sitemap Keren (Otomatis)

Cara Membuat Sitemap Keren (Otomatis) - Yohoho, di posting kali ini saya bakalan share tutorial untuk membuat SITEMAP atau Daftar Isi blog yang keren :D

Sitemap ini sudah otomatis disusun berdasarkan label, jadi kamu tinggal posting-posting saja, gak perlu edit-edit setiap saat :D

Langsung saja ya, simak baik-baik tutornya.

Pertama, copy dan paste-kan semua kode CSS dibawah ini tepat di-atas tag </style> atau </b:skin>

#tabbed-toc {width:100%;margin:0 auto;background-color:#111;overflow:hidden;position:relative;color:#333} #tabbed-toc .loading {display:block;padding:5px 10px;font-family:'Droid Sans',Sans-Serif;font-weight:400;font-size:10px;color:#fff;} #tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {margin:0;padding:0;list-style:none} #tabbed-toc .toc-tabs {width:25%;float:left} #tabbed-toc .toc-tabs li a {display:block;font-family:'Droid Sans',Sans-Serif;font-weight:400;font-size:10px;height:31px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:6px 12px;cursor:pointer;} #tabbed-toc .toc-tabs li a:hover {background-color:#292929;color:#fff} #tabbed-toc .toc-tabs li a.active-tab {background-color:#29abe2 ;color:#fff;position:relative;z-index:5;margin:0 -1px 0 0} #tabbed-toc .toc-content,#tabbed-toc .divider-layer {width:75%;float:right;background-color:#fff;border-left:5px solid #29abe2 ;box-sizing:border-box} #tabbed-toc .divider-layer {float:none;display:block;position:absolute;top:0;right:0; bottom:0;} #tabbed-toc .panel {position:relative;z-index:5;font-family:'Droid Sans',Sans-Serif;font-weight:400;font-size:10px;} #tabbed-toc .panel li a {display:block;position:relative;font-weight:700;font-size:11px; color:#333;line-height:30px;height:30px;padding:6px 12px;text-decoration:none;outline:none; overflow:hidden} #tabbed-toc .panel li a em {background:#ea4c4b;color:#fff!important;padding:2px 4px;border-radius:3px;font-style:normal;} #tabbed-toc .panel li time {display:block;font-style:italic;font-weight:400;font-size:10px; color:#666;float:right} #tabbed-toc .panel li .summary {display:block;padding:10px 12px;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;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa} #tabbed-toc .panel li:nth-child(even) {background-color:#f0f0f0;font-size:10px; color:#fff} #tabbed-toc .panel li:nth-child(odd) {background-color:#f9f9f9;font-size:10px; 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:#333;color:#fff;outline:none} #tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {background-color:#222}

Lalu, copy dan pastekan kode Javascript dibawah ini pada page yang akan dibuat untuk sitemap nantinya.

<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://anichan-id.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: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    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="https://arlina-design.googlecode.com/svn/trunk/javascript/tabbed-toc.js" type="text/javascript"></script></div>

Ganti http://anichan-id.blogspot.com dengan URL blog kalian.

Ganti juga kode #29abe2 (biru muda) dengan warna kesukaan kalian.

Kalau ada masalah atau kurang ngerti, silahkan jangan malu-malu tanyakan di kolom komentar, okey??

source code : imoechansz.blogspot.com

tags : cara membuat sitemap di blog