How to Edit & add Icons in post nav breadcrumb in any blogger template

Trying to make your blogger blog look more professional, then definitely you have come to a right place. Today I,ll tell you that how to add icons in your blogger template's breadcrumb & how to design breadcrumb box using css without any coding knowledge, it means if you don't know coding language then still you are able to do this in your blogger template but for this Read this full post from scratch.


Add icons in post breadcrumb navigation


What you will get in this article

How to add icons in your blogger post breadcrumb?

How to edit blogger template breadcrumb nav from scratch?

Tip for mobile user' how they can apply all the process in their blog.

A special gift for you from my self.



    How to add icon in Blogger template breadcrumb?

    Adding icons in blogger post breadcrumb is very easy. It doesn't matter's that you know coding language or not, and off course buddy just follow me to do these Easy steps, If you don't understand these steps then, see below (1.1 example img)

    Steps :-

    1). Copy and paste below code before ending of head tag </head>.
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>code-box

    2). Search breadcrumb in your template code.

    3). Find the breadcrumb tag between in <body></body> tag in your template.

    Note : You can find breadcrumb in <----Post breadcrumb section--->. Never in any of like these below categories <---- Breadcrumb for archive 
    -----> or label and more's.

    4). Now find Home text or <data:messages.home/> tag in breadcrumb section in your template.

    5). Now again copy and paste below code before Home text or <data:messages.home/>

    <i aria-hidden='true' class='fa fa-home'/>code-box

    Paste above code Like this example. 👇👇

    <i aria-hidden='true' class='fa fa-home'/> Home</a>code-box

    Or

    <i aria-hidden='true' class='fa fa-home'/><data:messages.home/></a>code-box


    Now save your theme & check your Result by opening your blogpost.

    1.1 img

    How to edit blogger template in smartphone?

    Mobile's are the most common device that are used almost by every person, but if you are thinking to start your blog, then to edit any code in Mobile is very difficult for newbies. But today I have a simple solution only for mobile user's. You can download below app to edit your blogger template.

    Quick editor.


    How to edit Post breadcrumb nav to look more Professtional?

    Making your Post Breadcrumb bav look more better or professional is done by giving this some style like (font size, font color, background color and More). Don't worry you can do it without any coding language.

    Friends, we have edited 50+ blogger templates and now according to my experience I have found

    ".breadcrumbs" as html code class & "#breadcrumbs" as html code Id.

    And in some templates I have found

    ".breadcrumb" as html code class & "#breadcrumb" as html code id.

    So, Now I am giving you 4 breadcrumb codes after testing 50+ different-different blogger templates. By using these codes you can easily edit and make your breadcrumbs look more professional.


    Steps to give professional look to breadcrumb.

    • Add 1st code before ]]></b:skin> tag in your template.
    • Now save theme and check your result by opening blogpost.

    Note : If 1st code not works then try to add 2nd, 3rd, 4rth code 1 by 1 before ]]></b:skin> tag in your template, but don't forget to remove those code which you have added now but it not works in your template.

    1st code

    .breadcrumbs {color: #fff !important;background-color:#000000 !important;padding: 3px !important;border-radius:3px !important;}
    .breadcrumbs a {color: #fff !important;}
    .breadcrumbs a:hover {color: #fa4c2a !important;}code-box


    2nd code

    #breadcrumbs {color: #fff !important;background-color:#000000 !important;padding: 3px !important;border-radius:3px !important;}
    #breadcrumbs a {color: #fff !important;}
    #breadcrumbs a:hover {color: #fa4c2a !important;}code-box

    3rd code

    .breadcrumb {color: #fff !important;background-color:#000000 !important;padding: 3px !important;border-radius:3px !important;}
    .breadcrumb a {color: #fff !important;}
    .breadcrumb a:hover {color: #fa4c2a !important;}code-box

    4rth code

    #breadcrumb {color: #fff !important;background-color:#000000 !important;padding: 3px !important;border-radius:3px !important;}
    #breadcrumb a {color: #fff !important;}
    #breadcrumb a:hover {color: #fa4c2a !important;}code-box

    Conclusion

    Today In this Article I have shared you How to add Icons in post nav breadcrumb in any blogger template. If you like this tutorial then Please have a comment and also share this post on your social networks and with your friend's, who want to make their blog look more professional.

    If your facing any issue to adding above codes, then give your template name or your web link in comment box, on which you want to do above process.

    And of course If you can't understand anything, then why are you waiting let me know in comment box (it's free). We will definitely give you a reply regarding to your question. Have a Nice day!

    2 Comments

    Please Don't spam in Comment Box

    Post a Comment

    Please Don't spam in Comment Box

    Previous Post Next Post