How To Add Cool Responsive Sitemap Widget For Blogger Blogs

Kebanyakan blogger yang mempunyai blog di blogspot inginkan sitemap yang unik seperti WordPress, tapi jadual kandungan / sitemap widget yang direka untuk blogger tidak dapat bersaing dengan sitemap WordPress. Jadi, hari ini kita akan melihat bagaimana untuk menambah stylish 3 column blogger sitemap yang responsif. Widget ini mudah saja dipasang pada blog seperti juga yang saya gunakan pada blog ini.

OK, klik untuk lihat demo widget dibawah untuk lebih difahami.

Live Demo

Cara memasang widget sitemap pada blog

Pada Dashboard blogger → Pilih blog anda
Pergi ke halaman → New Page, kemudian klik bahagian → HTML
Pastekan kod berikut di dalamnya.

<script src="http://yourjavascript.com/111319169213/aidydiddy-site-map.js" type="text/javascript"></script><script src="http://aidydiddy.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; 
} 
@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>

Selepas Menambah kod di atas, gantikan http://aidydiddy.blogspot.com dengan link anda sendiri.
Kemudian Klik pada Option pada bar sisi kanan dan pilih Don't allow, hide existing untuk Reader comments.

Sekarang, Klik publish dan Lihat page sitemap anda yang cool.
Itu sahaja, selesai..

Saya harap anda sukakan widget ini dan sila share tanggapan anda mengenai widget ini dan jangan lupa untuk berkongsi ...

Happy Blogging :)

Reference URL: http://www.blogtipsntricks.com/