Sitemap Blogger Responsive Seo Friendly

Tutorial cara membuat sitemap atau Daftar Isi yang Seo Friendly Dan Responsive, Keuntungan menggunakan daftar isi atau sitemap di blog adalah untuk menampilkan semua artikel dalam sebuah widget atau laman. Jadi akan memudahkan pengunjung karena tidak perlu banyak membuka sebuah link next post / label satu - satu yang akan membuat pengunjung bosan dan males membukanya apalagi kalo koneksi si pengunjung lemoth. Maka dengan widget daftar isi / sitemap ini akan memudahkannya, karena tinggal membuka widget ini semua daftar bisa tampil di satu halaman. Widget sitemap ini juga bisa di letakan di laman atau halaman statistik.

Ok, Langsung ke Tutorialnya

• Login ke Blogger.com
• Pilih Template -> Edit HTML, Cari Kode
• ]]></b:skin> Atau </style>
• Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!

#wrapper{
  margin:30px auto;
  max-width:600px;
}

a:link {
color:#fc4f3f;
text-decoration:none;
outline:none;
transition:all .25s;
}

a:visited:hover {
color:#fc4f3f;
text-decoration:none;
}

a:visited,a:link:hover {
color:#444;
text-decoration:none;
}

table {
max-width:100%;
width:100%;
margin:1.5em auto;
}

table td,.post-body table caption {
border:1px solid #d9d9d9;
text-align:left;
vertical-align:top;
padding:10px;
}

table th {
border:1px solid #009abf;
text-align:left;
vertical-align:top;
padding:10px;
}

table.tr-caption-container {
border:1px solid #eee;
}

th {
font-weight:700;
}

table caption {
border:none;
font-style:italic;
}

td:hover {
background:#fafafa;
}

#bp_toc {
background:#334;
color:#666;
margin:0 auto;
padding:5px;
}

span.toc-note {
display:block;
text-align:center;
color:#fff;
font-family:'Open Sans';
font-weight:700;
text-transform:uppercase;
font-size:30px;
line-height:normal;
margin:0 auto;
padding:20px;
}

.toc-header-col1 {
background-color:#f5f5f5;
width:250px;
padding:10px;
}

.toc-header-col2 {
background-color:#f5f5f5;
width:75px;
padding:10px;
}

.toc-header-col3 {
background-color:#f5f5f5;
width:125px;
padding:10px;
}

.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited {
font-size:13px;
text-decoration:none;
color:#aaa;
font-family:'Open Sans';
font-weight:700;
letter-spacing:.5px;
}

.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover {
text-decoration:none;
}

.toc-entry-col1,.toc-entry-col2,.toc-entry-col3 {
background:#fdfdfd;
font-size:89%;
padding:5px;
}

.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a {
color:#666;
font-size:13px;
font-weight: 700;
}

.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover {
color:#e76e66;
}

#bp_toc table {
width:100%;
counter-reset:rowNumber;
margin:0 auto;
}

.toc-entry-col1 {
counter-increment:rowNumber;
}

#bp_toc table tr td.toc-entry-col1:first-child::before {
content:counter(rowNumber);
min-width:1em;
margin-right:.5em;
}

td.toc-entry-col2 {
background:#fafafa;
}

• Sekarang Save Template
• Lanjut ke tahap berikutnya
• Nah di sini agan pilih mau di pasang di mana Sitemap / Daftar isi ini.
• Bisa di halaman statistik [Laman] atau di widget [Tataletak]
• Ini HTML yangharus agan masukan ke laman / widget

<sitemap-tamvan>
<div id='wrapper'>
<div id="bp_toc">
</div>
<script src="https://rawgit.com/mastamvan/backup/master/sitemap-seo.js" type="text/javascript"></script> <script src="https://theboegisll.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
  </div>
  </sitemap-tamvan>

• Ganti link : https://theboegisll.blogspot.com/ dengan link blog you !!! hehehe...
• Selesai OK!!!