Saturday Sessions: How To Replace Older, Newer and Home Links with Icons

If you scroll down to the last post on this page of my blog you will see icons where the "older posts" 

"newer posts" and "Home" links used to be. Here is how to install custom icons that replace older, newer and home links with icons.

Step 1: Choose Your Icon. 

Here is where the freebies come into play! I have made a few sets for you to use on your own blog free of charge. You do have the option of clicking that top link under the header that says "sponsor" or the link to the right that says "design services" and paying me back that way. No pressure.

Here are the free icons you can choose from!

Links listed as numbers below, goes from top left to right.

1 // 2 // 3 // 4 // 5 // 6 // 7 // 8 // 9 // 10 // 11 // 12 // 13 // 14 // 15 // 16 // 17 // 18

Step 2: Open Your Template and Edit HTML

Go to Blogger Dashboard, click template, then click Edit HTML

Step 3: Find Your Code

Now here is where this tutorial is going to get really helpful. Since blogger changed the HTML editor, this step is more up-to-date than pretty much every tutorial out there. Took me forever, will take you 2 seconds. Don't be intimated, it is very very easy the way I have laid it out for you!

Now it is time to REPLACE your current code with new code

REPLACE <data:newerPageTitle/>

WITH <img src='YOUR_URL_HERE'/>

Where it says YOUR_URL_HERE replace that with the link provided above for your favorite set of icons (just the NEWER or FORWARD icon)

Example: Say I wanted to use the PINK set of icons with the glittery arrows. (Last set pictured)

I'd go copy those links (for the step that is link #16)  

<img src='http://i979.photobucket.com/albums/ae274/venustrappedinmars/newer-1.jpg'/>

Repeat for Older and Home the same way...

Replace <data:olderPageTitle/> 

With <img src='YOUR_URL_HERE'/>

Example (Using same set of pink Icons, copy #18)

<img src='http://i979.photobucket.com/albums/ae274/venustrappedinmars/old.jpg'/>

Replace <data:homeMsg/>

With <img src='YOUR_URL_HERE'/>

Example (using same set of pink icons copy link to #17)

<img src='http://i979.photobucket.com/albums/ae274/venustrappedinmars/home-1.jpg'/>

Then Click preview template, make sure it is exactly what you want,

if perfect, click SAVE Template and ENJOY!

-------

Don't be intimated, it is really easy. Plus, if you have any questions, I'm here for you, just ask me! Either leave a comment or email me and I'd be happy to help you! 

Oh and don't forget to check out my new Design Page, there is an icon on the right sidebar but you can also click here!