23 March 2009

How to make breadcrumb-navigation in Blogger

Setelah hari kemarin saya posting tentang Kumpulan Foto Bugil Adiknya Miyabi HOT dan Download Video Porno Bokep Bugil 3gp Gratis Laris, maka hari ini saya akan update Artikel How to make breadcrumb-navigation in Blogger.



The navigation like above is known better by the name of “breadcrumb-navigation”. With the “breadcrumb-navigation” the readers can easily know the position of an article that’s being read and also can search the articles in the same category.

Can “breadcrumb-navigation” be installed in blogger? The answer is of course, it can. With a few modifications of your template code, then the “breadcrumb-navigation” will be yours soon. Below are the ways:


1. Please log in to blogger with your ID
2. Click Layout
3. Click Edit HTML tab
4. Click Download Full Template and please back up your template first
5. Please check the small box beside Expand Widget Template
6. Find the code ]]></b:skin>
7. Copy and paste the code below exactly above the code ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
8. Find the following code in your template :
<div class='post hentry uncustomized-post-template'>
9. Copy and paste the code below exactly below the code <div class='post hentry uncustomized-post-template'> or <div class='post hentry'>


<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

10. Click Save Template button
11. Wait for a while until your template saved
12. Open your blog, click the title of an article, see the result
13. Finished.
If your steps are correct, the “breadcrumb-navigation” will be like this:


No comments:

Post a Comment