Venus Trapped in Mars Sports and Lifestyle Blog Dallas

18 May 2013

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!

Venus Trapped

12 comments :

  1. Girl you are too good!!! Thank you for this!!

    ReplyDelete
  2. I wish it were this easy on wordpress. I loved using blogger though. I hope you have a good Monday {if there is such a thing}.

    ReplyDelete
  3. Where do you find great glitter for these? I can't find it to do my glitter accent and social media buttons on my blog! Ah! haha!

    ReplyDelete
  4. Awesome tutorial! So helpful!

    xx

    http://thattallgirlinheels.com

    ReplyDelete
  5. Oooh, this is useful. Although I'm always afraid to mess with my blog's html... I'd probably eff it up.

    ReplyDelete
  6. I agree with Rachel, I do not think I would want to mess with the code!

    xx
    Kelly
    Sparkles and Shoes

    ReplyDelete
  7. Thank you so much! I didn't use your images, but I did create some that would match my blog "theme" a little better. It needs a lot of help, but I'm working on it!

    lifestreamthoughts.blogspot.com

    ReplyDelete
  8. Hehe...I used this today for my newest install. Thanks chica!

    ReplyDelete
  9. I used this today - so awesome! My buttons aren't fancy yet, but I just had to test it out! Thanks!!

    ReplyDelete
  10. I'm not sure what I'm doing wrong. But I've tried and it doesnt replace the images. :(

    ReplyDelete
  11. Ah! Can you give pointers on how to do this on wordpress?

    ReplyDelete
  12. Thanks for detailed guide, it works well. Now your blog have a new reader. I am taking icons from http://www.cannypic.com/ by the way. Good storage with free downloads.

    ReplyDelete

Comments make my heart go boom boom.

I respond to all comments, if you are leaving me comments and not getting a reply, you may be a no-reply blogger. Fix it HERE!