Want to showcase your services in a creative and beautiful way?
Let me share this beautiful our services widget that can be easily implemented in your blogger blog.
The widget comes with 6 service boxes and each box contains svg icon, title and description. I have not made service box clickable because it is just for displaying your services. You can simply enclose each box with anchor <a>..</a> tag in case you want to make them clickable.
Just a reminder to my readers, I recently shared this beautiful hero header that comes with design and buttons. Do check that out as well.
Alright. Let's get started.
Here is the demo of how our services layout will look. It is best to show this element in homepage.
You can also check this codepen link to test it live.
You have the permission to share this code but it is mandatory to link this page. Lets play fair. 🤝
(I) Adding CSS for Our Services Widget
CSS styles the structure of your theme. Search for </head> or </head> and add following CSS code above it.
<style>
/* Our Services Layout for Blogger By TwistBlogg.com */
/* Keep Credit Intact */
.hero-services {
margin: 80px auto;
padding: 90px 0;
max-width: 1200px;
font-family: 'Inter,sans-serif';
background: #f5f5f5;
}
.main-title {
font-weight: 700;
font-size: 48px;
line-height: 1.25;
text-align: center;
color: #000;
}
.main-box {
grid-auto-flow: dense;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 48px;
grid-gap: 32px;
}
.inner-box {
align-items: center;
display: flex;
flex-direction: column;
text-align: center;
border: 1px solid #DADADA;
border-radius: 6px;
padding: 32px;
}
.inner-icon {
align-items: center;
display: flex;
background-color: #0066ff;
color: white;
border-radius: 9999px;
width: 64px;
height: 64px;
margin-bottom: 15px;
}
.inner-icon svg {
width: 36px;
height: 36px;
fill: none !important;
margin: 0 auto;
}
.inner-heading {
font-size: 24px;
line-height: 1.25;
color: #000;
}
.text-small {
font-size: 18px;
letter-spacing: normal;
line-height: 1.5
}
@media screen and (max-width: 832px) {
.main-box {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 40px;
grid-gap: 24px;
}
}
@media screen and (max-width: 640px) {
.main-box {
grid-template-columns: repeat(1, minmax(0, 1fr));
margin-top: 32px;
grid-gap: 16px;
}
.main-title {
font-size: 36px !important;
}
}
</style>(II) Adding HTML for Our Services Plugin
This is where we call our services layout classes and tags. Add the following code to desired location for widget to appear or append in 'Add a Gadget' from layout.
<section class='hero-services'>
<h2 class='main-title'>Our Services</h2>
<p class ='text' style='text-align:center'>We can help you with anything related to Blogging.</p>
<div class='main-box'>
<div class='inner-box'>
<div class='inner-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
</div>
<h3 class="inner-heading">Page Optimization</h3>
<p class="text-small">Page Speed is one of the key to rank. Learn how you can achieve a 100 Page Score.</p>
</div>
<div class='inner-box'>
<div class='inner-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</svg>
</div>
<h3 class="inner-heading">Premium Themes</h3>
<p class="text-small">Free + Paid highly customized, SEO optimized and ads ready Blogger themes.</p>
</div>
<div class='inner-box'>
<div class='inner-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up">
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
<polyline points="17 6 23 6 23 12"></polyline>
</svg>
</div>
<h3 class="inner-heading">SEO Guides</h3>
<p class="text-small">Master Search Engine Algorithms and how they rank pages in search results.</p>
</div>
<div class='inner-box'>
<div class='inner-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck">
<rect x="1" y="3" width="15" height="13"></rect>
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
<circle cx="5.5" cy="18.5" r="2.5"></circle>
<circle cx="18.5" cy="18.5" r="2.5"></circle>
</svg>
</div>
<h3 class="inner-heading">Social Tricks</h3>
<p class="text-small">Get ready to impress your friends with latest released social tricks series.</p>
</div>
<div class='inner-box'>
<div class='inner-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
</div>
<h3 class="inner-heading">Pro Plugins</h3>
<p class="text-small">Unique social sharing plugins, custom designs and contact page builds.</p>
</div>
<div class='inner-box'>
<div class='inner-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database">
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
</svg>
</div>
<h3 class="inner-heading">Blogging Tools</h3>
<p class="text-small">Learn what it takes to become a smart blogger and how you can generate revenues. </p>
</div>
</div>
</section>