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. 

Subscribe to receive free email updates:

0 Response to "Simple Responsive HTML Sitemap Blogger"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.