Replace Next/Previous/Home Buttons

Hi all! Are you ready for a new blog tutorial here at Design It Chic!?! Then let's get started! Without further ado, the topic for today is: how to replace the next/previous/home buttons with your desired ones. This will make your blog unique and special and it's not even that hard to do. So let's proceed with the tutorial:)



1. First thing, you need to save your current blog's template by signing in your "Dashboard" and then go to "Design" and select the "Edit HTML" tab and press "Download Full Template".


2. After you saved your blog's current template, make sure you check the "Expand Widget Templates" option and look for this piece of code as shown in the picture below, by either scrolling down or simply using the Ctrl + F (for Windows users) or Command + F (for MAC users) combination on your keyboard:

<data:newerPageTitle/>


3. Now that you found the code paste this piece of code instead of it:

<img src='YOUR IMAGE LINK' alt='Next Post' />


4. Next step is to replace the "YOUR IMAGE LINK" with the actual link of your first image. Previous to this step, you should upload your desired pictures you want to use for this project(size max. 120px wide and 70px high) on an image hosting website, such as Flickr, ImageShack, TinyPic, etc., from where you can get the link of your image that you need.

5. Once you're done with uploading the pictures to the image hosting site and adding the respective image link inside of the code from step 3, you need to look for this piece of code:

<data:olderPageTitle/>


6. Now that you found the code paste this piece of code instead of it:

<img src='YOUR IMAGE LINK' alt='Previous Post' />


7. Next step after you replace the "YOUR IMAGE LINK" with the actual link of your second image, look for this piece of code:

<data:homeMsg/>


8. Now that you found the code paste this piece of code instead of it and don't forget to replace the "YOUR IMAGE LINK" with the actual link of your third image:

<img src='YOUR IMAGE LINK' alt='Home' />


9. Last step before saving is previewing your work, and if it looks good then hit "Save Template", and your blog should look something similar from this:


To this:

And just a side note, if you want to place the buttons from "next" and "previous" the other way around, as in change the left side and right side in between them, just switch the replacing code from step 3 with the one from step 6 and you'll get the buttons placed the opposite side.


That's it! Hope you guys enjoyed this little tutorial!:)

And don't forget, if you missed anything here at Design It Chic, you can check the Blog Tips button at the top of the page for more tutorials, tips to improve your blog's traffic and other amazing how to's, all presented on different levels, from beginners to the more advanced ones!
Have a great week everybody!