How to Replace Older/Newer Post Link with FontAwesome in Blogger

 How to Replace Older/Newer Post Link with FontAwesome in Blogger
Wants to get rid of older posts and newer posts navigate links at the bottom of your blogger post most of blogger template designs have the old boring navigation links which you may don't like you want to change that link with some awesome arrow image and you don't know how to do this, Well, you can easily do this, In this tutorial we will learn how to change Older Newer Post link with fontawesome, just sit and enjoy this article, in just few minutes you will change your navigation links with images / icon whatever you like When we customizing blogger template the most,

  • Recommended: Make Money Online With Blog

  • What is FontAwesome ?
    Well FontAwesome features packed icons over 605 Icons all the icons from the Twitter Bootstrap framework, and now many more and you can with customize it with the power of CSS. You can use any icon by just add a class attribute in your html element.

    Get FontAwesome and Replace Older/Newer navigation With it

    First of all go you fontAwesome's website and get the css scripts, Click to get started and you will see there will be the CSS script copy that one
    In cause if you can't find copy this (I was wanted to you copy lastest version)
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    
    And then go to your blogger account and template -> Edit HTML and click anywhere in that editor and find head> (You can use the search box) once you find head> tag paste that cs's style below head tag.
     How to Replace Older/Newer Post Link with FontAwesome in Blogger
    After you paste style script then now search for <b:if cond='data:newerPageUrl'> and you will find two tags make sure you don't add the mobile tag, Once you found the "<b:if cond='data:newerPageUrl'> " and you will found the older / newer / home post links, We will add our fontAwesome arrow icon there
     How to Replace Older/Newer Post Link with FontAwesome in Blogger
    Now we will replace older / newer post link with FontAwsome icons
    Replace this
    <a class="***"><data:newerPageTitle/></a> -> Newer Post Link
    <a class='***'><data:olderPageTitle/></a> - > Older Post Link
    <a class='***'><data:homeMsg/></a> -> Home Link
    With
    <a class='***'><i class='fa fa-arrow-circle-left fa-5x'/></a> -> Newer Post Link
    <a class='***'><i class='fa fa-arrow-circle-right fa-5x'/></a> -> Older Post Link
    <a class='***'><i class='fa fa-home fa-5x'/></a>-> Home Link
     How to Replace Older/Newer Post Link with FontAwesome in Blogger
    Congratulations, You succesfully replaced newer / older posts
     How to Replace Older/Newer Post Link with FontAwesome in Blogger
    Read More About fontAwesome

  • Recommended: How To Change Author Box Dynamically Blogger
  • Recommended: 7 Top Extremely Advanced SEO Tips For Bloggers
  • Comments