Cara Membuat Halaman Sitemap Sederhana dan Ringan (Fast Loading)

Membuat halaman sitemap sederhana dan ringan saat loading adalah hal yang penting, jika artikel di blog sobat sudah sangat banyak, jika terlalu banyak perlak perlik dan memberatkan loading, akan sangat mengganggu pengunjung jika mereka menunggu lama atau bahkan tidak muncul sama sekali, karena rata-rata halaman sitemap dibuat menggunakan JavaScript untuk memanggil atau menampilkan semua artikel blog.

Fungsi halaman Sitemap sendiri memang untuk memudahkan pengunjung menemukan semua artikel yang ada di blog, khusus nya bagi sobat yang berniat mendaftarkan blog ke Google Adsense, akan sangat berguna halaman Sitemap ini, karena Adsense menyukai situs yang mudah navigasinya atau semua artikel blog yang mudah di temukan.

Tampilan Sitemap ini saya buat sangat sederhana, dengan warna latar WhiteSmoke dan agak Hitam pada latar Judul tabel nya, nanti akan saya jelaskan semua untuk mengatur warna dan lain-lain untuk memudahkan sobat mendesain ulang tampilan agar sesuai dengan template blog atau selera masing-masing.

Pertama, silahkan Copy dan paste HTML dan JavaScript dibawah ini ke dalam Laman Baru pada mode HTML, beri judul sesuai selera, misalnya Daftar Isi atau Sitemap lalu Publikasikan.

HTML

1. <div dir="ltr" class="sitemap-doni" trbidi="on">  
2.         <script>  
3.         var theTotalPosts  = 500, // Tentukan jumlah maksimal posting  
4.             theOptions     = "Urutkan",                // Menu 1  
5.             theSortPosts   = "Urutkan berdasarkan Abjad", // Menu 2  
6.             theSortLabels  = "Urutkan berdasarkan Label", // Menu 3  
7.             theTitles      = "Judul Artikel",  // Judul tabel 1  
8.             theLabels      = "Kategori",  // Judul tabel 2  
9.             theDates       = "Diterbitkan",   // Judul tabel 3  
10.             theBlankLabels = "Uncategories",   // Label kosong  
11.             theSiteUrl     = "http://dblagu.blogspot.com"; //  
12.         </script>  
13.         <script src="https://sites.google.com/site/info4youmyid/js-doni/Info4You-Sitemap.js"></script></div>  

Selanjutnya, copy semua kode CSS dibawah ini, dan masuk ke Template -> Edit HTML. Cari </head> dan paste tepat diatasnya.

CSS

1. <style>  
2. .sitemap-doni {text-align: left; width: 100%;}  
3. #tocTable {  
4.     border:2px solid #ccc;  
5.     font:normal normal 12px/normal Verdana,Tahoma,Arial,Sans-Serif;  
6.     color:#333;  
7.     border-collapse:collapse;  
8.     text-align:left;  
9.     margin:0 0 5px;  
10.     }  
11. #tocTable th,  
12. #tocTable td {  
13.     border:1px solid #ccc;  
14.     background-color:#fafafa;  
15.     padding:10px 15px;  
16. }  
17. #tocTable th {  
18.     background-color:#393939;  
19.     font-weight:bold;  
20.     color:white;  
21.     text-shadow:0 1px 0 rgba(0,0,0,.3);  
22.     }  
23. #th-1 {  
24.     width:60%;  
25.     background-color:#ddd;  
26.     }  
27. #th-2 {  
28.     width:20%  
29.     }  
30. #th-3 {  
31.     display: none;  
32. <!--Ganti display:none; dengan width:20% Jika ingin menampilkan Tanggal Rilis Artikel-->  
33.     }  
34. #tocTable td.toc-header-col-1,  
35. #tocTable td.toc-header-col-2 {  
36. padding:0 !important;  
37. background-color:whitesmoke;  
38.     }  
39. #tocTable td.toc-header-col-3 {  
40.     background-color:#ddd;display:none;  
41. <!--Hapus display:none; Jika ingin menampilkan Tanggal Rilis Artikel-->  
42.     }  
43. #tocTable a {  
44.     display:block;  
45.     text-decoration:none;  
46.     color:#000;  
47.     padding:10px 15px;  
48.     background:none;  
49.     }  
50. #tocTable td.toc-header-col-1:hover,  
51. #tocTable td.toc-header-col-2:hover {  
52.     background-color:#ddd;  
53.     }    
54. #tocSort {  
55.     display:block;  
56.     width:220px;  
57.     font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;  
58.     color:#333;  
59.     cursor:pointer;  
60.     border:none;  
61.     outline:none;  
62.     background-color:#eee;  
63.     margin:0 0 2px 0;  
64.     padding:5px;  
65.     }  
66. </style>  

Keterangan: #tocTable th adalah ID untuk judul pada tabel, silahkan ganti background-color dengan warna sesuai selera atau sesuai template blog masing-masing, misalnya sobat ingin warna latar belakang judul tabel tersebut menjadi merah, maka ganti properti #393939 menjadi red, untuk mengganti warna teks judul nya silahkan ganti properti pada color.

Untuk #th-3 dan #tocTable td.toc-header-col-3, silahkan ikuti petunjuk yang sudah di berikan , ID ini adalah untuk tabel tanggal terbitan postingan tersebut. Saya sembunyikan karena waktu yang ditampilkan sedikit sesat misal artikel yang saya postingan tanggal 10 disana tertulis tanggal 11, saya tidak tau mengapa, kalau sobat ingin mencoba menampilkan nya, silahkan, mungkin hanya di blog saya saja yang sesat.

#tocTable td.toc-header-col-1 dan #tocTable td.toc-header-col-2 adalah kolom dari judul-judul artikel, silahkan ganti background-color sesuai selera, sedangkan #tocTable td.toc-header-col-1:hover dan #tocTable td.toc-header-col-2:hover adalah saat cursor mouse mengarah ke kolom judul-judul artikel tersebut, silahkan ganti background-color sesuai selera, atau bisa ditambah properti CSS lain jika memang ingin lebih dikembangkan tampilanya.

#tocTable a adalah CSS untuk teks yang memiliki link (teks judul-judul artikel dan teks kategori atau label) silahkan sobat ganti color sesuai selera, untuk background adalah none tidak perlu diganti karena background dari kolom tersebut sudah kita atur pada #tocTable td.toc-header-col-1 dan 2 tadi.

Terakhir #tocSort adalah menu pilihan untuk mengganti urutan sitemap tersebut, terlihat seperti gambar dibawah ini,

width adalah ukuran lebarnya, untuk properti yang lain sama dengan yang telah kita bahas sebelumnya. Jika sobat ingin menyembunyikan menu shorting ini, silahkan ganti display:block; menjadi display:none;

Masih bingung dengan properti-properti CSS? silahkan kunjungi situs saya tentang.

• Mengenal Properti CSS Margin,Padding,Color,Background,Border Dan Penerapanya
• Cara Membuat Efek Shadow Dan Transitions Pada Teks Atau Box
• Lebih Banyak Lagi Silahkan Ke Kategori Desain Blog

 Sampai disini saja artikel kita kali ini, semoga dapat bermanfaat. Sampai jumpa.

Info4You Info4You Update Pada: February 12, 2017