When comparing blogger Previous Next links with other website or blogs they feel pretty old and basic. But don't worry you can customize them easily with adding some CSS codes. You can easily convert them into the buttons. Checkout below pictures of before and after customization.
Customization:
So, let's start customization of new-previous links :
Step 1 : Go to Blogger > Theme(Template) > Edit HTML.
Step 2 : Click anywhere in codes , Press Ctrl + F and search for ]]></b:skin>
Step 3 : Just above ]]></b:skin> paste the below codes.
.blog-pager-older-link {
font-size:18px;padding:2px;border: 1px solid #000000; -moz-border-radius:6px; -webkit-border-radius:6px;background-color:#0055ff;color: white !important;font-weight:bold;}.blog-pager-older-link:hover {font-size:18px;text-decoration:none;padding:2px;border: 1px solid #000000; -moz-border-radius:6px; -webkit-border-radius:6px;background-color:#007bff;color:#000000;font-weight:bold;}
Step 4 : Save Theme (Template), That's all.
.blog-pager-newer-link {
font-size:18px;padding:2px;border: 1px solid #000000; -moz-border-radius:6px; -webkit-border-radius:6px;background-color:#0055ff;color: white !important;font-weight:bold;}.blog-pager-newer-link:hover {font-size:18px;text-decoration:none;padding:2px;border: 1px solid #000000; -moz-border-radius:6px; -webkit-border-radius:6px;background-color:#007bff;color:#000000;font-weight:bold;}
Customization:
- Change blue background text with your desire color code to change border color of buttons.
- Change yellow background text with your desire color code to change color of buttons before hover.
- Change green background text with your desire color code to change color of buttons on hover.
- Change red background text with your desire color name to change color of button text,
