Along with many features that a website should have, then breadcrumb choice is always necessary for the construction site more user friendly. Because it helps your blog visitors to easily navigate to the content they want to. Previously he had introduced article Breadcrumbs incrementally create blogspot page . Today I'll show you later for displaying your blog breadcrumb, from which you will have to add more options to your blog.
1 Sign in to your Blogger Dashboard .
2 In the Template -> Edit HTML
3 Press Ctrl + F and then find the following code:
2 In the Template -> Edit HTML
3 Press Ctrl + F and then find the following code:
1
| <b:include data='top' name='status-message'/> |
Then copy the code below and paste it into the code found soon.
1
| <b:include data='posts' name='breadcrumb'/> |
4 Continue to find the following code:
1
| <b:includable id='main' var='top'> |
Then copy the code below and paste it on top of it:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| <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 --><a href="http://www.netoopsblog.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><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/> Unlabelled </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 post-navigation'> <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 post-navigation'> <b:if cond='data:blog.pageName == ""'> <a expr:href='data:blog.homepageUrl'> Home </a> All posts <b:else/> <a expr:href='data:blog.homepageUrl'> Home </a> <span>Posts filed under <data:blog.pageName/></span> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable> |
5 Search ]]> </ b: skin> and copy and paste the code below above it.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| .breadcrumbs a { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-position: 100% 0; background-repeat: no-repeat; border-color: #D9D9D9; border-image: none; border-style: solid; border-width: 1px 0 1px 1px; color: #666666; display: block; float: left; font-size: 95%; padding: 7px 16px 7px 19px; position: relative; text-decoration: none; z-index: 1;}.breadcrumbs a:hover { border-bottom-color: #C4C4C4; border-top-color: #C4C4C4; box-shadow: 0 2px 2px #E8E8E8; color: #333333;}.breadcrumbs a:first-child, .breadcrumbs a:first-child:hover { border-top-left-radius: 5px; z-index: 30 !important;}.breadcrumbs { margin: 0px 0px 15px 0px; font-size:95%; } |
That's it, now you can check the results. I hope that you will like the style breadcrumb like this.
Good luck !
Comments
Post a Comment