How to make "breadcrumb-navigation" in Blogger
1. .Log in to your dashboard--> layout- -> Edit HTML
2. .Click on "Expand Widget Templates"
3. Click "Ctrl+F" and find the following cod:
<b:include data='top' name='status-message'/>
4. Replace the above code with this code
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
5. Now find:
<b:includable id='main' var='top'>
and Replace it with:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
Browse » <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 == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
» Uncategorized
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
;
6. Next you have to search for: ]]></b:skin> and replace it with the code given below:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>
7. Save the template and it's done! Now you can check your breadcrumb working in your blog.
7 comments
this is amazing,thank you very much
please post more of these,just amazing post
للاسف انجليزيتي سيئة جدا وماني فاهمة حاجة
وأود أن أطلب أن يكتب كل التعليقات باللغة الانكليزية أو لغة أخرى دولية. إذا كنت لا تعرف اللغة الإنجليزية باستخدام مترجم جوجل. شكرا
;
the ; must be deleted for my blog..
work amazing, visit http://keyzedblog.blogspot.com
Excelent.
Există vreo modalitate de a schimba culoarea linkurilor home/post?
Mulţumesc anticipat.
Inlocuieste codul de la pasul 6 cu urmatorul:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
]]></b:skin>
Apoi inlocuieste #00BBFF cu codul culorii dorite de tine.
Am efectuat modificarea. Apreciez!
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.