Friday, June 5, 2015

How To Add Cool Sitemap Widget To Your Blog

 Cool Sitemap Widget To Your Blog
How To Add Cool Sitemap Widget To Your Blog. DEMO

Most of the bloggers who has a blog on blogspot want to make a cool sitemap like WordPress, unfortunately the table of content/Sitemap widgets designed for blogger can't compete with WordPress sitemap. 

Few days ago we published a sitemap widget(by Ankit) but that's also not look much attractive and it can be only added for specific label. So, Today we're going to see how to add an stylish three column blogger sitemap with responsive design. This widget is easy to add and it has a cool look when compared to other sitemap widgets.
  1. In the blogger Dashboard, Select your blog
  2. Go to Pages >> New Page, then choose HTML Part
  3. Paste the following code inside it.
<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script>
<script src="http://genesisseo.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>

Change http://genesisseo.blogspot.com/ with your own URL Blog!

Klik PUBLISH!

Thanks for reading How To Add Cool Sitemap Widget To Your Blog

Previous
« Prev Post

3 komentar so far. What are your thoughts?

  1. Om kli mau seting biar related post nya lebih dari 5 gimana. Rencana mau ngasi 10 om. Kalau nanti aku udh transfer. Biar lebih banyak pilihan aja.alias mancing pembaca menelusuri artikel lainya om.

    ReplyDelete
    Replies
    1. Sebenarnya Related Post di atas diset angka 8, kalo mau 10 tinggal diubah angkanya jadi 10 di kode related post (max result = 10 )

      Delete