Freitag, 4. Mai 2012

Breadcrumb Navigation für Blogger

| |
Hallo, liebe Leser heute erklär ich euch wie man die "Breadcrumbs Navigation" erstellt.

Was sind Breadcrumbs und wofür sind sie gut?
Breadcrumbs sind labels die bei jedem Post über den den Artikel erscheinen eine art Navigation.
Gut sind diese auf jedenfall für die Suchmaschinenoptimierung (SEO)
also für unseren lieben Freund Google :)
Und für Besucher natürlich denn es sieht bei der Google Suche professionell und schick aus.




So würde es bei einem Artikel aussehen:
Breadcrumps



So sieht es bei der Google Suche aus:
Breadcrumps Google

Installation:
Dashboard ➜ Vorlage ➜ HTML bearbeiten ➜ Fortfahren ➜ Widget-Vorlagen komplett anzeigen (Haken setzen)

findet den Code:
<b:include data='top' name='status-message'/>
und fügt diesen direkt darüber ein:
<b:include data='posts' name='breadcrumb'/>

findet den Code: (Wenn in eurem Template mehrere von diesem code sind dann finden den der am nächst möglichen der an den Code: b:include data="post" name="post"> ist)
<b:includable id='main' var='top'>

fügt direkt darüber diesen Code ein:
<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;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home </a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home </a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home </a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Ana Sayfa </a></span> » <span>Zwischenzeit <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home </a></span> » <span>Alle Posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home </a></span> » <span>Mit den Labels; <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>


Zum Schluss findet den Code:
]]></b:skin>

Direkt darüber diesen CSS Code einfügen:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

0 Kommentare:

Kommentar veröffentlichen