Cara Membuat Sitemap / Daftar Isi dengan Navigasi Per Abjad di Blogger

SItemap atau daftar isi merupakan sebuah halaman yang berisi kumpulan link artikel atau postingan dari suatu website. Halaman sitemap ini sangat berguna untuk mempermudah pengunjung web untuk mencari artikel yang mereka cari. Di samping itu, sitemap juga dapat mempermudah index artikel kamu.

Pada artikel kali ini, penulis akan membagikan sedikit tutorial singkat Cara Membuat Sitemap (Daftar Isi) dengan Navigasi Per Abjad di Blogger. Sitemap ini sangat cocok dipasangkan pada situs anime atau situs film yang dapat membantu pengunjung untuk mencari film yang mereka cari. Jika kamu tertarik untuk memasangnya, kamu bisa simak dalam tutorial berikut ini.

Cara Membuat Sitemap di Halaman Statis di Blogger

1. Log in ke akun Blogger  – Tema  – Edit HTML.

2. Copy dan Pastekan kode Style CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

/* Daftar Judul Anime */
.naminadaftar{overflow:hidden}
.naminadaftar .namina-ini{font-size:14px}
.naminadaftar .namina-ini a{line-height:30px;width:32px;color:#fff;border-radius:3px;background:#6AB2F2;transition:all 0.25s;display:inline-block;text-align:center;margin-bottom:3px}
.naminadaftar .namina-ini a:hover{text-decoration:underline;color:#FFFFFF}
.naminadaftar .namina-wrap{margin-top:20px}
.naminadaftar .namina-group{display:inline-block;width:100%;background:#F9F9F9;margin-bottom:10px}
.naminadaftar .namina-head{font-weight:700;overflow:hidden;margin-bottom:10px;background:#1581BC;font-size:15px}
.naminadaftar .namina-head a{color:#FFFFFF;background:#19A3EA;float:left;margin:-5px -10px -8px -10px;padding:12px 30px;border-top-right-radius:50px}
.naminadaftar .namina-item{float:left;color:#727272;width:33.3%;border-left:2px solid #D7D7D7}
.naminadaftar .namina-item a{line-height:24px;font-size:14px;color:#7A7A7A;padding-right:10px;text-overflow:ellipsis;overflow:hidden;font-weight:100;white-space:nowrap;padding-left:10px}
@media screen and (max-width:1066px){.naminadaftar .namina-ini a{margin:1px}}
@media only screen and (max-width:768px){.naminadaftar .namina-item{width:50%}}
@media screen and

3. Simpan Tema

4. Buat postingan baru di halaman statis. Caranya, pilih menu Halaman  – Halaman Baru  – Masuk ke mode HTML bukan Compose. Copy dan Pastekan kode pemanggil di bawah ini.

<div class='naminadaftar'>
   <div class='namina-ini'>
      <a href='#%23'>#</a>
      <a href='#A'>A</a>
      <a href='#B'>B</a>
      <a href='#C'>C</a>
      <a href='#D'>D</a>
      <a href='#E'>E</a>
      <a href='#F'>F</a>
      <a href='#G'>G</a>
      <a href='#H'>H</a>
      <a href='#I'>I</a>
      <a href='#J'>J</a>
      <a href='#K'>K</a>
      <a href='#L'>L</a>
      <a href='#M'>M</a>
      <a href='#N'>N</a>
      <a href='#O'>O</a>
      <a href='#P'>P</a>
      <a href='#Q'>Q</a>
      <a href='#R'>R</a>
      <a href='#S'>S</a>
      <a href='#T'>T</a>
      <a href='#U'>U</a>
      <a href='#V'>V</a>
      <a href='#W'>W</a>
      <a href='#X'>X</a>
      <a href='#Y'>Y</a>
      <a href='#Z'>Z</a>
      <div class='clear'></div>
   </div>
   <div class='namina-wrap'>
      <div class='namina-group'>
         <div class='namina-head'><a name='#'>#</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='A'>A</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='B'>B</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='C'>C</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='D'>D</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='E'>E</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='F'>F</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='G'>G</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='H'>H</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='I'>I</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='J'>J</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='K'>K</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='L'>L</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='M'>M</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='N'>N</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='O'>O</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='P'>P</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='Q'>Q</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='R'>R</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='S'>S</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='T'>T</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='U'>U</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='V'>V</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='W'>W</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='X'>X</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='Y'>Y</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='Z'>Z</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
   </div>
</div>

5. Selesai. Postingan siap di publish.

Catatan:

• # : Ganti dengan Link atau URL postingan berdasarkan label.
• Nama Anime : Ganti dengan nama postingan atau judul anime (Jika untuk situs anime).

Berikut adalah tampilan Sitemap (Daftar Isi) dengan Navigasi Per Abjad yang telah terpasang di blogger.

Live Preview 

Sekian tutorial Cara Membuat Sitemap (Daftar Isi) dengan Navigasi Per Abjad di Blogger yang telah penulis bagikan untuk kamu. Jika kamu memiliki pertanyaan perihal artikel ini, jangan sungkan untuk berkomentar di bawah ya. Semoga bermanfaat.