May 18, 2012

Infomasi Social Media dan Tip Trik Online

How To : Add Breadcrumb to Blogger/Blogspot


Advertisements

Some SEO experts said that breadcrumb is good for SEO, to increasing the keywords density. In other side, breadcrumbs helps your visitors to explore more pages in your blog. If you are using WordPress of course it wouldn’t be big problem, but what about Blogger/Blogspot users? Ok, let’s make it so easy to install on your blog. icon razz How To : Add Breadcrumb to Blogger/Blogspot

screenshot4 How To : Add Breadcrumb to Blogger/Blogspot

Go to your Blogger admin, I suggest http://draft.blogger.com/
Open your Layout–>Edit HTML
Ok, don’t forget to check Expand Widget Templates

Ready to edit your template now?
Search for :

<br />&lt;b:include data="'top'" name="'status-message'/"&gt;<br />

Replace with :

<br />&lt;b:include data="top" name="status-message"&gt;<br />&lt;b:include data="posts" name="breadcrumb"&gt;<br />

Then, search for :

<br />&lt;b:includable id="main" var="top"&gt;<br />

Replace with :

<br />&lt;b:includable id=’breadcrumb’ var=’posts’&gt;<br />&lt;b:if cond=’data:blog.homepageUrl == data:blog.url’&gt;<br />&lt;!– No breadcrumb on home page –&gt;<br />&lt;b:else/&gt;<br />&lt;b:if cond=’data:blog.pageType == “item”‘&gt;<br />&lt;!– breadcrumb for the post page –&gt;<br />&lt;p class=’breadcrumbs’&gt;<br />&lt;span class=’post-labels’&gt;<br />&lt;a expr:href=’data:blog.homepageUrl’ rel=’tag’&gt;Home&lt;/a&gt;<br />&lt;b:loop values=’data:posts’ var=’post’&gt;<br />&lt;b:if cond=’data:post.labels’&gt;<br />&lt;b:loop values=’data:post.labels’ var=’label’&gt;<br />&lt;b:if cond=’data:label.isLast == “true”‘&gt; »<br />&lt;a expr:href=’data:label.url’ rel=’tag’&gt;<data:label .name>&lt;/a&gt;<br />&lt;/b:if&gt;<br />&lt;/b:loop&gt;<br />&lt;b:else/&gt;<br />»Unlabelled<br />&lt;/b:if&gt;<br />» <data:post .title></data:post><br />&lt;/b:loop&gt;<br />&lt;/span&gt;<br />&lt;/p&gt;<br />&lt;b:else/&gt;<br />&lt;b:if cond=’data:blog.pageType == “archive”‘&gt;<br />&lt;!– breadcrumb for the label archive page and search pages.. –&gt;<br />&lt;p class=’breadcrumbs’&gt;<br />&lt;span class=’post-labels’&gt;<br />&lt;a expr:href=’data:blog.homepageUrl’&gt;Home » Archives for <data:blog .pagename><br />&lt;/span&gt;<br />&lt;/p&gt;<br />&lt;b:else/&gt;<br />&lt;b:if cond=’data:blog.pageType == “index”‘&gt;<br />&lt;p class=’breadcrumbs’&gt;<br />&lt;span class=’post-labels’&gt;<br />&lt;b:if cond=’data:blog.pageName == “”‘&gt;<br />&lt;a expr:href=’data:blog.homepageUrl’&gt;Home » All posts<br />&lt;b:else/&gt;<br />&lt;a expr:href=’data:blog.homepageUrl’&gt;Home » Posts filed under </data:blog><data:blog .pagename><br />&lt;/b:if&gt;<br />&lt;/span&gt;<br />&lt;/p&gt;<br />&lt;/b:if&gt;<br />&lt;/b:if&gt;<br />&lt;/b:if&gt;<br />&lt;/b:if&gt;<br />&lt;/b:includable&gt;<br />&lt;b:includable id=’main’ var=’top’&gt;<br /></data:blog></data:label>

Ok, you need add a CSS style for your breadcrumb now..
Search for :

<br />]]&gt;&lt;/b:skin&gt;<br />

Add CSS code above it

<br />.breadcrumbs {<br />padding:5px 5px 5px 0px;<br />margin: 0px 0px 15px 0px;<br />font-size:95%;<br />line-height: 1.4em;<br />border-bottom:3px double #e6e4e3;<br />}<br />

Finish! You can save your template and see the result. It should be a breadcrumb on top of your single post now. icon razz How To : Add Breadcrumb to Blogger/Blogspot

So many thanks to Melodanta.com for this trick.

Related posts:

  1. How To : Show Disqus Comments Count on Blogger
  2. How To : Add Facebook Like Button to Blogger Post
  3. How To : Add Topsy Retweet Button to Blogger
  4. How To : Adding Drop Shadow Image in Blogger
  5. How To : Add Twitter’s Tweet Button to WordPress, Blogger, Tumblr
Ngonoo - Technology & Social Media Updates
Post comment as twitter logo facebook logo
Sort: Newest | Oldest