How to Edit Home, Older Posts and Newer Posts Links in Blogger

-
As a Blogger user, you may have seen Older Posts, Home and Newer Posts links at the bottom of your homepage. They help your readers to navigate through your posts and to go back to homepage if they need. Technically this whole element is known as Blog Pager and links called as navigation links. Without a clue you know where those links are heading to by their text labels. But except for default link view, you might wanna give more color to your navigation links by changing text or replacing relevant icons or images. But do you know how to edit its text or replace it by a relevant image as you prefer?

May be you are like the way it is with default labels and text links it has. But you may wonder how to change it too. Wouldn't it better if you can change label with more descriptive text or relevant and eye catching icon or image? Yeah, your readers will love it and they can easily find your navigation links too. Absolutely, it will add more color to your blog. You can easily edit them as you need and else if you gonna add custom navigation pane, you may need to remove current blog pager first. Here you can find how to respond in either of scenarios without being confused. Shall we?

Steps:

1. Navigate to Blogger Dashboard.

2. Click on your Blog Title.

3. Navigate to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML button.

5. Make sure you are tick on Expand Widget Templates option.

6. Now select a topic below as per your requirement.

Hide Home, Older Posts and Newer Posts Links

Here we are gonna edit CSS style corresponding to Blog Pager.

i. Find CSS style named .blog-pager in your template.

ii. Add display:none; style attribute into CSS style as below.

.blog-pager {
  background: $(paging.background);
  display: none;
}

Change Home, Older Posts and Newer Posts Links

All you have to do is finding layout data tags corresponding to each link and replacing them with whatever you wanna display instead of current link text.

i. Find the layout data tag corresponding to each link in your template.

Home - <data:homeMsg/>

Older Posts - <data:olderPageTitle/>

Newer Posts - <data:newerPageTitle/>

ii. Now replace the layout data tag with the text or image you wanted to appear.

Note: You may wonder by having two results for each layout data tag. Just select the first resulting tag when you gonna modify.

i.e: If you need to change Older Posts link with text or image, just find corresponding layout tag, which is <data:olderPageTitle/> in your template.

... expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

Then replace it with your text

... expr:title='data:olderPageTitle'>[Your Text]</a>

Or else with your image

... expr:title='data:olderPageTitle'><img src='[Your Image URL]' title='[Title of Your Image]'/></a>

Color Indication Information

   - The text you wanna replace with

   - The URL of the image you gonna use to appear instead of existing link

   - Add title for the image if you prefer and it will be displayed whenever an user points their mouse over your image


7. After changing or hiding Home, Older Posts and Newer Posts links, Preview your blog and click on Save template button.

Comments

Post a Comment

Popular posts from this blog

Auto Scroll in Common Controls

-
This example shows, how to programatically autoscroll WinForm controls TextBox, ListBox, ListView, TreeView and DataGridView. Autoscroll to the end of box or view is useful. For example, in situations when you use one of these components as the output log window. Usually you add the items to the box or view and you want to be sure that the recently added item is visible without the necessary to do it manually. Though it is not difficult to solve this problem, .NET doesn't provide any unified way how to do it. TextBox autoscroll Code: textBox1.SelectionStart = textBox1.Text.Length; textBox1.ScrollToCaret(); ListBox autoscroll Code: listBox1.SelectedIndex = listBox1.Items.Count - 1; listBox1.SelectedIndex = -1; ListView autoscroll Code: listView1.EnsureVisible(listView1.Items.Count - 1); TreeView autoscroll Code: treeView1.Nodes[treeView1.Nodes.Count - 1].EnsureVisible(); DataGridView autoscroll Code: dataGridView1.FirstDisplayedCell = ...
Read more

Convert typed library (.tlb) to .net assembly?

-
Sometimes we have to use the legacy code(C, C++) in .Net projects which is provided by third party vendors. Most of the times these guys will provide, equivalent .net framework typed library (.tlb) of that legacy code. Then, how to refer those in our .net projects and make use of functionality provided by it?   Follow the below steps, Keep ".tlb" file which is nothing but legacy typed library Open windows command prompt Go to directory, " C:\Program Files (x86)\Microsoft Visual Studio 8\SDK\v2.0\Bin " or     "C:\Program Files\Microsoft Visual Studio 8\SDK\v2.0\Bin". It depends on which version of visual studio you had. Enter the following and execute, TlbImp.exe "E\MyLibrary.tlb" . Here, replace "E:\MyLibrary.tlb" with path to your tlb file. It will import the .net framework type library to assembly.i.e, .dll and it can be found at path "C:\Program Files (x86)\Microsoft Visual Studio 8\SDK\v2.0\Bin" with name ...
Read more

Disable close button on form - C#

-
In one of my projects, I had to implement a form with Close[X] button Hide, so that the user cannot leave the form until it finishes the data processing. From the form designer window in VS.Net 2005, it is possible to hide the Minimize box and Maximize box. But there is no property called Close or CloseBox. Then I had tried with by setting form property ControlBox = false . With this i am able to achieve hiding the Close/Minimize/Maximize buttons. But at the same time there is a side effect.i.e., Form icon(which is generally displayed on form title bar)  also hidden.  So after little bit investigation came up with the following hack to get,  i)  disable the close button  ii) displaying the form icon To achieve this, we have to override CreateParams property of Form base class as follows, Code: private const int CP_DISABLE_CLOSE_BUTTON = 0x200; protected override CreateParams CreateParams { get ...
Read more