Next and Previous button images

This is a follow up post to the Remove Next / Previous links and replace them with images that seems to be popular on this site. As there are limited buttons available for this function I thought I would share with everyone the small collection of buttons that I have available. I have found these buttons on the Internet so they are not ones I have made myself, nor can I claim them as my own. Some of the button sets also have additional buttons to the set. Below each set are the code for each button - feel free to use them on your own blog or website.

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZAG2W-WXNyLeo8P-xrkiROqoMEicx-kevJl6AeeP3ZrwEUGiPXREbAWr9P-LKInB4XnMbcydwqoDS-giH_jGEdZ-CXtriRdJbUwd8xiyh95PP9yG1paREB2XIvVBNaoWJNafYrtLYT_8/s48/arrow_left_48.png' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqxGbuGtPylQuHVkc9M-pmc1nKUe2L7VNhJg_jHPE1n9ub2hWf1gadzeT_TPraSmTD1ZvYwhwMwy0Orm2Ba7OZf6N4z9o-66_ftnXq6efYgkUUCjB5K8hnZCktj0evG_zIxet4OKMdmEA/s48/arrow_right_48.png' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqvxI-JNBuzznwspMsEbFCrtnLKcMUVkocyrotf_UIyJDa8fNDKiyb_1Gbxb57PgGS0U3EluJwB6DBFcpcm5kS2VO56hQKuq5YAj1C7AIX_3WiKP2Nk-0b0nCiOKAFncqwdZfIgyVSRM/s48/b_back.gif' />

MORE STORIES BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyP_vXxjY3RmrxhG0CM4aZpX2L4x2qwz_c3or9M_BaDkq1jvvEdGL7Hb_DpzzhIsEi1ZC5q3WtVshAZEd_IfiXLGGN4xP-5_JNWoWLnYVPwZ9aOtssJOzCqIUDejPrGmncde7rL3wiYm8/s112/b_end.gif' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiSDdcGZjKZpgKVWSF7teIEZXe-9Xo9PtvD3Co5I165fI8YCgANTvRUAOzWhj4YY5ipaHae8w5_C9rcDiKBYpB1olpR7s4jVHZkkgpUw224HKFfen0R5PaVAksz1PlqQlv1Lpd1tiitbE/s48/b_next.gif' />

RED PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1mIn3LTRJ6M1R_9XbkMsR_Tyt1kIyPISn3mfTe5FKWmqfx5Nyeq9uR-hrBuXqvPWPT0EOGzbgxp9vES56ebfo5JadRrxych2RVZXSy4YVAmsxZZ226u951d5AjYYxbpkfvq6HmFfDu6w/s184/Back%252520Button%252520%2528norcastle%252520red%2529.png' width='100px'  />

BLUE NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQuupYN3bsNwQGT-aA5mc69Bu84Reg5xhEmOs1FdCOZKy9BHncEquI2XQSI1gOQVTIzrYUsay26IAS_hyphenhyphenKJ9QXNRzrU3bazM3Xs3ZWAX1q4juC1mW4VASQ79s0Yj1tv6edlzI7WMkQ8I/s147/imagesCAPYHR3G.jpg' width='100px' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuOQOaieuiriutJ-qS9631NHnxgHn2k8nB8Iq1E_hikFa5nC7Iil8NOPtDrNk7t9GKQjVpSD9JxjA4mBAm77szzGfVpCjpPtFP6X99rLrzc_NNM6O3Be82ZxTgzXiuFAt2bSMgMc0YCc/s150/back_button.gif' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC70gSB-ncF59g59lTr9WWSrs5laHJANMQ8a5XZicrhVLCfXpauAhvNatkrxvdnBs0rkmCH_CupN2yinIiDcJeBiEp1an048jEqPSMw9vlpIwvGhABEDK8gBm36ZgKgGvYHvJ_98CsrjM/s150/imagesCA13IC60.jpg' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1SXwjxmsObIV_PMH33bDsK6OwlX04_3__WQ9jx4Wn8Q6BlljmnJraceByNMINZZrklKu3OAjRjawz5fOsAsVZuVQzb-fKk-ZFypWqEwIv6ceA2WDrzz9nMj5NlVQPLVaM-5aqwZ8nUs/s43/back_button_selected.gif' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPsDnBRybyeOPEJcrIJIsWDBuqSAcC2XBY5f6NB3o568VLI_FHOHWDhbI5iXrj1jpVsdANPJXaL-1DkWwxBuZj2TZEyI8cpn_3Nx-YTfmW8i9xat7nAUWxB-M9m31slEXxHetFfmOWgxo/s43/next_button.gif' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbpgQasvb8u_8-857lMfGjJZvrPVL3SFmsPFJOCvaF4j2JEBC-m4FlsAiS_tY43YQnMjwLR3_VIq3pIy64QBLXzM669EbV3g96I2qe6HhrUuCGKDLERHAfOlu67i7n3RzqqUFuYy1k8Ag/s205/Backbutton.gif' width='80px' />

