Cara Membuat Sitemap atau Daftar Isi Blog Keren


Sitemap atau Daftar Isi blog merupakan salah satu keharusan untuk membuat situs blog anda mudah dinavigasi oleh para pengunjung blog anda. Kegunaannya juga untuk melengkapi dari fitur navigasi dan pengalaman pemilik blog itu sendiri.
Sitemap atau Daftar Isi Blog
Sitemap atau Daftar Isi Blog

Banyak kegunaan dari fitur Sitemap ini untuk blog anda. Salah satu syarat untuk mendaftarkan blog anda kepihak Google Adsense juga blog anda harus mempunyai fitur navigasi Sitemap atau Daftar isi.

Baca juga : Syarat dan Tips Ampuh Untuk Menjadi Publiser Adsense Google pada Blog

Kelebihan sitemap ini adalah mempunyai tampilan yang lebih simpel dan lebih mudah dinavigasi oleh pengunjung tanpa harus susah payah srol kebawah panjang-panjang jika jumlah artikel anda sudah banyak, ditambah tampilannya seperti menu navigasi yang berada pada bagian kiri kebawah.

Selain mempunyai tampilan yang menarik, juga sitemap ini sudah mendukung mobile friendly. Artinya sitemap ini akan bekerja dengan baik jika pengunjung menggunakan perangkat smartphone. Untuk membuatnya, anda tinggal ikuti cara-caranya di bawah ini.

Pertama-tama anda klik menu Laman, dan klik Laman Baru untuk membuat postingannya.
Cara Buat Sitemap Daftar Isi Blog
Cara Buat Sitemap Daftar Isi Blog

Kedua, buatlah sebuah judul dan deskripsi laman postingan sitemap yang menjelaskan bahwa laman tersebut menampilkan seluruh artikel atau laman blog anda.
Cara Buat Sitemap Daftar Isi Blog
Cara Buat Sitemap Daftar Isi Blog

Selanjutnya pindahkan penulisan Compose ke bagian penulisan HTML, dan tempelkan kode javascript di bawah ini kedalamnya.

<div>
<style>
.post-body ul li:before{display:none}#sitemaps-blog{margin:0 auto;background-color:#f6f6f6;position:relative;color:#333}#sitemaps-blog .loading{display:block;padding:5px 10px;font:normal bold 13px/normal Helmet,Freesans,Sans-Serif;color:#c00}#sitemaps-blog li,#sitemaps-blog ol,#sitemaps-blog ul{margin:0;padding:0;list-style:none}#sitemaps-blog .tabs-name-labels{width:25%;float:left;}#sitemaps-blog .tabs-name-labels li a{display:block;overflow:hidden;text-overflow:ellipsis;color:#000;text-decoration:none;padding:10px;cursor:pointer}#sitemaps-blog .tabs-name-labels li a:hover{background-color:#E34747;color:#fff}#sitemaps-blog .tabs-name-labels li a.tab-active{background-color:#464646;color:#fff;position:relative;z-index:3;margin:0px}#sitemaps-blog .layer-border,#sitemaps-blog .url-article{width:75%;float:right;border-left:3px solid #464646;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sitemaps-blog .layer-border{float:none;display:block;position:absolute;top:0;right:1px;bottom:0}#sitemaps-blog .panel{position:relative;z-index:5}#sitemaps-blog .panel li a{display:block;position:relative;color:#000;line-height:15px;padding:10px;text-decoration:none;outline:0;overflow:visible}#sitemaps-blog .panel li time{display:block;font-style:italic;font-weight:400;font-size:10px;color:#666;float:right}#sitemaps-blog .panel li .summary{display:block;padding:10px 12px;font-style:italic;border-bottom:2px solid #888;overflow:hidden}#sitemaps-blog .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}#sitemaps-blog .panel li:nth-child(even){background-color:#ddd}#sitemaps-blog .panel li a:focus,#sitemaps-blog .panel li a:hover,#sitemaps-blog .panel li a:hover time{text-decoration:none;outline:0;background-color:#E34747}@media (max-width:700px){#sitemaps-blog .url-article,#sitemaps-blog .tabs-name-labels{overflow:hidden;width:auto;float:none;display:block}#sitemaps-blog .tabs-name-labels li{display:inline;float:left}#sitemaps-blog .tabs-name-labels li a,#sitemaps-blog .tabs-name-labels li a.tab-active{border:1px solid #eee}#sitemaps-blog .tabs-name-labels li a.tab-active{background-color:#343434;color:#fff}#sitemaps-blog .url-article{border:none}#sitemaps-blog .layer-border,#sitemaps-blog .panel li time{display:none}}
</style>
</div>
<div class="sitemaps-blog" id="sitemaps-blog"><span class="loading">Memuat daftar isi......</span></div>
<script>
var tabbedTOC = {
    blogUrl: "//aknewsite.blogspot.com/",
    containerId: "sitemaps-blog",
    activeTab: 1,
    showDates: false,
    newTabLink: true,
    maxResults: 99999,
    preload: 0,
    sortAlphabetically: true,
    showNew: 5, //
    newText: ' &ndash; <em style="color:red;">New!</em>'
};
</script>
<script src="//yourjavascript.com/7174513211/simplesitemaps.js"></script>
 Keterangan : Tulisan yang diwarnai dengan warna merah silahkan ganti dengan nama blog anda sendiri.
Kemudian langkah terakhir anda tinggal tekan Publikasikan. Untuk masalah warna background dan ukuran-ukurannya terserah anda mau bagaimana mengubahnya.

Bila anda belum tau caranya mengubah gaya CSS-nya, anda tinggal belajar melakukan percobaan dengan cara Inset Elemen pada laman sitemap blog anda yang sudah jadi tadi.
Edit Element Google Chrome
Edit Element Google Chrome


2 comments:

  1. Keren tuh, saya pernah pake juga tapi waktu itu kode script gak jalan, jadi saya ganti lagi. Hehe..

    ReplyDelete
    Replies
    1. iya gan, terimakasih atas kunjungannya. Saya akan kunjung balik blog anda.

      Delete

Sebelum menuliskan komentar, Anda harus baca syarat dibawah ini :
1. Tidak diperbolehkan menaruh link aktif,
2. Tidak boleh ada unsur huru hara dan pornograpi,
3. Jika membuat spam, komentar Anda akan dihapus, dan
4. Silahkan bertanya dan berbagi pikiran dengan kalimat yang baik dan membangun.

AK NEW SITE. Powered by Blogger.