Sitemap Blogger Responsive Seo Friendly

Cara Membuat Widget Sitemap Responsive Seo Friendly

Mas Tamvan berbagi 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.

Result

Tutorial Blogger Lainnya :

• 
  

  
  Membuat Widget About Me Dengan Tombol Pop Up
  

  
  


• 
  

  
  Membuat Widget Author Plus Follower With CSS
  

  
  


• 
  

  
  Membuat Search Dan Follower Seperti brilio.net
  

  
  

Ok, Langsung ke Tutorialnya

Membuat Sitemap Blogger Responsive Seo Friendly

• 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="http://mastamvan.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
  </div>
  </sitemap-tamvan>

• Memasang HTML
  

Memasang Sitemap / Daftar Isi di Laman.

• Masuk ke laman -> Klik laman baru, terus masukan HTML di atas.
  

• Ingat, paste pada mode HTML, lihat pojok kanan atas ada Compose dan HTML, klik dulu HTMLnya, lalu paste scriptnya.
  

• Silahkan kasih judul Sitemap
  

Memasang Sitemap / Daftar Isi di Widget.

• Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.
  

• Klik Itu dan masukan HTML Sitemapnya, Lalu save
  

Note:

Silahkan Ganti URL http://mastamvan.blogspot.com/ dengan url blog kalian

Dan Selesai, Salam Tamvan.

Cukup sekian tutorial dari mas tamvan, tentang cara membuat sitemap / daftar isi di blog yang responsive dan seo friendly, semoga brmanfaat. Jangan lupa tuk share dan saya tunggu komentar kalian :)