Hello Everyone, Again Your Welcome in My New Post. Today in this post I will Show you How To Add Stylish Service Section in Blogger website. This Service Section is responsive and highly color filled. This service section has been created with the help of HTML and CSS.
If you have a shop or portfolio website, then you definitely have to add a service section, but if your website is on WordPress, then you will create there with the help of drag and drop and many plugins. But this service section is a bit difficult for the blogger platform.
But no problem, in today's article we are going to tell you right here How You can Add Stylish Service Section in Blogger website. So Let's Get Started.
How To Add Stylish Service Section in Blogger Website
Note :- Before starting this tutorial backup your blogger theme to avoid from any errors and problems.
Step 1 :- First of All You Need to Log-in with Blogger.com.
Step 2 :- After This Click on Theme Menu.
Step 3 :- Now Click on Edit HTML.
Step 4 :- Then Copy the Code Provided Below and Paste it Above the </head> tag in Your Theme.
<style>
.bg-gray {
background-color: #f9f9f9;
}
.site-heading h2 {
display: block;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
}
.site-heading h2 span {
color: #00a01d;
}
.site-heading h4 {
display: inline-block;
padding-bottom: 20px;
position: relative;
text-transform: capitalize;
z-index: 1;
}
.site-heading h4::before {
background: #00a01d none repeat scroll 0 0;
bottom: 0;
content: "";
height: 2px;
left: 50%;
margin-left: -25px;
position: absolute;
width: 50px;
}
.site-heading {
margin-bottom: 60px;
overflow: hidden;
margin-top: -5px;
}
.carousel-shadow .owl-stage-outer {
margin: -15px -15px 0;
padding: 15px;
}
.we-offer-area .our-offer-carousel .owl-dots .owl-dot span {
background: #ffffff none repeat scroll 0 0;
border: 2px solid;
height: 15px;
margin: 0 5px;
width: 15px;
}
.we-offer-area .our-offer-carousel .owl-dots .owl-dot.active span {
background: #00a01d none repeat scroll 0 0;
border-color: #00a01d;
}
.we-offer-area .item {
background: #ffffff none repeat scroll 0 0;
border-left: 2px solid #00a01d;
-moz-box-shadow: 0 0 10px #cccccc;
-webkit-box-shadow: 0 0 10px #cccccc;
-o-box-shadow: 0 0 10px #cccccc;
box-shadow: 0 0 10px #cccccc;
overflow: hidden;
padding: 30px;
position: relative;
z-index: 1;
}
.we-offer-area.text-center .item {
background: #ffffff none repeat scroll 0 0;
border: medium none;
padding: 67px 40px 64px;
}
.we-offer-area.text-center .item i {
background: #00a01d none repeat scroll 0 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #ffffff;
font-size: 40px;
height: 80px;
line-height: 80px;
position: relative;
text-align: center;
width: 80px;
z-index: 1;
transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
margin-bottom: 25px;
}
.we-offer-area.text-center .item i::after {
border: 2px solid #00a01d;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
content: "";
height: 90px;
left: -5px;
position: absolute;
top: -5px;
width: 90px;
z-index: -1;
transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
}
.we-offer-area.item-border-less .item {
border: medium none;
}
.we-offer-area .our-offer-items.less-carousel .equal-height {
margin-bottom: 30px;
}
.we-offer-area.item-border-less .item .number {
font-family: "Poppins",sans-serif;
font-size: 50px;
font-weight: 900;
opacity: 0.1;
position: absolute;
right: 30px;
top: 30px;
}
.our-offer-carousel.center-active .owl-item:nth-child(2n) .item,
.we-offer-area.center-active .single-item:nth-child(2n) .item {
background: #00a01d none repeat scroll 0 0;
}
.our-offer-carousel.center-active .owl-item:nth-child(2n) .item i,
.our-offer-carousel.center-active .owl-item:nth-child(2n) .item h4,
.our-offer-carousel.center-active .owl-item:nth-child(2n) .item p,
.we-offer-area.center-active .single-item:nth-child(2n) .item i,
.we-offer-area.center-active .single-item:nth-child(2n) .item h4,
.we-offer-area.center-active .single-item:nth-child(2n) .item p {
color: #ffffff;
}
.we-offer-area .item i {
color: #00a01d;
display: inline-block;
font-size: 60px;
margin-bottom: 20px;
}
.we-offer-area .item h4 {
font-weight: 600;
text-transform: capitalize;
}
.we-offer-area .item p {
margin: 0;
}
.we-offer-area .item i,
.we-offer-area .item h4,
.we-offer-area .item p {
transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
}
.we-offer-area .item::after {
background: #00a01d none repeat scroll 0 0;
content: "";
height: 100%;
left: -100%;
position: absolute;
top: 0;
transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
width: 100%;
z-index: -1;
}
.we-offer-area .item:hover::after {
left: 0;
}
.we-offer-area .item:hover i,
.we-offer-area .item:hover h4,
.we-offer-area .item:hover p {
color: #ffffff !important;
}
.we-offer-area.text-center .item:hover i::after {
border-color: #ffffff !important;
}
.we-offer-area.text-center .item:hover i {
background-color: #ffffff !important;
color: #00a01d !important;
}
.we-offer-area.text-left .item i {
background: #00a01d none repeat scroll 0 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #ffffff;
display: inline-block;
font-size: 60px;
height: 100px;
line-height: 100px;
margin-bottom: 30px;
position: relative;
width: 100px;
z-index: 1;
text-align: center;
}
.we-offer-area.text-left .item i::after {
border: 2px solid #00a01d;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
content: "";
height: 120px;
left: -10px;
position: absolute;
top: -10px;
width: 120px;
}
</style>
Step 5 :- Now Do not Forget to click on Save Button to save your work.
Step 6 :- Now copy Given HTML code of Stylish Service Section and paste this HTML code where you want it to be placed.
<section class="we-offer-area text-center bg-gray">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="site-heading text-center">
<h2>What we <span>Offer</span></h2>
<h4>Lorem Ipsum is simply dummy text</h4>
</div>
</div>
</div>
<div class="row our-offer-items less-carousel">
<!-- Single Item -->
<div class="col-md-4 col-sm-6 equal-height">
<div class="item">
<i class="fas fa-pen-fancy"></i>
<h4>Project creation</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<!-- End Single Item -->
<!-- Single Item -->
<div class="col-md-4 col-sm-6 equal-height">
<div class="item">
<i class="fas fa-dharmachakra"></i>
<h4>Software Development</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<!-- End Single Item -->
<!-- Single Item -->
<div class="col-md-4 col-sm-6 equal-height">
<div class="item">
<i class="fas fa-tasks"></i>
<h4>Porject Management</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<!-- End Single Item -->
<!-- Single Item -->
<div class="col-md-4 col-sm-6 equal-height">
<div class="item">
<i class="fas fa-tachometer-alt"></i>
<h4>Porject Impliment</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<!-- End Single Item -->
<!-- Single Item -->
<div class="col-md-4 col-sm-6 equal-height">
<div class="item">
<i class="fas fa-recycle"></i>
<h4>Software Update</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<!-- End Single Item -->
<!-- Single Item -->
<div class="col-md-4 col-sm-6 equal-height">
<div class="item">
<i class="fas fa-headset"></i>
<h4>24/7 Support</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<!-- End Single Item -->
</div>
</div>
</section>
Demo of Stylish Service Section
Conclusion
Today In this post I have shared with you all How To Add Stylish Service Section in Blogger Website. So how did you like this post ? you can tell by commenting, if you have any question or errors then you can put a comment.
Post a Comment
Post a Comment