Add Sitemap With Selected Label in Blogger- In this tutorial I will share a cool sitemap, simple and certainly responsive. Model sitemap is not directly display blog posts, posts will appear when there is a command-click on the label. Postings are displayed can also be buddy buddy change as much as the amount specified.
A sitemap is also useful for my friend who had long post can be read again by visitors. Moreover sitemap this one is easier for visitors to choose a category of articles that they want.
2. In the toolbar on the left side there are two selection modes namely Compose and HTML, select the HTML
3. Enter the script below in the column of the page.
This sitemap simple and responsive plus cool scroll bar on the list label or category.Sitemaps are particularly in need and must exist on your blog because it allows visitors to find articles they want. Automatic visitors will feel comfortable and will be back to visit your blog.
How to Add Sitemap With Labels in Blogger
INSTALLING RESPONSIVE SITEMAP WITH SELECTED LABEL IN BLOGGER
1. Go to Blogger> Home> New Page or Edit existing sitemap page.
<style type='text/css' scoped='scoped'>
#sidebar-wrapper{display:none!important}#main-wrapper{width:100%!important}#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:0 solid #ccc;padding:0}#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0 solid #ccc;border-left:0 solid #ccc;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc}#navi-cat a:hover{color:#fff!important}#show-cat ul li:last-child a{border-bottom:none}#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;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:#666;color:#fff}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;margin:10px 0 0 -40px;padding:10px;border:1px solid #ddd}#show-post a:hover{color:#07ACEC}#show-post a{color:#333;font-weight:bold}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #ccc}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgbaundefined0,0,0,.1);border-radius:2px}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgbaundefined0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgbaundefined0,0,0,.4);transition:all 400ms ease-in-out}@media screen and undefinedmax-width:768px){#show-cat{width:35%}#show-post{width:59%}}@media screen and undefinedmax-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.shouterways.com/';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2undefineda){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';forundefinedvar i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;forundefinedvar j=0;j<entry.link.length;j++){ifundefinedentry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=undefinedcat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';ifundefinedcat_start>1){dw+='<a href="" onclick="show_postundefined\''+cat_name+'\',\''+undefinedcat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}ifundefinedundefinedcat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_postundefined\''+cat_name+'\',\''+undefinedcat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;ifundefinedcat_start!=tt){dw+=' – '+undefinedcat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementByIdundefined'show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_postundefineda,b,c){var d=document.getElementsByTagNameundefined'head')[0];e=document.createElementundefined'script');e.type='text/javascript';e.setAttributeundefined'src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChildundefinede);cat_name=a;cat_start=parseIntundefinedb),cat_class=c}function show_catundefineda){var cat=a.feed.category;dw='';dw+='<ul>';forundefinedvar i=0;i<cat.length-1;i++){forundefinedvar j=i+1;j<cat.length;j++){ifundefinedcat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}forundefinedvar i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_postundefined\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementByIdundefined'show-cat').innerHTML=dw}document.writeundefined'<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.shouterways.com with a link to your blog. Change 11 to the number of posts to be desired.
4. Then Save. And See the result.