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.

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

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

Congratulations, You succesfully replaced newer / older posts

Read More About fontAwesome

Recommended: How To Change Author Box Dynamically Blogger

Recommended: 7 Top Extremely Advanced SEO Tips For Bloggers