Membuat Sitemap Keren di Halaman Blog

Cara Membuat Sitemap Keren di halaman blog - Sitemap atau kalau bahasa kita nya adalah Daftar isi,salah satu laman blog yang dimana disana terdapat semua artikel blog yang pernah kita posting,dan di laman Sitemap tersebut merangkum dari berbagai label atau kategori blog

Banyak sekali macam-macam atau style Sitemap tersebut,namun disini saya akan berbagi style sitemap atau daftar isi yang menurut saya keren,dan saya pernah mencoba sitemap ini di salah satu blog saya dan memang tampilan nya dapat di andalkan

Sitemap ini selain berisi bebagai postingan yang terdiri dari berbagai kategori,sitemap atau daftar isi ini juga sengaja di pasangan di laman blog agar memudahkan para pengujung blog untuk mencari berbagai artikel yang mereka butuhkan

Maka dengan Sitemap atau daftar isi ini artikel yang mereka butuhkan akan cepat ketemu kaena disana sudah di rangkum sesuai dengan kategori masing masing dan hanya tinggal klik saja untuk mencari artikel yang mereka butuhkan tersebut

Cara Memasang Sitemap atau daftar Isi di halaman blog

Untuk memasang Sitemap atau daftar isi ini sangatlah mudah sekali,dan berbagai cara untuk memasang sitemap tersebut,ada yang kode nya di pisah dan di pasang melalui edit html dan ada juga yang di pasang secara bersamaan di halaman blog,

Untuk pemasangan sitemap atau daftar isi ini dapat anda ikuti langkah-langkah pemasangan nya di bawah ini

• Silahkan sobat masuk terlebih dahulu ke Dashboard Blogger
• Setelah itu silahkan klik Template yang berada di bagian kiri Dashboard blogger
• Setelah itu silahkan sobat klik edit html
• Setelah berada di bagian Pengeditan kemudian silahkan anda cari kode </b:skin> untuk meudahkan pencarian silahkan gunakan tombol Ctrl+F tekan secara bersamaan kemudian letakan kode CSS berikut sebelum kode tersebut

#tabbed-toc {
width:99%;
margin:0 auto;
background-color:#1abc9c;
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:#c0392b;
color:#FFF
}

#tabbed-toc .toc-tabs li a.active-tab {
background-color:#e74c3c;
color:#FFF;
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;
box-sizing:border-box
}

#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
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:#3498db;
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;
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
}
}

• Setelah itu Save Template

 Langkah-Langkah Pemasangan Sitemap atau Daftar isi di halaman blog

 Setelah langkah di atas anda lakukan,langkah selanjut nya adalah sebagai berikut

• Masih berada di bagian Dashboard blogger
• Kemudian anda klik "Pages" atau laman blog yang berada di bagian kiri Dashboard blogger
• Setelah silahkan anda membuat halaman blog nya
• Setelah membuat halaman blog letakan kode berikut di bagian "HTML" yang berada di bagian kanan "Compose"

<div id="tabbed-toc">
<span class="loading">Loading, Please wait...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://roomahtips.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: true,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    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://sites.google.com/site/daffaditya11/sitemapkeren.js" type="text/javascript"></script>

Catatan : Silahkan ganti URL roomahtips.blogspot.com dengan URL blog sobat
Nah itulah cara membuat Sitemap atau daftar isi di blog dengan tampilan yang keren,semoga artikel nya bisa membantu dan bermanfaat,salam blogger

ads

• SHARES
• Share
• Tweet
• Share
• Share

Previous

Newer Post

Next

Older Post

Posted by Dede Ubed, Published at 04 September and have 0 komentar