Home / desain / tips trik blogging / Cara Mudah Membuat Sitemap Keren di Blog

Cara Download Cara Mudah Membuat Sitemap Keren di Blog Update Terbaru

Sedikit Info Seputar Cara Mudah Membuat Sitemap Keren di Blog Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Cara Mudah Membuat Sitemap Keren di Blog, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel desain, Artikel tips trik blogging, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Cara Mudah Membuat Sitemap Keren di Blog Terbaru
link: Cara Mudah Membuat Sitemap Keren di Blog

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Cara Mudah Membuat Sitemap Keren di Blog Terbaru dan Terlengkap 2017

Cara Membuat Sitemap Keren di Blog - Beberapa waktu yang lalu saya sempat membagikan cara membuat atau memasang sitemap di blog. Oh, iya. Sitemap dapat dikatakan sebagai daftar isinya sebuah blog. Sitemap memegang peranan yang penting dalam hal SEO. Dimana, mesin pencari menggunakan sitemap untuk mengindeks post - post pada blog. Tutorial yang dibahas kali ini sebenarnya tidak jauh berbeda dengan tutorial sitemap yang dibahas sebelumnya. Hanya saja, sitemap yang dibahas kali ini telah dikustomisasi, sehingga terlihat lebih keren dan menarik. Cara memasangnya pun sama mudahnya dengan sitemap yang pernah dibahas sebelumnya. Untuk previewnya, silahkan lihat gambar dibawah. Atau, jika mau melihat previewnya langsung, klik disini.
Preview sitemap keren yang telah dipasang di blog. Keren bukan... :)
Oke, to the point. Berikut ini cara memasang atau membuat sitemap keren di blog.
1.     Buka Blogger, dan masuk ke Laman.
2.     Klik Laman Baru -> Laman Kosong.
Langkah pertama membuat sitemap keren di blog.
3.     Klik tombol HTML yang berada di pojok kiri atas. (disebelah tombol Compose).
4.     Copy dan pastekan kode panjang (hehehe) berikut.
<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://xxpc123xx.blogspot.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>
Keterangan :
Ganti tulisan Memuat Sitemap...:) menjadi tulisan yang diinginkan. Tulisan ini akan muncul apabila browser memuat sitemap.
Tulisan yang berwarna merah merupakan alamat blog Anda (http://xxpc123xx.blogspot.com). Ganti sesuai dengan judul blog Anda.
showDates: false, ganti nilainya menjadi true apabila ingin menampilkan tanggal posting
showSummaries: false, ganti nilainya menjadi true apabila Anda ingin menampilkan ringkasan dari posting Anda.
showThumbnails: false, fungsinya untuk menampilkan Thumbnail (gambar dari posting Anda) dari posting Anda. Jika Anda ingin menampilkan thumbnail, ganti menjadi true.
newTabLink: true, ganti nilainya menjadi false untuk membuat link tidak membuka di laman / tab baru.
5.     Jangan lupa, isikan juga isian Judul laman sesuai dengan keinginan Anda. Misalnya: Daftar Isi (Sitemap). Berikut ini contoh peletakkan kode HTML-nya:
Preview / contoh peletakkan kode sitemap keren di blog.
6.     Terakhir, klik Publikasikan.
Untuk menambahkan tulisan Sitemap pada menu bar Anda, silahkan klik disini. Atau, jika Anda menggunakan menu bar tanpa HTML yang pernah saya bahas sebelumnya, klik disana. Selamat mencoba! Bantu saya dengan men-Share artikel ini (berikan pula Google +!), dan tolong tinggalkan komentar! Terima kasih, dan salam blogger!

Itulah sedikit Artikel Cara Mudah Membuat Sitemap Keren di Blog terbaru dari kami

Semoga artikel Cara Mudah Membuat Sitemap Keren di Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Mudah Membuat Sitemap Keren di Blog

Share this