Saat ini anda sedang membaca tutorial blogger cara membuat dan menambahkan daftar isi atau sitemap yang keren dan responsive pada blog. Daftar isi atau yang lebih familiar banyak menyebutnya biasa disebut sitemap adalah daftar semua isi suatu blog yang dikelompokan berdasarkan label sesuai dengan kategori.

Cara Membuat Daftar Isi atau Sitemap Responsive

Jadi, semua artikel anda di dalam blog akan muncul pada sitemap tersebut. Karena blogger atau blogspot tidak menyediakan menu sitemap jadi anda harus membuatnya secara manual dengan cara menyisipkan kode-kode html dan javascript pada bagian laman HTML yang anda buat. Lalu..

Apa Kegunaan dan Manfaat Sitemap?

Ya sama seperti buku nantinya, untuk mempermudah pembaca atau pengunjung blog ingin mencari artikel sesuai keinginan mereka. Kegunaan lain dari sitemap ini juga menjadi salah satu syarat jika blog akan didaftarkan ke Google Adsense. Belum lengkap rasanya jika sebuah blog tidak ada menu daftar isi.

  • Memudahkan pengunjung mencari artikel lewat menu daftar isi. Ini adalah manfaat utama dengan adanya sitemap.
  • Membantu memudahkan dan membuat nyaman pengunjung untuk membaca blog anda.
  • Dan akan terlihat lebih professional. Coba anda berkunjung ke blog-blog yang sudah terkenal seperti Mas Sugeng dan Arlina pasti ada menu sitemapnya.
  • Isi dari blog lebih cepat terindex oleh mesin pencari (search engine) yakni google dan bing. Menurut sebagian besar IM (internet marketing) tampilan blog akan lebih cepat terindex jika ada sitemap karena susunan isi dari blog otomatis terstruktur secara rapi.
  • Sitemap menjadi salah satu syarat untuk daftar dan cepat diterima google adsense. memang tidak ada keterangan secara khusus dari google bahwa daftar isi atau sitemap adalah syarat utama untuk diterima. Tapi ada keterangan dari google bahwa “navigasi situs sulit” atau ribet menunjukan pentingnya ada menu sitemap.
  • Daftar isi menjadi ciri khas atau penanda blog yang terurus. Sebagian besar blogger menjadikan halaman menu sitemap ada di blognya. Terkecuali website yang sudah besar seperti website berita news maupun instansi. Website lembaga biasanya tidak memiliki sitemap. Tetapi mereka memiliki halaman khusus atau navigasi yang dapat digunakan untuk mengeksplor isi website

Cara Menambahkan Daftar Isi atau Sitemap Responsive Pada Blog

Berikut ini tutorial bagaimana Cara Membuat dan Menambahkan Daftar Isi ‘Sitemap’ yang Responsive pada blogger, caranya sangat mudah mari ikuti langkah-langkah dibawah ini:

    1. Masuk atau Login ke blogger.com
    2. Pilih page atau laman > buatlah laman baru

    Cara Membuat Daftar Isi atau Sitemap Responsive

    3. Judul titlenya terserah anda bisa ‘sitemap atau daftar isi’ sesuai selera
    4. Setelah itu beralih ke mode HTML dari mode Compose dengan menambahkan kode yang ada di bawah ini

    Cara Membuat Daftar Isi atau Sitemap Responsive

    5. Lalu masukkan kode html pada halaman site yang sudah anda buat tadi.

    <div class=”jontor”>
    <script src=”https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js”></script>
    <script src=”/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=teknomia_Load”></script>
    </div>
    <style type=”text/css”>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
    .jontor a{color:black;}
    .jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
    .jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
    user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
    .jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
    .jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
    .jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
    .jontor ol li:after{position:absolute;content:”;border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
    ol{counter-reset:li;list-style:none;font:15px ‘Arial’;padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
    .teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
    .new{color:red!important;font-weight:700;font-style:italic;}
    user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
    </style>

    6. Dan yang terakhir anda klik Publish atau Publikasikan.

    Hasilnya akan seperti ini tampilannya.

    Akhir Kata

    Terima kasih teman-teman telah mengunjungi Sumekar31 dan telah membaca artikel Cara Membuat Daftar Isi ‘Sitemap’ Responsive Pada Blog ini. Silakan terus kunjungi situs ini untuk lebih banyak artikel dan informasi baru. Sampai nanti selamat tinggal. Semoga harimu indah dan menyenangkan. 😄

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here