segunda-feira, 4 de abril de 2016

Breadcrumb microdata Valid HTML5 para Blogger

breadcrumb-microdata-valid-html5


Isso é muito útil para sua navegação ja foi visto em algumas postagems aqui no blogger que breadcrumb realmente vale e isso além de auxiliar um usuário ao nível de página em que esta ainda é bom para SEO alguns sites antigos aparecem no topo das buscas devido ao fato de terem breadcrumb usando de forma correta isso pode ser muito bom para seu Blogger o que é melhor é que isso vem com uma validação HTML5 que já esta sendo bem utilizado por vários programadores então se esta procurando um bom breadcrumb para seu blogger aqui esta um.



Para adicionar breadcrumb microdata valid HTML5 no Blogger

Faça login no painel do Blogger procure no menu
Modelo então Editar HTML/JavaScript
com as teclas combinadas CTRL+F  busque por ]]></b:skin> então copie o seguinte código e cole acima disso.
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:12px;color:#333;borde


Passo 2 localize esse código

 <b:includable id='main' var='top'> então substitua todo ele por esse:

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <!-- breadcrumb halaman static -->
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'><data:blog.pageName/></span></div>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- breadcrumb halaman posting -->
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast == &quot;true&quot;'>
  &#187; <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
      </b:if>
    </b:loop>
  &#187; <span itemprop='title'><data:post.title/></span></div>
          <b:else/>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'>Tanpa Label</span> &#187; <span itemprop='title'><data:post.title/></span></div>
          </b:if>
        </b:loop>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
  <!-- breadcrumb halaman arsip -->
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'>Arsip <data:blog.pageName/></span></div>
        <b:else/>
          <b:if cond='data:blog.pageType == &quot;index&quot;'>
  <!-- breadcrumb pencarian label -->
            <b:if cond='data:blog.pageName == &quot;&quot;'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'>Penelusuran Arsip Posting</span></div>
            <b:else/>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'><data:blog.pageName/></span></div>
            </b:if>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Então salve o modelo e pronto breadcrumb ja esta ativo.




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