HTML SITEMAP IN BLOGGER WITH SEARCH AND FILTERS

<br />
<br /><br />
<aside id="bott">
<div>
<span class="bott">Laxman Nepal Toolkit</span>
</div>
</aside>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
//<![CDATA[
function getMeImg(a) {
    var t = [a, a, !1];
    return void 0 !== a ? -1 !== a.url.indexOf("img.youtube") ? (t[0] = a.url.replace("default.jpg", "hqdefault.jpg"), t[1] = a.url.replace("default.jpg", "mqdefault.jpg"), t[2] = !0) : (t[0] = a.url.replace("s72-c", "w100-h75-c"), t[1] = a.url.replace("s72-c", "s500-c")) : (t[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFXP7-lDXV_k_fz2kuCPsCEpBybqKUcSFaEv88zPszJvFmXk9bLiUQ9SLY9WP44bq4Aoj7FaFz14KugRxmRc-5PkU637S2pOW6f2wLXJ65gz2ILBV3jri0C3lu5BWKuCxyJ4NoRwoLFQg/s1600/thumb.png", t[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFXP7-lDXV_k_fz2kuCPsCEpBybqKUcSFaEv88zPszJvFmXk9bLiUQ9SLY9WP44bq4Aoj7FaFz14KugRxmRc-5PkU637S2pOW6f2wLXJ65gz2ILBV3jri0C3lu5BWKuCxyJ4NoRwoLFQg/s1600/thumb.png"), t
}
 
function load_w_tab(a) {
    var t = a.find(".rctab-content>.active"),
        e = t.attr("data-load");
    $.ajax({
        type: "GET",
        url: "/feeds/posts/summary/-/" + e + "?max-results=20&alt=json-in-script",
        async: !1,
        contentType: "application/json",
        dataType: "jsonp",
        success: function(a) {
            if (a.feed.entry) {
                t.append('<div class="wtab-inner"></div>');
                for (var e = 0; e < a.feed.entry.length; e++) {
                    for (var i = a.feed.entry[e], d = 0; d < a.feed.entry[e].link.length; d++)
                        if ("alternate" == a.feed.entry[e].link[d].rel) {
                            var s = a.feed.entry[e].link[d].href;
                            break
                        }
                    var n = i.title.$t,
                        l = getMeImg(i.media$thumbnail),
                        r = '<div class="rctab-item"><div class="rctab-item-inner"><a href="' + s + '"><img src="' + l[0] + '"/></a><h3><a href="' + s + '">' + n + '</a></h3><div style="clear:both"></div></div></div>';
                    t.find(".wtab-inner").append(r)
                }
                t.addClass("hide-load")
            }
        }
    })
}
 
function getwtabs(e) {
    for (var labelArr = eval(e.attr("data-label")), html = '<div class="rctab-button">', i = 0; i < labelArr.length; i++) html += '<span data-target="' + labelArr[i] + '-genova">' + labelArr[i] + "</span>";
    html += '</div><div class="rctab-content">';
    for (var i = 0; i < labelArr.length; i++) html += '<div data-load="' + labelArr[i] + '" data-container="' + labelArr[i] + '-genova">' + loaderHTML + "</div>";
    html += "</div>", e.append(html), e.find(".rctab-button>span").first().addClass("active"), e.find(".rctab-content>div").hide(0), e.find(".rctab-content>div").first().show(0).addClass("active loaded"), setTimeout(function() {
        load_w_tab(e)
    }, 500), e.find(".rctab-button>span").click(function() {
        var a = $(this).attr("data-target"),
            t = $(this),
            i = "";
        e.find(".rctab-content>div").each(function() {
            $(this).attr("data-container") == a && (e.find(".rctab-button>span").removeClass("active"), t.addClass("active"), e.find(".rctab-content>div").removeClass("active").hide(0), $(this).fadeIn().addClass("active"), i = $(this))
        }), i.hasClass("loaded") || (i.addClass("loaded"), setTimeout(function() {
            load_w_tab(e)
        }, 500))
    })
}
var loaderHTML = '<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';
$(function() {
    getwtabs($(".recent-labpost"))
});
//]]>
</script>






















<div dir="ltr" style="text-align: left;" trbidi="on">

<div id="table-outer">

<table><tbody>

<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected value="published" />New post<option value="updated" />Post updated</select></td></tr>

<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected />Loading...</select></span></td></tr>

<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">

<input type="text" /></form>

</td></tr>

</tbody></table>

</div>

<br />

<header id="resultDesc"></header><br /><br />

<ul id="feedContainer"></ul>

<div id="feedNav">

Loading...</div>


<style>
#table-outer table {width:100%;margin:0;padding:0;}
#table-outer input, #table-outer select {padding:4px;font:inherit;background:#fff;width:170px;box-sizing:border-box;border:none;color:#444;border:1px solid #eaeaea;transition:all 0.6s;}
#table-outer select {cursor:pointer;outline:none}
#table-outer input:focus{outline:none;background:#fff;border-color:#dadada;}
#resultDesc {margin-bottom:10px;}
#feedContainer {overflow:hidden;margin-top:20px;}
#feedContainer strong {font-size:10px;}
#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}
#feedContainer li {float:left;width:50%;margin-bottom:5px;position:relative;z-index:0;}
#feedContainer .inner {display:block;height:72px;padding:10px;margin:5px 5px 0 5px;position:relative;background-color:#fff;box-shadow:0 0 0 1px #eaeaea;opacity:0.9;transition:all 0.6s;}
#feedContainer .inner:hover {opacity:1;box-shadow:0 0 0 1px #dadada;}
#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;padding:1px;background:#ddd;}
#feedContainer .toc-title {max-height:33px;overflow:hidden;color:#444;font-weight:400;}
#feedContainer .toc-title:hover {color:#404040;}
#feedContainer .news-text {font-size:11px;display:none;}
#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;
background-color:#444;padding:5px 0;width:100%;margin: 0 auto;margin-top:10px;transition:all 0.3s linear;}
#feedNav a:hover, #feedNav span:hover {background-color:#444;transition:all 0.3s linear;}
#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}
#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}
#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;
margin-left:5px;}
</style>

