Add an archive page to Blogger blogs

Add an archive page to Blogger blogs
Professionally add a topic index to Blogger blogs . Time to update this add-on. The last post of this tool was 2015, you can follow it here .
If you do not have an archive page, hurry to add it, because it has an important role in both improving the ranking of blogs in Google and other search engines, and it also has a job in ordering an AdSense subscription, which is a necessity.
Visitors will benefit greatly, and they will get to the topics faster. You can try adding directly on our blog.
Preview
Explanation of the installation method
1. Through the pages Create a new page
2. Put the following code in the HTML tab
3. Put a name for the page sitemap (after publishing the page you can change the name of the page)
* Disable comments through the page settings if you want
<style type='text/css' scoped="">
.post-body table tr:nth-of-type(even):hover td, .post-body table tr:nth-of-type(odd):hover td { background-color: transparent!important;}
.post-body table tr:nth-of-type(odd) td { background-color: transparent!important; } .post-body table td, .post-body table caption { padding: 0 10px!important;}
#table-outer table{width:100%;margin:0 auto; box-shadow: none;}#table-outer form{font:inherit}#table-outer label{text-align:left}#table-outer select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#table-outer input,#table-outer select{font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px solid #dedede;border-radius:5px;margin:0 0 5px;padding:5px}#table-outer select option{min-height:1.4em!important}#table-outer input#feed-q{padding:5px 10px!important}#feed-container{overflow:hidden;position:relative;border-top:none;display:block;clear:both;margin:10px;padding:0;list-style:none;}#feed-container li{list-style:none;margin:0 0 10px;padding:0 10px 0 0;color:#555;width:33%;text-align:center;float:right;display:inline;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#feed-container li .inner{position: relative; overflow: hidden; word-wrap: break-word; border-radius: .3em; background: #fff; color: #555; margin: 0; padding: 50px; height: 200px; line-height: 1.2em; box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);}#feed-container li a{color:#333;font-weight:500}#feed-container li a.toc-read{text-decoration:none;color:#fff;margin-top:30px}#feed-container li .inner:hover a.toc-read{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}#feed-container li .news-text{font-size:14px;margin-top:10px}#feed-container li .news-text div{display:none!important}#feed-container li img{margin:0;padding:0;width:100%!important;height:100%!important;position:absolute;top:0;left:0}#feed-container li .inner:hover img{transition:all 1s ease-in-out;-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;left:-500px;animation-fill-mode:both}
@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}#result-desc{margin:0;padding:0;text-align: center;margin-top: -40px;}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav span{cursor:wait}@media screen and (max-width:1024px){#main-wrapper{padding:0 30px!important}#feed-container{display:block;clear:both;margin:0 -30px 0 0}#feed-container li{list-style:none;margin:0 0 30px;padding:0 30px 0 0}#feed-container li .inner{padding:20px}}@media screen and (max-width:960px){#main-wrapper{padding:0 20px!important}#feed-container{display:block;clear:both;margin:0 -20px 0 0}#feed-container li{list-style:none;margin:0 0 20px;padding:0 20px 0 0}#feed-container li .inner{padding:20px}}@media screen and (max-width:800px){#feed-container li{width:50%}}@media screen and (max-width:640px){#feed-container li .inner{height:150px}}@media screen and (max-width:414px){#table-outer table,#feed-container li{width:100%}#table-outer table,#table-outer label{text-align:center}#table-outer table td{display:block;margin:0 auto 5px;clear:both;float:none}#table-outer label{margin:0}#table-outer{padding:0}}@media (max-width:414px){#table-outer table td{text-align:center;display:block}#table-outer label{text-align:center;display:block;margin:0;padding:4px 0 0}#table-outer input,#table-outer select{margin:0 0 10px}}a.btn-default{color:#333}#feed-nav a{color:#fff}#feed-nav a{background-image:none}#feed-nav a{font-weight:400}#feed-nav a{border-radius:4px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;cursor:pointer;user-select:none;display:inline-block;padding:6px 12px}
#feed-nav { text-align: center; font-weight: 500; margin: 0 auto; }
#feed-nav a:focus,#feed-nav a:hover,#feed-nav a:hover{text-decoration:none;color:#eee;outline:0;background: #322d2b;}.btn-default{background:#fff;color:#333;border-color:#ccc}.btn-default:focus{background:#e6e6e6;color:#333;border-color:#8c8c8c}.btn-default:active,.btn-default:hover{background:#e6e6e6;color:#333;border-color:#adadad}#feed-nav a{background:#FF5722;color:#fff;}.btn-success{background:#5cb85c;color:#fff;border-color:#4cae4c}.btn-success:focus{background:#449d44;color:#fff;border-color:#255625}

a.btn.btn-primary.btn-sm.toc-read { background: #F44336; }
#feed-nav a{font-size:18px;padding:10px 16px;border-radius:6px;line-height:1.3333333}.parser,.btn-sm,.btn-xs{border-radius:3px;font-size:12px;line-height:1.5}.btn-sm{padding:5px 10px}.comments .paging-control-container .paging-control,.parser,.btn-xs{padding:1px 5px}#feed-nav a{display:block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;width:100%;box-sizing:border-box}.btn-block+.btn-block{margin-top:5px}.comment_form>a+a{border-color:#fff;padding:0;margin-bottom:0;background:#fff}

</style>
<div id="table-outer">
<table><tbody>
<tr> <td>
<label for="feed-order"> Publications classification: </label>
</td> <td>
<select id="feed-order">
<option selected="" value="published">Recent posts</option>
<option value="updated">Recently updated posts</option>
</select>
</td> </tr>
<tr> <td>
<label for="label-sorter">Sections classification: </label>
</td> <td>
<select disabled="" id="label-sorter">
<option selected="">sections...</option>
</select>
</td> </tr>
<tr> <td>
<label for="feed-q">Search for posts by keyword: </label>
</td> <td>
<form id="post-searcher">
<input id="feed-q" placeholder="search here..." type="text" />
</form>
</td> </tr>
</tbody> </table>
</div>


<header id="result-desc"></header>


<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src='https://cdn.statically.io/gh/SayemTutorial/sit/af4604d7/sit.js'></script>

Post a Comment

Post a Comment (0)

Previous Post Next Post