Friday, March 30, 2012

Change Older Posts Newer Posts to Image Button in Blogger


Blogger templates are not well optimized according to blog awesome and professional design. In Blogger Newer Post, Home and Older Post are links that appear on the bottom of the every post. When a visitor clicks on that links, they will take him to the page with the list of your previous posts or next post or home page. Today tutorial is all about How to change newer post, older posts and home links to image button.


How to Change Older Posts Newer Posts to Image Button in Blogger


Replacing the Older Link

Search for <data:olderPageTitle/> and replace with below code the Older Link

<img src='http://3.bp.blogspot.com/-44fkwV5xJyg/VRkk5HmageI/AAAAAAAAwQo/c81kygQcEAY/s1600/arrow%2Br.png' style='border: 0 none;vertical-align: middle;'/>

Replacing the Newer Link

Search for <data:newerPageTitle/>  tag and replace with below code 

<img src='http://2.bp.blogspot.com/-H8R88zTpuiI/VRkk5McSjEI/AAAAAAAAwQ0/L3Eiwd3R57Q/s1600/arrow%2Bl.png ' style='border: 0 none;vertical-align: middle;'/>

Replacing the Home Link

Search for <data:homeMsg/> tag and replace with below code

<img src='http://4.bp.blogspot.com/--O8IwL2XV3g/VRkk4zGKb9I/AAAAAAAAwQk/Y-mji4i6b5U/s1600/Home.png' style='border: 0 none;vertical-align: middle;'/>


 Save the Template and You'rre Done



Thursday, March 29, 2012

How to Replace Home, Older Posts and Newer Posts Links with Images

You may have seen home, older posts and newer posts links at the bottom of your website/blog homepage. These buttons/links are used for navigation. They help your visitors to navigate through your older/newer posts. This is a great tool/element for your visitors. By default, these links only show a simple text. But except the default simple text, you might wanna make these buttons more visible and eye catching, by changing their colors, effects and replacing them with eye catching images/icons. So, that your visitors will easily find your navigation, they will click on them, and will be dragged into the maze of your Blog posts. So, today in this article we'll show you that How to Replace Home, Older Posts and Newer Posts Links with Images.


Step 1. Log in to your Blogger Account  Go to Template and click Edit HTML
Step 2. Click inside the code area and use Ctrl+F to search, search for <data:newerPageTitle/> and replace it with the following code


<img src="NEWER POSTS IMAGE URL ADDRESS"/>


Step 3. Replace NEWER POSTS IMAGE URL ADDRESS with the URL of your newer posts image (Image for newer posts link)
Step 4. Now search for <data:olderPageTitle/> and replace it with the following code


<img src="OLDER POSTS IMAGE URL ADDRESS"/>

Step 5. Replace OLDER POSTS IMAGE URL ADDRESS with the URL of your newer posts 
image (Image for older posts link
Step 6. Now search for <data:homeMsg/> and replace it with the following code

<img src="HOMEPAGE IMAGE URL ADDRESS"/>


Step 7. Replace HOMEPAGE IMAGE URL ADDRESS with the URL of your newer posts image (Image for home page link



  Save Template And you're done