<script src="https://cdn.rawgit.com/BloggerSpice/Sitemap/master/advance%20sitemap%2BBloggerSpice.js" type="text/javascript"></script>
















<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,Poppins,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Poppins,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,Poppins,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #05A6F7;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#F0F9FD;box-shadow:2px 0 7px rgba(0,0,0,.4);color:#000}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>

<br />
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Loading Sitemap…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Website URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: false, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 99999, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script></div>








<aside id="bott">
<div>
<span class="bott">Laxman Nepal </span>
</div>
</aside>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400, 700);
 body {
 margin:0;
 padding:0;
 background:#fff;
 font-family:'Roboto', sans-serif;
 }
*, *:before, *:after {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 }
ins {
 background:#fff;
 }
#arlina {
 background:#fff;
 position:relative;
 margin:5% auto;
 width:100%;
 max-width:920px;
 overflow:hidden;
 box-shadow:0 0 0 20px rgba(0, 0, 0, 0.03);
 }
a:link, a:visited:hover {
 color:#138be6;
 text-decoration:none;
 outline:none;
 transition:all 0.25s;
 }
a:visited, a:link:hover {
 color:#333;
 text-decoration:none;
 }
.recent-labpost {
 margin:20px;
 }
.rctab-button>span {
 padding:15px 20px;
 cursor:pointer;
 position:relative;
 color:#222;
 display:inline-block;
 font-size:120%;
 font-weight:700;
 }
.rctab-button>span.active {
 color:#222;
 background:rgba(0, 0, 0, 0.05)}
.rctab-button>span.active:before {
 content:'';
 top:0;
 opacity:1}
.rctab-content {
 padding:15px;
 background:rgba(0, 0, 0, 0.05);
 position:relative;
 min-height:100px;
 overflow:auto}
.rctab-item {
 float:left;
 width:48%;
 margin:10px 1%;
 background:#fff;
 border:1px solid rgba(0, 0, 0, 0);
 transition:all .3s;
 }
.rctab-item:hover {
 border:1px solid rgba(0, 0, 0, 0.1);
 }
.rctab-item-inner {
 padding:10px}
.rctab-item img {
 float:left;
 width:120px;
 height:auto;
 }
.rctab-item h3 {
 float:right;
 width:calc(100% - 130px);
 height:20px;
 margin:10px 0;
 font-size:120%}
.rctab-item h3 a {
 color:#222}
.rctab-item h3 a:hover {
 color:#e74c3c}
.loader {
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-27.5px;
 margin-top:-27.5px;
 transition:all .3s linear}
.hide-load .loader {
 opacity:0}
.squarin {
 background:#374140;
 width:15px;
 height:15px;
 float:left;
 top:-10px;
 margin-right:5px;
 margin-top:5px;
 position:relative;
 opacity:0;
 -webkit-animation:enter 6s infinite;
 animation:enter 6s infinite}
.enter {
 top:0;
 opacity:1}
.squarin:nth-child(1) {
 -webkit-animation-delay:1.8s;
 -moz-animation-delay:1.8s;
 animation-delay:1.8s}
.squarin:nth-child(2) {
 -webkit-animation-delay:2.1s;
 -moz-animation-delay:2.1s;
 animation-delay:2.1s}
.squarin:nth-child(3) {
 -webkit-animation-delay:2.4s;
 -moz-animation-delay:2.4s;
 animation-delay:2.4s;
 background:#09c}
.squarin:nth-child(4) {
 -webkit-animation-delay:0.9s;
 -moz-animation-delay:0.9s;
 animation-delay:0.9s}
.squarin:nth-child(5) {
 -webkit-animation-delay:1.2s;
 -moz-animation-delay:1.2s;
 animation-delay:1.2s}
.squarin:nth-child(6) {
 -webkit-animation-delay:1.5s;
 -moz-animation-delay:1.5s;
 animation-delay:1.5s}
.squarin:nth-child(8) {
 -webkit-animation-delay:0.3s;
 -moz-animation-delay:0.3s;
 animation-delay:0.3s}
.squarin:nth-child(9) {
 -webkit-animation-delay:0.6s;
 -moz-animation-delay:0.6s;
 animation-delay:0.6s}
@media screen and (max-width:768px) {
 .rctab-item {
 float:left;
 width:100%;
 }
.rctab-item {
 margin:10px auto;
 }
}
aside#bott {
 position:static;
 left:0;
 right:0;
 bottom:0;
 margin:5% auto 0 auto;
 flex:none;
 display:flex;
 align-items:center;
 justify-content:center;
 background:rgba(0, 0, 0, .08);
 color:#999;
 padding:1em}
aside span.bott {
 color:inherit;
 text-decoration:none;
 font-weight:normal;
 display:inline-block;
 padding:.4em 1em}
</style>

</div>