Sitemap Blogger Responsive Seo Friendly

widget sitemap

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.




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.

laman pada blogger
  • 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.

cara memasukan script ke 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 :) 

 
15 komentar
  1. gila keten banget artikelnya. wajib ane terapin di blog ane nih. soalnya bloh ane belum ada sitemapnya.. 4 jempol min. lanjutkan dg widget blogger lainnya.

    ReplyDelete
    Replies
    1. he he he iya makasih mas bro. Silahkan gan biar pengunjung bisa memilih artikel dengan mudah. Insya Allah kalo banyak waktu luang saya update terus :-d

      Delete
  2. Wah mantap banget nih sitemapnya izin coba dulu gan :)

    ReplyDelete
  3. Wah keren nih, ntar ane pasang deh di blog ane, thanks gan :D

    ReplyDelete
  4. bookmark dulu gan...ni penting bngt buat blog ane...

    ReplyDelete
  5. mantap gann langsung praktek ahhh :v ditunggu update selanjutnya

    ReplyDelete
  6. Saya coba dulu gan. Semoga hasilnya memuaskan.

    ReplyDelete
  7. sepertinya untuk code " " jadi gagal mas, jadi kek mempengaruhi gitu... pas saya hilangkan bisa...

    ReplyDelete
  8. sitemapnya tamvan sekali kyk saya gk kyk adminnya :v idzin dipasang di blog ane dlu ya... sekalian edit2 cssnya dikit + ngehost jsnya sendiri ya :D

    ReplyDelete
    Replies
    1. wkwkwk Tamvan Verani n Vaik Hati :v
      btw link demonya blm ane rubah :V
      Silahkan gan (y)

      Delete