HOME BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMrGaB4JygNLsRvtRlv9A5oOsV4aaoCFUE9SAlS_OhCHNYapu_KHEWuxVzaQqzwhldpGpHzdhk__GFxiX28D663fSZ04jhlr3JTwWSk1FkcCEcS2AEROUiFhLZ_QpwUIEYe1G4Q9rs8c/s169/mainpagebuttom.jpg' width='80px' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibV0vqf_hW04z9w0t8IViYF6rfWMg2BMLf0WoXg0Lw9cAwsb_nr1siCbIZX0AD3Ud5EKG1TjuNboCBqsnCUy04huoAp7dTB8ebrLormbgwme6AZOzSU6osAIPd7tCcPkp8gZfmSRt5LpE/s163/imagesCA6O90S8.jpg' width='80px' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9t4T6IiBc1RbLb2CiFdxff-RxYZRIOToVWAkyIKIVanhpyIQlJuakDMWdqtm_OMX6vqfxHWRSDnoYDbNP2dOrCIZPu0TR_dnH9n0XCOAaP_7s4FKUEb5uhyphenhyphenpgl6RnNlQXlZ8G2JRvsU/s105/previous___.png' />

HOME BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifuqZl1oeVfN0I3dcvuHylwxX1FSFWQ0K3PHGmU4mr9J9ZLsK2huP05SBHE01oWtPEq5xErZpjLg0WTu8umx64zlPde_pmYWmTFowhgPG6Rb-1kiQvpr5e971SrOl0c4bCcy7zV50Pi6Q/s146/backtohome.png' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaPfPpRXrmG80U5PwiAZhPugLWB6-YJnUJ5TK_wuEUZrSfAYft-T_JYhzhJoC8MiqKLKEhO9K3lnxmeeTWODTUVfcJguvG2aBSN9ovc6u-_AJafHX-XShkklF1-LCjAxXQNG2YAFzpLI/s71/next___.png' />

