How to Add Services Page in Blogger
Hi to all, in this article I am going to tell you all about how to add stylish grid style services or categories section page in blogger website easily in just few minutes.
This grid style layout will help you to showcase your important services using heading, paragraph and SVG icon. This is completely made with HTML and CSS only.
By adding this you an also show your providing services to your website visitors so that they can contact your if they are interested to your services.
This section is fully responsive i.e. mobile friendly and looks professional. You can easily boost your conversion or boost page visits to your website important pages.
So, read below provided steps carefully to get clear understanding about adding stylish services page with icons in your blogger website without any issue or error.
Steps to Add Services Page in Blogger
Login to Blogger Website
First of all you need to visit official blogger website.
Now you need to login to your blogger website dashboard by using your login credentials.
Backup Blogger Theme
After sign-in to blogger website dashboard, now you need to take a backup of your blogger website theme, if any issue occurs while saving the code then you can restore the theme again and can run your blogger website as usual and if you want to backup your theme then follow below provided path.
Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download -> Verify captcha -> Save the downloaded file in a safe place for future use.
Open Blogger Theme Editor
After successful backup of your blogger theme you need to open blogger theme editor to add code inside it and to open blogger theme editor you need to follow below provided path.
Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.
Adding CSS Code
Follow below steps to add CSS code:
- Open Blogger theme editor.
- Search for </head> or <!--<head/>--></head>.
- Now copy below provided CSS code.
- Paste the copied CSS code above </head> or <!--<head/>--></head>.
- Now click on save button.
<style>
.tw_GRID_heading{box-sizing:border-box;min-width:0;color:#07070a;font-family:Inherit;font-weight:600;line-height:1.25;-webkit-letter-spacing:-0.025em;-moz-letter-spacing:-0.025em;-ms-letter-spacing:-0.025em;letter-spacing:-0.025em;font-size:2.25rem;margin:0;font-size:2.25rem;line-height:1.25;text-align:center;}.tw_GRID_heading a{color:#191924;}@media screen and (min-width:40em){.tw_GRID_heading{font-size:3rem;}}@media screen and (min-width:40em){.tw_GRID_heading{font-size:3rem;}}
.tw_GRID_paragraph{box-sizing:border-box;min-width:0;font-size:1.25rem;margin-top:0.5rem;text-align:center;}.tw_GRID_paragraph lead{font-size:1.25rem;}@media screen and (min-width:40em){.tw_GRID_paragraph{font-size:1.5rem;}}
.tw_All_GRID{box-sizing:border-box;min-width:0;grid-auto-flow:dense;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));font-size:1.125rem;margin-top:2rem;grid-gap:1rem;}@media screen and (min-width:40em){.tw_All_GRID{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.5rem;grid-gap:1.5rem;}}@media screen and (min-width:52em){.tw_All_GRID{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:3rem;grid-gap:2rem;}}
.tw_single_grid{box-sizing:border-box;min-width:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;text-align:center;border-width:1px;border-radius:0.375rem;padding:1rem; border: 1px solid grey;
background: #f4f4f4;}
@media screen and (min-width:40em){.tw_single_grid{padding:1.5rem;}}@media screen and (min-width:52em){.tw_single_grid{padding:2rem;}}
.tw_icon_background{box-sizing:border-box;min-width:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background-color:#06f;color:white;border-radius:9999px;width:4rem;height:4rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.tw_icon_svg{box-sizing:border-box;min-width:0;width:2rem;height:2rem;fill:currentColor;width:2rem;height:2rem;}
.tw_single_heading{box-sizing:border-box;min-width:0;color:#07070a;font-family:Inherit;font-weight:600;line-height:1.25;-webkit-letter-spacing:-0.025em;-moz-letter-spacing:-0.025em;-ms-letter-spacing:-0.025em;letter-spacing:-0.025em;font-size:1.5rem;font-size:1.5rem;margin-top:1rem;margin-bottom:0;}.tw_single_heading a{color:#191924;}@media screen and (min-width:40em){.tw_single_heading{margin-top:1.5rem;}}
.tw_single_paragraph{box-sizing:border-box;min-width:0;margin-bottom:0;}.tw_single_paragraph lead{font-size:1.25rem;}
.tw_icon_svg svg, .tw_icon_svg svg.line{
fill: #d7e1ec;
stroke: #d7e1ec;
}
.darkMode .tw_single_grid{
border: 1px solid grey;
background: #2f2f2f;
</style>
Adding HTML Code
Follow below provided steps to add HTML code:
- Create New page or open existing page.
- Now change compose view to HTML view.
- Now copy below provided HTML code.
- Paste the copied HTML code inside the page.
- Click on publish or update.
<section class="tw_CSS_GRID">
<div class="tw_GRID_container">
<h2 class="tw_GRID_heading">Our Services</h2>
<p class="tw_GRID_paragraph">Explore our web development services.</p>
<div class="tw_All_GRID">
<div class="tw_single_grid">
<div class="tw_icon_background">
<svg class="tw_icon_svg">
<svg viewbox="0 0 48 48"><path d="M45,10H44V9a2.9,2.9,0,0,0-3-3H24V5a3,3,0,0,0-3-3H3A3,3,0,0,0,0,5V45a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V13A3,3,0,0,0,45,10ZM24,8H41a.9.9,0,0,1,1,1v1H24ZM46,45a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V5A1,1,0,0,1,3,4H21a1,1,0,0,1,1,1v5H12v2H45a1,1,0,0,1,1,1Z"></path><path d="M30,19v2h3.59l-7,7H18a1,1,0,0,0-.71.29l-6,6,1.41,1.41L18.41,30H27a1,1,0,0,0,.71-.29L35,22.41V26h2V20a1,1,0,0,0-1-1Z"></path></svg>
</svg>
</div>
<h3 class="tw_single_heading">Fast loading</h3>
<p class="tw_single_paragraph">We can help you optimize your website by compressing CSS & Javascript.</p>
</div>
<div class="tw_single_grid">
<div class="tw_icon_background">
<svg class="tw_icon_svg">
<svg viewbox="0 0 48 48"><path d="M45,0H3A3,3,0,0,0,0,3V35a3,3,0,0,0,3,3H16v4.28l-2.32.77A1,1,0,0,0,13,44v2H11v2H28V46H15V44.72L17.16,44H28V42H18V38H28V36H3a1,1,0,0,1-1-1V29H28V27H2V3A1,1,0,0,1,3,2H45a1,1,0,0,1,1,1V18h2V3A3,3,0,0,0,45,0Z"></path><path d="M46,20H32a2,2,0,0,0-2,2V46a2,2,0,0,0,2,2H46a2,2,0,0,0,2-2V22A2,2,0,0,0,46,20Zm0,26H32V43H46Zm0-5H32V27H46Zm0-16H32V22H46Z"></path></svg>
</svg>
</div>
<h3 class="tw_single_heading">Fully Responsive</h3>
<p class="tw_single_paragraph">We help you build a fully responisve website for better speed and conversion.</p>
</div>
<div class="tw_single_grid">
<div class="tw_icon_background">
<svg class="tw_icon_svg">
<svg class="line" viewbox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg></svg>
</div>
<h3 class="tw_single_heading">SEO Friendly</h3>
<p class="tw_single_paragraph">We make SEO friendly template with proper breadcrumbs, schema data included. </p>
</div>
<div class="tw_single_grid">
<div class="tw_icon_background">
<svg class="tw_icon_svg">
<svg viewbox="0 0 48 48"><path d="M43,0H5A5,5,0,0,0,0,5V43a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V5A5,5,0,0,0,43,0Zm3,43a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V5A3,3,0,0,1,5,2H43a3,3,0,0,1,3,3Z"></path><path d="M25,11.1V6H23v5.1a5,5,0,0,0,0,9.8V42h2V20.9a5,5,0,0,0,0-9.8ZM24,19a3,3,0,1,1,3-3A3,3,0,0,1,24,19Z"></path><path d="M37,22.1V6H35V22.1a5,5,0,0,0,0,9.8V42h2V31.9a5,5,0,0,0,0-9.8ZM36,30a3,3,0,1,1,3-3A3,3,0,0,1,36,30Z"></path><path d="M13,26.1V6H11V26.1a5,5,0,0,0,0,9.8V42h2V35.9a5,5,0,0,0,0-9.8ZM12,34a3,3,0,1,1,3-3A3,3,0,0,1,12,34Z"></path></svg>
</svg>
</div>
<h3 class="tw_single_heading">Ready-to-use</h3>
<p class="tw_single_paragraph">Our website design is super professiona and you can easily use the site.</p>
</div><div class="tw_single_grid">
<div class="tw_icon_background"><svg class="tw_icon_svg"><svg class="feather feather-code" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></svg>
</div>
<h3 class="tw_single_heading">Pro Plugins</h3>
<p class="tw_single_paragraph">Unique social sharing plugins, custom designs and contact page builds.</p>
</div>
<div class="tw_single_grid">
<div class="tw_icon_background">
<svg class="tw_icon_svg">
<svg viewbox="0 0 48 48"><path d="M46,30.18A3,3,0,0,0,45,30H33a1,1,0,0,0-1,1v5H16V31a1,1,0,0,0-1-1H3a3,3,0,0,0-1,.18V3A1,1,0,0,1,3,2H22V0H3A3,3,0,0,0,0,3V45a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V26H46ZM46,45a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V33a1,1,0,0,1,1-1H14v4H10v2H38V36H34V32H45a1,1,0,0,1,1,1Z"></path><path d="M35,26A13,13,0,1,0,22,13,13,13,0,0,0,35,26ZM35,2A11,11,0,1,1,24,13,11,11,0,0,1,35,2Z"></path><path d="M34,8.41V16a.92.92,0,0,1-1,1H31v2h2a2.92,2.92,0,0,0,3-3V8.41l2.29,2.29,1.41-1.41-4-4a1,1,0,0,0-1.41,0l-4,4,1.41,1.41Z"></path></svg>
</svg>
</div>
<h3 class="tw_single_heading">Updated regularly</h3>
<p class="tw_single_paragraph">We always update the template regularly and add features or fix some bugs that appear. </p>
</div>
</div>
</div>
</section>
You have successfully added the stylish grid style services or categories section page in your blogger website without any error or issue.
Note
If you get any error while saving the code in theme editor, then you need to restore your backup blogger theme and need to repeat the same process as provided ion above steps carefully.
If you want to change the icons in the services section then you need to change the SVG icons in HTML code and for SVG icons you an refer below provided websites:
If you want to change the style and color of the services section then you need to modify CSS given above.
For changing colors you need to replace color codes and for color codes you can use google color picker or any other third party color picker website.
Conclusion
I hope that you have understood about adding stylish grid style services or categories section page in blogger website easily in just few minutes by using Simple HTML and CSS.
