Cara Mudah Membuat Sitemap Keren di Blog

Cara Mudah Membuat Sitemap Keren di Blog
Image by. www.nccurban.com

Cara Mudah Membuat Sitemap Keren di Blog - Sitemap adalah halaman yang memudahkan pengunjung untuk melihat daftar postingan sesuai label, Sitemap bisa juga dibilang daftar isi dari suatu blog tersebut. Sama halnya dengan halaman Privacy Policy, Disclaimer, Contact, Sitemap juga berperan penting sebagai syarat agar diterima saat melakukan pendaftaran Google Adsense. Selain itu, halaman Sitemap menjadi nilai tambah dari suatu blog tersebut karena blog tersebut menjadi terlihat lebih profesional.

Sebelum kita membuatnya, silahkan cek dulu Demo Sitemap saya yang ingin dibuat di Sitemap Tutorial Blog Paling Baru gimana keren tidak? Pastinya keren dong hehehe. Belum buat halaman Privacy Policy dan Disclaimer? silahkan liat postingan sebelumnya tentang Cara Mudah Membuat Privacy Policy di Blog dan Cara Mudah Membuat Disclaimer di Blog. Sekarang kita mulai tutorial blog kali ini tentang membuat sitemap keren di blog.

Cara Mudah Membuat Sitemap Keren di Blog


#1 Login dulu ke akun blogger sobat
#2 Setelah login Klik tombol Template > lalu klik Edit HTML
#3 Tekan tombol CTRL+F untuk mencari kode ]]></b:skin>
#4 Letakkan kode CSS dibawah ini diatas kode ]]></b:skin>
/*Sitemap TutorialPalingBaru.blogspot.com*/
#tabbed-toc {
width:99%;
margin:0 auto;
background-color:#111;
-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:#333
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:#FFF
}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
margin:0;
padding: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 Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#444;
color:#FFF
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#e74c3c;
color:#FFF;
-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:#FFF;
border-left:5px solid #e74c3c;
-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 Arial,Sans-Serif
}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px;
color:#333;
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#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:#f1f1f1;
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
}
@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888
}
#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:#111;
color:#ccc;
-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:#DF1010;
color:#fff
}
#tabbed-toc .toc-content {
border:none
}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time {
display:none
}
/*Sitemap END*/
#5 Klik Simpan Template
#6 Klik Laman > Laman Baru
#7 Ubah penulisan dari "Compose" menjadi "HTML"
#8 Copy lalu Paste-kan kode dibawah ini
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>

<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://tutorialblogpalingbaru.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://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js" type="text/javascript"></script>
#9 Klik tombol Publikasikan




Note:
Ubah tulisan yang warna biru dengan alamat URL blog sobat

0 Comments for "Cara Mudah Membuat Sitemap Keren di Blog"