A common appearance form of blog page at Blogger is the button text Older Posts, Newer Posts and Home on the bottom of the article posts. The function of this link is to open page articles before, after, and main page of blog. More details as shown below.


Form a link or button can actually be changed by other text such as Before, Next and Home, or even be replaced with an icon or image. Of course with the correct settings, blog page appearance that we have can be more beautiful and lovely to see, by changing the default appearance of buttons or links from the Blogger. Another advantage is the blog will look more professional. An example is the blog that has replaced the links with images as shown below.


The first step to change the link is actually very easy. If want to replace with pictures, of course we have to prepare images or icons that will be used first, according to the size desired. Prepare a three images, then upload your own media and store, for example you can upload them on Blogger. After that get the three of URL address of each image.

The second step is to open the Edit HTML page of your blog page. If you do not already know, come into your Blogger Dashboard, then click Design -> Edit HTML. After that give check in the "Expand Widget Templates" at the top right.

Before proceeding to the next step, it will be better if you "Download Full Template" of your blog first to avoid things that are not desirable if you are wrong to do the edit, so you can restore your HTML code back to normal.

If all the steps above already done, find the following HTML code in your blog's HTML pages.

expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

There are three HTML code that needs to be replaced. Note the letters are colored red. Those parts can be changed according to your taste. If you want to replace with the words you can change like the example below.

Example 1 (replace with text)
Here is an example if you want to replace the default button with text Next, Before and Main Page.

expr:title='data:newerPageTitle'>Next</a>
expr:title='data:olderPageTitle'>Before</a>
<a class='home-link' expr:href='data:blog.homepageUrl'>Main Page</a>

Example 2 (replace with images or icons)
In the previous step, you already have a URL address each icon that you will use. In order to use these pictures as a button, you must use the formula HTML files with the following formula:

<img src='http://3.bp.blogspot.com/-Lh6TqYMsaBU/Txut9jCPCpI/AAAAAAADic/I82LHGjoNb0/s1600/Next%2Bicon.png'/>

The blue HTML code is the URL address of the image that will use as button. Remember, the URL address in blue above is just an example, so replace it with your own correct image URL address. After that plug in above HTML formula in the Edit HTML page as follows:

expr:title='data:newerPageTitle'><img src='http://3.bp.blogspot.com/-Lh6TqYMsaBU/Txut9jCPCpI/AAAAAAADic/I82LHGjoNb0/s1600/Next%2Bicon.png'/></a>

expr:title='data:olderPageTitle'><img src='http://2.bp.blogspot.com/-6-9qW-nouIk/Txut9QRPTaI/AAAAAAADiQ/lHxSFqZ_D6g/s1600/Before%2Bicon.png'/></a>

<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://4.bp.blogspot.com/-ubBepMWR-Jg/Txut9DkGXKI/AAAAAAADiE/qESepr49LDE/s1600/Home%2Bicon.png'/></a>

If you are finished, than save the HTML changes. There are several blogs that have two of third HTML code above. If there are two, just replacing both. To find out the results, Just open your blog and you'll see the button Older Posts, Newer Posts and Home on your blog has been replaced by icons that you already install. Have fun and good works.

Post a Comment

 
Top

Powered by themekiller.com