Posts

Showing posts from May, 2020

Adding Home Older Newer Post Buttons in new Blogger templates such as Contempo

Image
Requirement: Add Home, Older, Newer Post Buttons in new Blogger templates such as Contempo.

Solution:
Hi for this jump to Blog widget in HTML editor of your template and find and replace code in includables with respective id's with the ones given below also change the order of buttons as shown below in postPagination includable as per your needs.

Code given below shows button in this order  Older Posts Home Newer Posts
Demo: Can be seen by clicking here and scrolling to end of page.
Screenshot:


Note: First page will display only Older posts button as there is nothing to go back when we are on landing or home page and the last page will display Previous posts button and the Home button as there is nothing left to go forward.
Displays buttons in order provided here in frontend ,ID to search postPagination: <b:includable id='postPagination'> <div class='blog-pager container' id='blog-pager'> <b:include cond='data:newerPageUrl' name=&#…

Converting blogger HTML tables into Smart Responsive tables using CSS

Image
Requirement: Make all HTML Tables in Blogspot responsive ,pretty & a bit smarter.
How: Its 2 step process.
Add CSS for styling to templateModify your Table Structure accordingly. Here is the link  of the post having table with formatting provided below to see things in action, try changing size of browser to see how it adapts to various screen sizes.

Here are some screenshots as well:

On Desktop:
 On Mobile/Tablets/Phones:

Steps:1:Add the following CSS code in template from HTML editor:
<style> table { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; } table caption { font-size: 1.5em; margin: .5em 0 .75em; } table tr { background-color: white; border: 1px solid #ddd; padding: .35em; } table th, table td { padding: .625em; text-align: center; } table th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; background-color: white; } table td {border-left: 1px solid #d…

Popular posts from this blog

Enabling fixed Sidebar for blogger Contempo template for screen sizes smaller than 1440px

Adding copy to clipboard button to every google code prettify pre blocks in blogger

Solution: More Posts & Posts Links not working with Adsense Anchor ads on Touch screen mobiles in blogger

Query to Expand and List All logins within a SQL Server Group

Powershell script to automatically send HTML emails using gmail smtp

Adding code prettify to Blogger