cara menambahkan widget sitmap responsive untuk Blogs

sebagian besar para penguna blog or blogspot ingin membuat sitemap seperti wordpress , sayangnya widget dari content / sitemap yang telah di rancang oleh blogger tidak dapat bersaing dengan sitemap wordpress namun itu bukan masalah karana dalam pembahasan kali ini saya kan menjelaskan sedikit mengenai bagaimana menambahkan stylish tiga kolom sitemap blog dengan desain yang responsive dan lebih menarik di bandingkan dengan widget sitmap sebelum kita mulai membuatnya anda dapat melihat live demo  nya untuk memberikan pemaham'an yang lebih baik kepada anda .

LIVE DEMO

ikuti langkah-langkah di bawah ini 

1. silakan login ke Dasboard blog anda .
2 .kemudian pergi ke bagain tata letak > tambah gadget > html/javascript.
3. copy dan pastekan kode berikut di dalamnya .

<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type='text/javascript'></script>
<script src="http://www.blogtipsntricks.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; }
@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>

4.perhatikan ganti link ww.blogtipsandtrick.com dengan alamat url blog anda.
5.save dan enjoy.

 saya harap anda mengerti dengan tutorial pembahasan mengenai widget sitmap responsive untuk Blogs kali ini dan jangan lupa untuk berbagi ilmu yang sudah kita dapat agar ilmu itu bisa lebih bermanfa'at lagi dan terimakasih telah mengunjungi blog ini

(: happy blogging