• Translate

8/04/2016

Tutorial How To Create A Sitemap Accordion On Blog

Tutorial Blogspot |

Advertisement

Tutorial How To Create A Sitemap Accordion On Blog | Creating a sitemap accordion in the blog is considered more attractive than usual. Sitemap accordion usually a case of the same function, but is more simple because it uses a toggle effect. Accordion sitemap is also lighter weight and do not create a blog. For those who want to create a sitemap accordion on a blog, consider the following steps.
Tutorial How To Create A Sitemap Accordion On Blog

1. Sitemap CSS Accordion
  • Login to your account blogger.
  • Then click the menu template.
  • Click edit html.
  • Paste the following css above ]]></b:skin> or </style>.
.sitemap{background-color:#fff;color:#444;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;border:1px solid #f3f3f3;}
.sitemap .header{color:#666;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #f3f3f3;transition:initial;}
.sitemap .header:hover{background-color:#f9f9f9;}
.sitemap .header.active{background-color:#f9f9f9;}
.sitemap .header:before{content:'';width:0;height:0;float:right;top:22px;right:15px;border:5px solid transparent;border-color:#666 transparent transparent;transition:all .3s ease}
.sitemap .header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.sitemap .loading{display:block;padding:25px;text-align:center;background:#ffffff url('https://2.bp.blogspot.com/-vxUzQ8wWcMA/VydqG4UBh_I/AAAAAAAAFBc/4hyWJOFePnwUL5ZabEA91t2Jj7UCDWbsQCLcB/s50/loading.gif') no-repeat center;}
.sitemap ol{margin:0;padding:0;list-style:none;transition:initial;display: block!important;padding: 0!important;}
.sitemap li{margin:0!important;padding:8px 8px 8px 15px!important;text-align:left;overflow:hidden;transition:initial;border-bottom:1px solid #f3f3f3;}
.sitemap li:first-child(border-top:0}
.sitemap li:last-child(border-bottom:0}
.sitemap .new{font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#fc7569;padding:1px 6px 2px 6px;line-height:normal;float:right;border-radius:3px;text-transform:uppercase;}

2. Script Sitemap Accordion
  • Login to blogger.
  • Then click on the page.
  • Select and click on the new page.
  • Paste the following HTML in the HTML tab. (Next to compose tab).
<script>
var sitemap_config = {
    url: 'http://www.alltutorials.info/',
    containerId: 'sitemap',
    showNew: 5,
    newText: '<div style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#10B3E4;;padding:1px 6px 2px 6px;line-height:normal;float:right;border-radius:3px;text-transform:uppercase;">
baru</div>
',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 0,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: 'tapike',
    delayLoading: 0
};
!function(e,o){var t=o.getElementById(sitemap_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[sitemap_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(sitemap_config.showNew||sitemap_config.showNew>0)&&r<sitemap_config.showNew+1&&(i[r].title.$t+=" %new%");i=sitemap_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,sitemap_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<h3 class="header">
'+n[g]+"</h3>
",l+='<div class="content">
<ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='
<li><a href="'+c+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+sitemap_config.newText:"")+"</li>
")}l+="</ol>
</div>
"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+sitemap_config.containerId+" .content").hide(),$("#"+sitemap_config.containerId+" .header").click(function(){$(this).hasClass("active")||(sitemap_config.clickCallback(this),$("#"+sitemap_config.containerId+".header").removeClass("active").next().slideUp(sitemap_config.slideSpeed.up,sitemap_config.slideEasing.up,sitemap_config.slideCallback.up),$(this).addClass("active").next().slideDown(sitemap_config.slideSpeed.down,sitemap_config.slideEasing.down,sitemap_config.slideCallback.down))}).eq(sitemap_config.activePanel-1).addClass("active").next().slideDown(sitemap_config.slideSpeed.down,sitemap_config.slideEasing.down,sitemap_config.slideCallback.down))};var i=o.createElement("script");i.src=sitemap_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+sitemap_config.maxResults+"&callback="+sitemap_config.jsonCallback,"onload"==sitemap_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},sitemap_config.delayLoading)}(window,document);
</script>

3. HTML Sitemap Accordion
  • Paste the following HTML under the above script.
<div class="sitemap" id="sitemap"><div class="loading"/></div>
Settings
  • url : Replace with your blog domain.
  • containerId : is the widget ID sitemap accordion.
  • showNew : The maximum number of articles.
  • newtext : text notifications for the latest articles.
If the sitemap does not appear or an error occurs, do compress the accordion sitemap script (No. 2) above using js compressor. Error usually occurs because of the white space in the script and is not a big problem. Thus Tutorial How To Create A Sitemap Accordion On Blog that I can share with you, thank you.

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.