Pertama, buat halaman baru > Tambahkan kode di bawah ini di tab HTML
<div id="bp_toc"> Loading Sitemap. Please wait....</div> <script src="https://arlina-design.googlecode.com/svn/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script> <b:if cond="data:blog.pageType == "http://pusat-tutorial.com/p/sitemap.html""> <style scoped="" type="text/css"> #outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;} #post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;} .post-body,.post{background-position:center!important;} #blog1,#artikel,.blog-posts{background-position:center!important;} .banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;} .post-inner {padding:0 0 0 0;margin:20px auto;} </style> </b:if>
Simpan.
Ganti http://pusat-tutorial.com/p/sitemap.html ke url halaman blog anda
Selanjutnya, buka Template > Edit Template > Tambahkan semua kode di bawah ini tepat sebelum </style>
/* CSS Sitemap */ #bp_toc { background: transparent; width: 100%; color: #999; margin-top: 10px; margin: 0 auto; padding: 5px; } .toc-header-col1 { padding: 15px!important; line-height: 15px; background-color: #f56954; width: 250px; transition: all 0.3s ease-in-out; } .toc-header-col2 { padding: 15px!important; line-height: 15px; background-color: #2c323c; width: 75px; transition: all 0.3s ease-in-out; } .toc-header-col3 { padding: 15px!important; line-height: 15px; background-color: #252a32; width: 125px; transition: all 0.3s ease-in-out; } .toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover { opacity: 0.9; } .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size: 15px; text-transform: lowercase; text-decoration: none; color: #fff; font-family: 'Viga'; font-weight: 400; letter-spacing: 0.5px; } .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration: none; } .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding: 10px; font-size: 92%; ;transition: all 0.3s ease-in-out; } .toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover { background: #fdfdfd; } .toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) { padding: 10px; font-size: 92%; } .toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) { padding: 10px; font-size: 92%; } .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a { text-decoration: none; color: #666; transition: all 0.3s ease-in-out; } .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover { color: #f56954; } span.toc-note { padding: 10px; margin: 10px 0; display: inline-block; background: #fff; color: #666; } #bp_toc table { width: 100%; margin: 0 auto; border-collapse: collapse; border-spacing: 0; border-color: transparent; } #bp_toc tr:nth-child(even) { background: #fafafa; } #bp_toc tr:nth-child(odd) { background: #f5f5f5; }
