Simple Responsive HTML Sitemap Blogger

Today i want to share an simple codes for creating 'Simple Responsive HTML Sitemap'.

CSS

#show-cat{float:left;margin:20px 5% 20px
    0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px
    solid #ccc}

#show-cat ul{margin:0;border-top:0px solid #ccc;padding:0}

#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid
    #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}

#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc;}

#show-cat ul li:last-child a{border-bottom:none;}

#show-cat ul li a,#navi-cat
    a{background:#fff;color:#4d90f0;text-decoration:none}

#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}

#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}

#show-post{float:left;width:69%;line-height:1.6em}

#show-post ul li{list-style-type:none;margin-left:-40px}

#navi-cat{padding:20px 0}

#navi-cat a{margin-right:10px;border:1px solid #ccc}

#navi-cat a,#navi-cat span{padding:5px 10px}

#navi-cat span{float:right}

@media screen and (max-width:768px){

#show-cat{width:35%;}

#show-post{width:59%;}

}

@media screen and (max-width:480px){

#show-cat{width:100%;margin:20px 0}

#show-post{width:100%;}

}

HTML

<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var
    cat_home='http://www.web-development.cf';cat_numb=12;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var
    tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var
    i=0;i<cat_numb&&i<a.feed.entry.length;i++){var
    entry=a.feed.entry[i];cat_title=entry.title.$t;for(var
    j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var
    cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a
    href="'+cat_url+'" rel="nofollow"
    title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div
    id="navi-cat">';if(cat_start>1){dw+='<a href=""
    onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return
    false"
    title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a
    href=""
    onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return
    false"
    title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+='
    &ndash; '+(cat_start+i-1)}dw+=' /
    '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style
    type="text/css">.cat-'+cat_class+'
    a{background:#bbb!important;color:#fff!important}<\/style>'}function
    show_post(a,b,c){var
    d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function
    show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var
    i=0;i<cat.length-1;i++){for(var
    j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var
    i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a
    href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return
    false"
    title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script
    type="text/javascript"
    src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');

</script>

</div>

<div style='clear:both'></div>

Change www.web-development.cf with your domain blog. (only blogger blog).

Combining the codes at page

<style>
#show-cat{float:left;margin:20px 5% 20px
    0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px
    solid #ccc}
#show-cat ul{margin:0;border-top:0px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid
    #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc;}
#show-cat ul li:last-child a{border-bottom:none;}
#show-cat ul li a,#navi-cat
    a{background:#fff;color:#4d90f0;text-decoration:none}

#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}

#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}

#show-post{float:left;width:69%;line-height:1.6em}

#show-post ul li{list-style-type:none;margin-left:-40px}

#navi-cat{padding:20px 0}

#navi-cat a{margin-right:10px;border:1px solid #ccc}

#navi-cat a,#navi-cat span{padding:5px 10px}

#navi-cat span{float:right}

@media screen and (max-width:768px){

#show-cat{width:35%;}

#show-post{width:59%;}

}

@media screen and (max-width:480px){

#show-cat{width:100%;margin:20px 0}

#show-post{width:100%;}

}

</style>

<div id='show-cat'></div>

<div id='show-post'>

<script type='text/javaScript'>

var
    cat_home='http://www.web-development.cf';cat_numb=12;cat_pre='Prev';cat_nex='Next';

var cat_name;var cat_start;var cat_class;

function show_post2(a){var
    tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var
    i=0;i<cat_numb&&i<a.feed.entry.length;i++){var
    entry=a.feed.entry[i];cat_title=entry.title.$t;for(var
    j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var
    cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a
    href="'+cat_url+'" rel="nofollow"
    title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div
    id="navi-cat">';if(cat_start>1){dw+='<a href=""
    onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return
    false"
    title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a
    href=""
    onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return
    false"
    title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+='
    &ndash; '+(cat_start+i-1)}dw+=' /
    '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style
    type="text/css">.cat-'+cat_class+'
    a{background:#bbb!important;color:#fff!important}<\/style>'}function
    show_post(a,b,c){var
    d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function
    show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var
    i=0;i<cat.length-1;i++){for(var
    j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var
    i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a
    href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return
    false"
    title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script
    type="text/javascript"
    src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');

</script>

</div>

<div style='clear:both'></div>

Change www.web-development.cf with your blogger domain/subdomain.

DEMO:

I hope this article may be helpful. 

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post