Tutorial Blogger

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 

sitemap-per-abjad

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.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top