Como Criar um Widget de SiteMap no Blogger ou Blogspot

Frases Hotbuy

domingo, 5 de janeiro de 2020

Códigos para Blogger

Hack para Blog:Como Criar um widget de sitemap no Blogger ou Blogspot

DESCRIÇÃO

Como Criar um widget de sitemap no blogspot - Na verdade, e um tutorial sobre como criar um widget de siteMap ou uma lista de conteúdo a uma postagem de blog que eu compartilharei que foi feito por arlina Design
A vantagem de adicionar este widget de sitemap é que o blog ou blogspot parece mais profissional e atraente do que antes. Além disso, os visitantes também podem ver e pesquisar todos os artigos de nosso blog facilmente. Certamente, ele adicionará uma vantagem ao blog se os visitantes abrirem determinados artigos neste widget de sitemap.
Ok, imediatamente, como aplicá-lo ao blog, é muito fácil. Siga as etapas abaixo:

Primeiro, abra o Blogger> Página> Criar nova página> Aplique o código abaixo na guia HTML.

<br /> <div id="bp_toc"> Loading Sitemap. Please wait....</div> <script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script><br /> <b:if cond="data:blog.pageType == "http://www.arlinadzgn.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>

Elimine a Tag <br /> e cole o código na guia HTML

Em seguida, publique a página.

E Em seguida, clique em Modelo> Abrir modelo de edição>  Aplique o código  abaixo logo antes  </style>

<br /> /* CSS Sitemap */<br /> #bp_toc{background:transparent;width:100%;color:#999;margin-top:10px;margin:0 auto;padding:5px}<br /> .toc-header-col1{padding:15px!important;line-height:15px;background-color:#f56954;width:250px;transition:all 0.3s ease-in-out}<br /> .toc-header-col2{padding:15px!important;line-height:15px;background-color:#2c323c;width:75px;transition:all 0.3s ease-in-out}<br /> .toc-header-col3{padding:15px!important;line-height:15px;background-color:#252a32;width:125px;transition:all 0.3s ease-in-out}<br /> .toc-header-col1:hover,.toc-header-col2:hover,.toc-header-col3:hover{opacity:0.9}<br /> .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}<br /> .toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}<br /> .toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px;font-size:92%;;transition:all 0.3s ease-in-out}<br /> .toc-entry-col1:hover,.toc-entry-col2:hover,.toc-entry-col3:hover{background:#fdfdfd}<br /> .toc-entry-col1:nth-child(odd),.toc-entry-col2:nth-child(odd),.toc-entry-col3:nth-child(odd){padding:10px;font-size:92%}<br /> .toc-entry-col1:nth-child(even),.toc-entry-col2:nth-child(even),.toc-entry-col3:nth-child(even){padding:10px;font-size:92%}<br /> .toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{text-decoration:none;color:#666;transition:all 0.3s ease-in-out}<br /> .toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#f56954}<br /> span.toc-note{padding:10px;margin:10px 0;display:inline-block;background:#fff;color:#666}<br /> #bp_toc table{width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color:transparent}<br /> #bp_toc tr:nth-child(even){background:#fafafa}<br /> #bp_toc tr:nth-child(odd){background:#f5f5f5}

Lembre-se de Eliminar a Tag <br />
Especifique o valor da altura máxima acima, conforme deseja

Resultado 

Salve o Modelo

Para Qualquer dúvida deixe um comentário.

Fonte : ArlinaDesign