BACK TO TOP BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-BECuwF6mTu46kEwIHOm0YuPDChZM3yq7bEXZ5xhORtaDTuOMQi0GagxA4MrjdsniBwkSgAJfg6l_VC5t-YsoAOUIS6D7oiIUuomWst-zKCoGuAvRk_kS1-15HzaZqjiooZOAVThvm-Y/s167/2000Post.png' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW3kOr4pLcnEzexq2RYUsVHUXaXxFYFKrpU2Kjt1YktSHjboIFVVfbbolz-GH-TPdL_sqx3R7f8TjccLfP3RgDV_d5lyjFg5rDJCUCMVb2PXyZeSmbt4PflGsmo64ym0DSWyG94HuSpGY/s48/back_buttons.gif' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcO08f8oh9AJeaM5wmCzvgOLDjoFUY1-lLMynVpe46lWGjO_0LRJo7FWrhzeLt3QTnplHiShNpCo0tGMFHhl2lFnzvC5Y_67M4IGpWFlcjcU1f8FuAFgL5ouTbQC2dLk0BW19GtIqweY/s48/next_buttons.gif' />

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0XN8etlBeF0iW2R9hVggkMLEsS8pviKVhBD5rN9_LAQRwVJCCl16Hj8M-3l6NLVRHGBf0bxzRdVkGJUjhwkyYbZrTTsrDu-Zw7PSBBM07LWXXWBDEUHJ7WxqHOs8PNbE16Y1zTPBIXl8/s56/buttonBack%255B1%255D.gif' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1dRQyB8-22d_nFGDfC6elF9nPPQeQ5ml-cKyqjN9zJfm8khWpWRaS_SScxMTCki08m_qjGz-s6oDzpRujTFdsMFxHeZs_Jvh4ZqgTJyG_R0kTXCVjg3vc_CFeWhursW2aWZ8XZORBtaI/s56/imagesCAJ9SHO0.jpg' />

 

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqoAjFenHrG8unjvq3tsQCeQRIZlM-NhDWu5CrdpE-whmqKwJXWQ_dnmDUvsxowqSLM3dFdeJdRyB61AKJad0bKFR-RqocTpcvC7zbau1OizlKX1j6o5oy6KFOX3UZQQrkRNF0FZuaSg/s54/PREV.jpg' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkjgArvR8fNqdgHoA9tKg2roBfL-OrxxPc6DStm6XZhabTMikXK_GaIOwuVgOC8o0ONLD3PCgJgnrtPw6nN4ZTWeG0WImy3HYWo218B_mB1dHdtWY_yKYJR_6ZnDaVdvVQ0nLUdcTuogo/s54/NEXT.jpg' />

 

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaV-WMRza2FrFAcqYFUElsVn6gxBOjxFRqCIE7vmV7Dn6Prn8q5UmzxzS4dTfN0u_YRA5gRLLgetFlcvEBZvQIKTS0qxQdYumfHr1cAkIIT6X0jFb4pL3MoWcnArgX6LFwonM2rk6d8Y/s79/previous-red.png' />

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJ2oyJnxvjfoQwi0rSnFC9q1vkbOP-Nj_nWxZhjI6F659FtJGjNO6TB7kMXX1qnHHFCsn1QolXfvXjxn6pJZpRfZB7mIAsV_lnn0p1Tjq_dx7TyiSUVPlW_SXepY_JY3CnHtaOkGB9Pc/s79/next-red.png' />

 

PREVIOUS BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKh10lMMjCGw7cllc6hQX2NZF6_uVlVnBkrNjZVeoegGLV901472L4V-zLHG7pgX3v735y_4wJObDbIcc7WyLSIFwHfK35C0d5mKwm9MTUogFdJYwrKAZ0k26XBrxLb28SGrPRlS5updw/s62/sm-previous-red.png' /> 

NEXT BUTTON: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZNzuCHeBDG34c98kXlidQDGCwJ-FDKuhB3VdvfHVTILxxFzPbBbyN1JoKOVU3acEnMp6Z-OpM5YQ3vQY0aJJrlRmhWXCLoqtkjlGRy_fzNcNuca0UHJrVgn_u3uFSUZgaozQmvVAWTbY/s62/sm-next-red.png' />

>> About half of these buttons are best placed on sites with a white background.

How to add and make a 'Go to bottom' button work on Blogger

Live-Demo of this button is at the top right corner of this blog.

Let's say you already have a 'Back to top' button and want to add a "Go to bottom" button as well. I just tried doing this and after many attempts I finally found a way to make it work. I cheated a bit but it works on Internet Explorer, Google Chrome (the button is a bit sticky in Google Chrome - you need to scroll down from the top of the page a tiny bit before the button works properly) and Firefox web browsers. It is a really simple solution too. Normally you are supposed to write #footer as the link url or #bottom but none of those commands work. Various other combinations also don't work. What did work was I made the link url go to the bottom most widget on my blog. I located the widget's ID added the standard # symbol before it and pasted them both into the link url section.

Here is the code for the go down to bottom button code:

<a href='#Attribution1' style='display:scroll;position:fixed;top:4px;right:2px;'><img alt='Scroll to Bottom' height='31px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzGHsP2XjfG1wy17dtwMU6zjA6KEk5sxKAnrdtK-jP84ihEs1TeQSoikxfJqhhv8BMS0ZjuTNY6jCabLXeqGUgFUmBj4vz7uz5jt7vBKaw_H79AEG8iUX3HOpQhVnr4-rFcBmSw_3buQh/s16/button_down16.gif' width='31px'/></a>

