domingo, 10 de julho de 2016

Table sitemap Blogger by labels



Table sitemap blogger by labels é excelente para qualquer tipo de nicho de Blogger isso é elegante e ajuda também os visitantes a encontrar conteúdo por labels, sugerimos criar uma pagina especifica para isso afim de ajudar os leitores para adicionar isso ao Blogger siga os passos abaixo.



Adicionando table sitemap blogger by labels

Faça login no Blogger então vá no menu páginas então clique em nova pagina  clique então na aba HTML e cole o código abaixo. siga conforme as figuras.

adicionar-nova-pagina-blogger

new-page-blogger

<style scoped="" type="text/css">
#head-tab{background:#87D37C;padding:15px 20px;margin:0;color:#fff;font-size:16px;text-align:center;font-weight:700;letter-spacing:.5px;}
#tabbed-toc{margin:0 auto;background-color:#222;overflow:hidden;position:relative;color:#fff;border-left:5px solid #87D37C}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0;padding:0;list-style:none}
#tabbed-toc .toc-tabs{width:30%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;color:#fafafa;text-decoration:none;padding:8px 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#333;color:#fff}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#333;color:#fff;position:relative;z-index:5;}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:70%;float:right;background-color:#fafafa;border:1px solid #fafafa}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#7f8c8d;line-height:20px;height:30px;padding:6px 12px;text-decoration:none;outline:0;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:1px solid #2c3e50;overflow:hidden}
#tabbed-toc .panel li:nth-child(even){background-color:#fafafa}
#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:#fafafa;color:#e06666;outline:0}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#36424a}
.post ol li:before{display:none}
@media(max-width:700px){
#tabbed-toc{border:1px solid #ccc}
#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:#777}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#87D37C;color:#fafafa}
#tabbed-toc .toc-content{border:0}#tabbed-toc .panel li a{font-size:12px;line-height:20px;height:20px;padding:0 12px}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>
<div id="head-tab">
SITEMAP SEARCH HERE</div>
<div id="tabbed-toc">
</div>
<script>
var tabbedTOC = {
    blogUrl: "http://www.mybloggerseo.com", // Blog 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
    newTabLink: true, // 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: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " <em style='color:#F2784B;'>New</em>" // HTML for the "New!" text
};
</script>
<script async="async" src="https://cdn.rawgit.com/Indzign/theme/master/daftar-isi-indzign.js"></script>

Nota:  substitua o link em amarelo por o link do seu Blogger.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner