After creating Pagenumber Navigation on the blog, then we shall create Icon Style of Newer Older Home Navigation. At the beginning you click on any label on your blog or you open in full view an article on navigation at the bottom still any Navigation that signed by Newer Post, Older Post, and Home. This is a little bit different in the pagination system if you ever use joomla as your site. Newer Older Home Navigation by default only appear as text links. We will change the style became more attractive with the icon.
As seen in the picture above, we do things that will change the look of the navigation text into the icon navigation. Of course you can replace the icon in accordance with your own icon design. To change the Newer Home Older Navigation Style we must find some tags that display the three text navigation.
As usual you go to the dashboard of your blog then click on Template > Edit Html. At the html code of your template find the section of NextPrev Navigation. Ctrl + F, typing <b:includable id='nextprev'>, after you found, will shown like the picture below.
<data:newerPageTitle/> is the tag that gives the appearance of Newer Post text link
<data:olderPageTitle/> is a tag that gives the appearance of Older Post text link
<data:homeMsg/> is a tag that gives the appearance of Home text link
<data:olderPageTitle/> is a tag that gives the appearance of Older Post text link
<data:homeMsg/> is a tag that gives the appearance of Home text link
The Next you can create the icons of newer, older, and home with the size approximately 32px x 32px. If you are finished uploading these files to your hosting server, then you will get the url link of the three files as such I marked in green color at the script below. Replace the three types of tags above with the script below. For more details let's see the picture below.
<img src='http://agratitudesign.googlecode.com/svn/branches/newer.png'/>
<img src='http://agratitudesign.googlecode.com/svn/branches/older.png'/>
<img src='http://agratitudesign.googlecode.com/svn/branches/home.png'/>
<img src='http://agratitudesign.googlecode.com/svn/branches/older.png'/>
<img src='http://agratitudesign.googlecode.com/svn/branches/home.png'/>
To adjust the align of the position of the third icons sets above, there is any CSS script on the skin of the template as shown like below
To adjust the position of newer post icon that we just created
#blog-pager-newer-link {float: left; margin-left: 13px;}
To adjust the position of older post icon that we just created
#blog-pager-older-link {float: right; margin-right: 13px;}
To set the appearance of older home newer navigation in general, as well as the block color you can set by yourself.
#blog-pager {background: #d1e8ff; padding:5px; text-align:center;}
I suggest you on every times you change the template, you should back up the template first as an xml file. To avoid something that are not desirable. Good Luck!Related Articles
Thank you for sharing superb information. Your web-site is so cool. I am impressed by the details that you have on this website. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for more articles.
ReplyDeletewebsite design