The red text in the code above is what you need to change and the only thing you need to change in the code. All that you do is scroll down and locate the bottom most part code for your footer.
For example:

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>    
</div>  
</div>    
<div class='footer-cap-bottom cap-bottom'>      
<div class='cap-left'/>      
<div class='cap-right'/>    
</div>    
</div>    
</footer>

Do NOT copy the footer code displayed above this text. You are ONLY supposed to be locating it in your own template. In the above footer code the widget's ID is in blue. That is the widget ID code you need to look for, with whatever widget is at the very bottom of your footer. It is the same code you need to copy and paste into the link url section.

Where to put the code in your template.
When you copy the top lot of code above go to your edit template page. Do NOT tick the expand box. Scroll all the way down to the bottom of the template and you should see:

</body>
</html>

If you don't see the </body> at the very bottom don't panic. Paste the code directly before the </html> tag.

In other words, the code needs to go AFTER the </body> tag and DIRECTLY BEFORE the </html> tag. Every template is different so you need to find at least one of those closing tags at the bottom of your template. Paste the code into your template then click on "Save template".

That's it. Feel free to use the above code on your own blog.
I've hosted both the button images on my Picasa Web Album so you don't have to host it if you don't want to.

There is a matching "back to top" button if interested. The code for it is below.

<a href='#' style='display:scroll;position:fixed;bottom:4px;right:2px;'><img alt='Back To Top' height='31px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6WJ6RRDe31_hZ62gMjUvs2c36qFRJMjsBUmxmeivNX0_cXGlhNJMxYs1tVNqvf0ubC5Z55hGm_PxY5K5kgkst6PIoBsJDRflHLVrqIwKvTj2ANzIRJuXaVbMdOLuR7zsILoibZ0HpQ1ES/s16/button_up16.gif' width='31px'/></a>

REMEMBER: IF YOU FORGET TO ADD THE # SYMBOL BEFORE THE WIDGET'S ID AS THE URL, THE GO TO BOTTOM BUTTON WILL NOT WORK.

Remove Next / Previous links and replace them with images

Let's start with something simple by adding a next and previous button image and remove the "older" and "newer" links.

This tutorial is a little bit tricky but easy enough to do. Firstly, go to your "edit template" page and click on "expand template".

Now, there should be a main wrapper code but if there isn't look for the following lot of code or something similiar, which will be at the very top-most lot of code for the next/previous links in your template:

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

In the above code find the code in red and replace it with the following bit of code:

<img align='left' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZVAZM6erwrHxxqwBJ88_rfmtiDpJfT80ZAIgLrJ9dOvly123SAot0GnQPhunEE-8qW7ZuklTLhEhpsIslBgrHpPWT_qupplGRYta83MsbuCTT6MIBJpxpxEdZbWgc7jJn0I0RRYsZ7ZV/s97/previous.jpg' style='margin:-3px 0 -5px 0;'/>

Then, find the code in blue and replace it with the following lot of code:

<img align='right' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3zeRPlfjNcyqZ1mHjOVjd3sws1vukQdpMdYM9sV8XGy1O-KyeBjpIxInwnso0j8HLW598QL400Lh85l60nQKnQs3P3cWIakjQtFAqiYhHTiXx-igryKRyywMSCZGBeIm_uI_7sfzu0i-6/s97/next.jpg' style='margin:-3px 0 -5px 0;'/>

Then locate the css code for the blog pager, newer link, and older link near the top of your template and change it to the code below:

#blog-pager {
  background:#000000;
  text-align: center;
  padding:8px 0 10px 0;
}

#blog-pager-newer-link {
  float: $startSide;
  display:show;
  margin-top:0;
  margin-left:10px;
}

#blog-pager-older-link {
  float: $endSide;
  display:show;
  margin-top:0;
  margin-right:10px;
}

Preview your template and if it looks great, then save your template. Sometimes the home link in the blog pager will be out of alignment, but with this tutorial the blog pager's padding is out of alignment a little bit when you click on the older link on your blog. It's only off by one or two pxs though.