Responsif Sitemap Blogger Keren

Sebelum berangkat untuk mengerjakan solat saya ingin berbagi sitemap responsif blogger, sitemap ini menampilkan gaya basic dari sitemap wordpress dan terlihat keren yang dibuat oleh Chandeep. 

LIVE DEMO

satu-delapan

Artikel Terkait :

• Cara Membuat Sitemap HTML di Halaman Blogger
satu-delapan
• Membuat Halaman Statis Blogger Dan Lebih Dari 20 Halaman　

Cara Menambahkan Sitemap di Blogger :

• Masuk ke Dashboard blog Anda - klik Laman
satu-delapan
• klik Laman baru - dan pilih Laman kosong
• Ubah ke mode html dan salin kode di bawah ini :

<script 
src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" 
type='text/javascript'></script>

<script 
src="http://satu-delapan.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<style type="text/css">

.post-archive { width: 100%; padding: 20px 0; 
text-transform: capitalize; }

.post-archive h4 { border-bottom: 2px solid #EEEEEE; 
color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }

.ct-columns-3 { -moz-column-count: 3; 
-moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; 
-webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; 
column-gap: 10px; column-rule: none;}

.ct-columns-3 p { padding: 5px 0px; 
-moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; 
-o-column-break-inside: avoid; -ms-column-break-inside: avoid; 
column-break-inside: avoid; display: inline-block; width: 100%; }

.ct-columns-3 p a { background: #fafafa; color: 
#333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: 
normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all 
.25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s 
ease-in-out; transition:all .25s ease-in-out; }

.ct-columns-3 p a:hover { background: #555; color: 
#fff; }

satu-delapan

@media screen and (max-width: 768px){ .ct-columns-3 
{ -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; 
-webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; 
column-count: 1; column-gap: 0px; column-rule: none; } }

</style>

• ganti http://satu-delapan.blogspot.com/ dengan url blog Anda
• kemudian, klik pilihan di bawah "Setelan Laman" dan "komentar pembaca" jadikan "jangan bolehkan, sembunyikan yang ada mode tulis" - hal ini dilakukan untuk menyembunyikan komentar di halaman statis - klik selesai
• Langkah terakhir beri nama pada judul dan publish untuk melihat hasilnya.

Semoga artikel yang singkat ini bermafaat buat Anda. salam satu-delapan!