Sebetulnya tutorial cara menambahkan widget sitemap atau daftar isi postingan blog yang akan bismillah gratis™ bagikan ini sudah pernah bismillah gratis™ buat. Namun mungkin blog tersebut jarang dikunjungi jadi akan bismillah gratis™ bagikan kembali disini.

Adapun keuntungan menambahkan widget sitemap ini adalah agar blog tampil lebih profesional dari sebelumnya. Selain itu, pengunjung juga bisa melihat dan mencari semua artikel blog kita dengan mudah. Tentunya itu akan menambah nilai plus untuk blog jika pengunjung membuka artikel tertentu pada widget sitemap ini.

Ok langsung saja, cara penerapannya pun sangat mudah. Silakan ikuti beberapa langkah di bawah ini :

1. Buka Blogger > Laman > Buat Laman baru > Terapkan kode di bawah ini pada tab HTML

<div id="bp_toc"></div><script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> <style scoped="" type="text/css">#comments {display:none;}</style>

2. Kemudian publikasikan laman.
3. Selanjutnya, klik Template > Buka Edit Template > Terapkan kode di bawah ini tepat sebelum </style>

/* CSS Full Sitemap */#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}.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: 0.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;padding:5px;padding-left:5px;font-size:89%}.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}.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:0.5em;}td.toc-entry-col2 {background:#fafafa;}

Tentukan penggunaan font dan warna sesuai blog sobat.

4. Terakhir, simpan template.

Contohnya seperti Gambar Dibawah ini.

Jika di blog sobat bismillah gratis™ sudah terdapat ratusan artikel, ada baiknya membatasi tinggi halaman dengan menambahkan style pada kode pertama. Misal seperti ini :

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;"></div><script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> <style scoped="" type="text/css">#comments {display:none;}</style>

Silakan tentukan nilai max-height di atas sesuai keinginan.

Demikianlah Mengenai Cara Menambahkan Widget Sitemap di Blog Semoga Bermanfaat.

Beberapa Widgets Menu Bar Terbaru Keren Dan Unik Untuk Blog kesayangan Sobat Bismillah Gratis™ Yang Sedang Belajar Blogging atau mengedit Blog kesayangannya.. Cara pemasangannya sangatlah gampang, Sobat Bismillah Gratis™ tinggal masuk ke...

1. layout ( Tata Letak ). 
2. Click on add a gadget ( Tambahkan Gadget ). 
3. Pilih html / javascript. 
4. Copy kode menubarnya di bawah ini. 
5. Dan paste kode ke dalam html / javascript / gadget. 
6. Simpan

Ada Beberapa Widgets Menu Bar Terbaru Keren Dan Unik Untuk Blog, Silahkan Pilih menu Bar yang Sobat Bismillah Gratis™ suka.

Assalamau'alaikum Wr.Wb, Salam Sejahtera untuk Seluruh Sobat Bismillah Gratis™ dimanapun Berada, Beberapa hari lalu ada teman yang datang kerumah minta tolong untuk di ajari cara blogging dan membuat blog plus editing Template Blog.
Nah Kali ini saya sengaja iseng nulis artikel tentang cara editting Template Blog ( mumpung belum lupa ) heheheh.. Dan pada postingan kali ini saya akan mencoba berbagi kode CSS Daftar Isi Responsive Blog Otomatis Dan Keren.
Cara Membuat Daftar Isi Responsive Blog ini sepertinya sangat berguna, karena sudah banyak sekali para pengguna platform blog yang menggunakan template yang sudah versi responsive pada smartphone android dan tablet, Dan CSS ini sangat cocok untuk dipasang pada blog sobat Bismillah Gratis™ yang menggunakan template canggih sekarang ini dengan menggunakan script daftar isi yang akan Bismillah Gratis™ share untuk kalian ..