Add Hero Section + Category List + Services Grid to Your Blogger Site
Dhanjee Rider
If you're looking to add a stunning ANIMATED Hero Section, a colorful Category Button List, and a professional Services Grid to your Blogger homepage, you're at the right place. Here's a fully customizable widget code that can be pasted via Edit HTML and easily edited from Layout.
🧩 How to Add These Sections?
First gp to edit html then paste this css above close </head> tag
All in one css for all 3 widget 👇
<style>
.dktechnozoneblocks{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;}
.dkclrctgry{display:flex;justify-content:space-between;flex-wrap:wrap;margin: 0 10px 25px;}
.dkclrctgry .widget{width:calc((100% - 75px) / 6);float:left;background:var(--bg-cards);margin:8px 0;height:60px;overflow:hidden;display:flex;align-items:center;position:relative;border-radius:50px;box-shadow:-1px 4px 8px 0 rgb(0 0 0 / 0.10);transition:all .3s ease;}
a.paint-title{display:flex;width:100%;box-sizing:border-box;align-items:center;color:#000;}
.dkclrctgry .widget:nth-child(1):hover{background:linear-gradient(190deg,#b9c7ff,#1573ff);box-shadow:0px 10px 15px -8px rgb(44 124 243 / 0.76);}
.dkclrctgry .widget:nth-child(2):hover{background:linear-gradient(190deg,#edc7c7,#fd4785);box-shadow:0px 10px 15px -8px rgb(255 65 65 / 0.76);}
.dkclrctgry .widget:nth-child(3):hover{background:linear-gradient(190deg,#e8fff5,#0fbc9e);box-shadow:0px 10px 15px -8px rgb(37 195 167 / 0.76);}
.dkclrctgry .widget:nth-child(4):hover{background:linear-gradient(190deg,#fddbff,#af3fff);box-shadow:0px 10px 15px -8px rgb(182 76 255 / 0.75);}
.dkclrctgry .widget:nth-child(5):hover{background:linear-gradient(190deg,#ffe8a0,#fd7900);box-shadow:0px 10px 15px -8px rgb(253 130 13 / 0.75);}
.dkclrctgry .widget:nth-child(6):hover{background:linear-gradient(190deg,#ecf0ff,#4d94ff);box-shadow:0px 10px 15px -8px rgb(91 156 255 / 0.75);}
.dkclrctgry-img{position:relative;display:block;overflow:hidden;width:40%;margin:0;}
.dkclrctgry-img img{position:relative;display:block;height:40px;width:40px;border-radius:50%;object-fit:cover;margin:0 0 0 6px;padding:6px;}
.rtl .dkclrctgry-img img{margin:0 6px 0 0;}
.rtl .dkclrctgry-title h2{margin:0 0 0 10px;}
#Image1 .dkclrctgry-img img{background:rgb(0 114 255 / 0.13)}
#Image2 .dkclrctgry-img img{background:rgb(255 0 0 / 0.13)}
#Image3 .dkclrctgry-img img{background:rgb(0 255 96 / 0.23)}
#Image4 .dkclrctgry-img img{background:rgb(164 0 255 / 0.13)}
#Image5 .dkclrctgry-img img{background:rgb(255 125 0 / 0.23)}
#Image6 .dkclrctgry-img img{background:rgb(0 114 255 / 0.13)}
.dkclrctgry-title{position:relative;display:block;width:calc(60% - 0px);padding:0;}
.dkclrctgry-title h2{display:block;line-height:18px;height:18px;overflow:hidden;font-family:var(--title-font);font-size:13px;text-transform:capitalize;margin: 0 10px 0 0;}
.paint-title:hover .dkclrctgry-title h2{color:#fff;}
div#mega-wrap{ position: relative;
background: linear-gradient(45deg, #0dcaf0, #cf09cd);
overflow: hidden;
color: white; width:100%;}
.color-section .widget{display:flex;justify-content:space-between;margin:0 auto;align-items:center;}
.color-wrapper{position:relative;width:calc(60% - 1em);overflow:hidden;z-index:2;}
.color-image{position:relative;width:40%;z-index:2;}
.color-section .flexi-title h3{display:block;font-family:var(--title-font);font-size:30px;color:white;font-weight:700;line-height:1.4em;margin:0 0 15px;}
.color-caption{font-family:var(--text-font);color:var(--color-section-text);font-size:14px;font-weight:500;line-height:1.5em;margin:0;}
.color-section{margin:auto;}
.color-section .color-search .search-input::placeholder{color:rgba(255 255 255 / 0.52);}
.color-image img{position:relative;display:block;width:100%;min-height:180px;max-height:365px;object-fit:cover;overflow:hidden;margin:auto;}
.color-search{position:relative;flex:1;margin-top:30px;padding:0;float:left;width:70%;}
.color-search .search-form{position:relative;width:100%;height:50px;background-color:rgb(255 255 255 / 0.12);overflow:hidden;display:flex;justify-content:space-between;border-radius:3px;
}
.color-search .search-input{ border: none;
outline: 1px solid #cccccc7d;position:relative;flex:1;width:100%;height:50px;color:var(--color-section-text);background-color:rgba(0,0,0,0);font-family:inherit;font-size:14px;font-weight:400;padding:0 0 0 15px;}
.color-search .search-action{position:relative;background-color:rgba(0,0,0,0);font-family:inherit;height:50px;color:var(--color-section-text);font-size:16px;font-weight:400;line-height:32px;text-align:center;cursor:pointer;padding:0 15px;border:0;opacity:.65}
.color-hero{position:absolute;z-index:1;bottom:-10px;left:0;height:auto;width:100%;background-size:cover;}
svg#color-wave{fill:var(--body-color-main);position:absolute;bottom:-10px;left:0;right:0;}
div#mega-flex0,#mega-flex1{background:var(--bg-cards);}
.head-title{margin:10px 0 20px;}
.head-title .widget:after{left:0;margin:0 auto;position:absolute;right:0;bottom:3px;background-image:linear-gradient(to right,rgb(255 255 255 / 0),blue,rgba(0,0,0,0));content:"";height:1px;width:37%;}
.head-title .widget{margin:0 0 15px;}
.head-title .widget-title{position:relative;display:block;text-align:center;margin:0 auto;}
.head-title .widget-title h3{display:block;color:var(--main-text-color);font-size:19px;margin:10px 0 0;}
.tint-category{display:flex;justify-content:space-between;margin:0 10px 25px;flex-wrap:wrap;}
.tint-category .widget{width:calc((100% - 50px) / 3);float:left;background:var(--paint-cards);padding:0;margin:15px 0;overflow:hidden;position:relative;border-radius:14px;border:1px solid rgb(109 109 109 / 0.10);transition:all .3s ease;}
.tint-category-img a{position:relative;display:flex;height:120px;width:120px;margin:40px auto 15px;overflow:hidden;border:0px solid rgb(0 0 0 / 0.06);border-radius:70% 30% 30% 70% / 60% 40% 60% 40%;transition:.5s;
box-shadow:#ccdbe8 3px 3px 6px 0 inset, rgb(255 255 255 / .5) -3px -3px 6px 1px, rgb(136 165 191 / .48) 6px 2px 16px 0, rgb(255 255 255 / .8) -6px -2px 16px 0;
align-items:center;}
#Image8 .tint-category-img a{background: rgb(255 50 50 / 0.08);}
#Image9 .tint-category-img a{background: rgb(124 255 50 / 0.08);}
#Image10 .tint-category-img a{background: rgb(50 164 255 / 0.08);}
#Image11 .tint-category-img a{background: rgb(219 50 255 / 0.08);}
#Image12 .tint-category-img a{background: rgb(255 222 50 / 0.08);}
#Image13 .tint-category-img a{background: rgb(50 255 208 / 0.08);}
.tint-category-img img{position:relative;width:65%;height:65%;display:flex;object-fit:cover;text-align:center;border-radius:50%;margin:auto;justify-content:center;align-items:center;align-content:center;}
.tint-category-img a:hover{border-radius:50%;}
.tint-category-title{position:relative;border-radius:21px;width:80%;margin:0 auto;padding:3px 0;}
.tint-category-title h2{display:block;width:100%;line-height:18px;font-family:var(--title-font);font-size:17px;font-weight: 700;text-align:center;margin:10px 0;}
.tint-category-title h2 a{color:var(--theme-text-color);}
.tint-category-img a:hover,.tint-category-title h2 a:hover{opacity:0.8;}
.tint-category-caption{position:relative;display:block;font-size:13px;font-weight:600;color:var(--theme-text-color);text-align:center;margin:0 10px 30px;opacity: 0.7;}
.rotating-box{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
.rotating-box li{position:absolute;list-style:none;display:block;width:40px;height:40px;border-radius:18%;background-color:rgba(255,255,255,0.10);bottom:-160px;-webkit-animation:square 25s infinite;animation:square 25s infinite;-webkit-transition-timing-function:linear;transition-timing-function:linear;}
.rotating-box li:nth-child(1){left:10%;}
.rotating-box li:nth-child(2){left:20%;width:80px;height:80px;animation-delay:2s;animation-duration:17s;}
.rotating-box li:nth-child(3){left:25%;animation-delay:4s;}
.rotating-box li:nth-child(4){left:40%;width:60px;height:60px;animation-duration:22s;background-color:rgba(255,255,255,0.25);}
.rotating-box li:nth-child(5){left:70%;}
.rotating-box li:nth-child(6){left:80%;width:100px;height:100px;animation-delay:3s;background-color:rgba(255,255,255,0.2);}
.rotating-box li:nth-child(7){left:32%;width:80px;height:80px;animation-delay:7s;}
.rotating-box li:nth-child(8){left:55%;width:20px;height:20px;animation-delay:15s;animation-duration:40s;}
.rotating-box li:nth-child(9){left:25%;width:10px;height:10px;animation-delay:2s;animation-duration:40s;background-color:rgba(255,255,255,0.3);}
.rotating-box li:nth-child(10){left:90%;width:80px;height:80px;animation-delay:11s;}
@-webkit-keyframes square{0%{transform:translateY(0);}
100%{transform:translateY(-700px) rotate(600deg);}
}
@keyframes square{0%{transform:translateY(0);}
100%{transform:translateY(-700px) rotate(600deg);}
}
@media screen and (max-width:880px){
.dkclrctgry .widget{width:calc((100% - 38px) / 3);}
.color-wrapper,.color-image{margin:15px 0;width:100%;}
.color-section .widget{flex-direction:column;justify-content:center}
.flexi-title,.color-caption{display:block;position:relative;}
.color-section .color-search{width:100%;display:flex;align-content:center;justify-content:center;align-items:center;}
.nikk-ui-pro .widget{width:calc((100% - 14px) / 2);margin:4.5px 0;}
.color-section .flexi-title h3{font-size:24px}
.tint-category .widget{width:calc((100% - 30px) / 3);margin:8px 0;}
}
@media screen and (max-width:660px){
.dkclrctgry .widget{width:calc((100% - 6px) / 2);}
.dkclrctgry{margin:0 10px 20px;}
.color-hero{bottom:5px;}
svg#color-wave{bottom:-10px;height:75px;}
.tint-category .widget{width:100%}
.tint-category{margin:0 10px;}}
/* add this code in layout mode template bskin to hide dots in layout of blogger
#layout .rotating-box {
display: none;
}
*/
.dkscmenu{background:#fff0;width:100%;margin:-20px -16px;border-radius:2px;overflow:hidden;position:relative}.dkscmenu ul{display:flex;gap:9px;padding:9px 24px;margin:0;list-style:none;overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;scroll-behavior:smooth}.dkscmenu ul.dragging a{pointer-events:none}.dkscmenu ul.dragging{scroll-behavior:auto}.dkscmenu ul::-webkit-scrollbar{display:none}.dkscmenu a{color:var(--jt-heading-link);text-decoration:none;text-transform:capitalize;padding:4px 8px;display:inline-block;border-radius:10px;user-select:none;white-space:nowrap;font-weight:700;Border:1px solid #ccc;font-size:14px}#navbar{width:70%}.dkscmenu a:hover{box-shadow:#ccdbe8 3px 3px 6px 0 inset,rgb(255 255 255 / .5) -3px -3px 6px 1px inset}.dkscmenu a:active{background:#8eaef3}
</style>
- Go to Blogger Dashboard
- Click on Theme > Edit HTML
- Paste the code where you want the section to appear (preferably before blog1 widget)
- Then go to Layout, and you'll see all the sections in editable widgets!
- You can edit img and text well
- To navigate blog widget to need to go to edit html and click on three dot then choose blog1 then find the b section code and add my bsection code above it to so this hero section above blog post grids
 |
| How to find blog widget |
And paste code above bsection Bicose b section is an break for section if you will paste between any bsection it won't work bicose my codes are already a bsection widget
If you are using jettthme
paste the code above primary content div
 |
| if you don't have primary class div Then paste above blog <b:section> code |
💡 Code Part 1: Hero Section
This is the top banner that grabs attention with a title, description, image, and search bar.
<div class='flex-section' id='mega-wrap'>
<b:section class='color-section container' id='color-section' maxwidgets='1' name='Header-Featured' showaddelement='no'>
<b:widget id='Image7' locked='true' title='Easy Steps To Learn Blogging and Digital Marketing.' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/-3V4NSGVan-s/YY6F806KcAI/AAAAAAAAAJU/t4Bb1-7mrZEMGbZfQmJjY3oXERvKhuemwCLcBGAsYHQ/s600/nikk-ui-image.png</b:widget-setting>
<b:widget-setting name='displayHeight'>600</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>600</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam necessitatibus libero id, fuga, quis eligendi, ullam optio dolores voluptatibus amet vitae modi illo temporibus quod?</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='color-wrapper'>
<b:if cond='data:title != ""'><div class='flexi-title'><h3><data:title/></h3></div></b:if>
<b:if cond='data:caption'>
<span class='color-caption'><b:eval expr='data:caption snippet { length: 140}'/></span>
</b:if>
<div class='color-search'>
<form class='search-form' expr:action='data:blog.searchUrl' role='search'>
<input autocomplete='off' class='search-input' name='q' placeholder='e.g. blogging' type='search' value=''/>
<button class='search-action' type='submit' value=''> <svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path color='currentColor' d='M15.597 11.082c.11.29.39.49.7.49s.59-.2.7-.49l.27-.72c.3-.8.45-1.2.66-1.41c.208-.208.602-.357 1.406-.66l.024-.01l.7-.26c.29-.11.49-.39.49-.7s-.2-.59-.49-.7l-.72-.27c-.8-.3-1.2-.45-1.41-.66c-.208-.208-.357-.603-.662-1.408l-.008-.022l-.26-.7a.76.76 0 0 0-.7-.49c-.31 0-.59.2-.7.49l-.27.72c-.3.8-.45 1.2-.66 1.41c-.208.208-.603.358-1.408.662l-.022.008l-.7.26c-.29.11-.49.39-.49.7s.2.59.49.7l.72.27c.8.3 1.2.45 1.41.66c.208.208.357.603.662 1.408l.008.022zm.13-3.19c-.23-.24-.5-.41-.85-.57c.34-.16.61-.33.85-.57c.24-.23.41-.5.57-.85c.16.34.33.61.57.85c.23.24.5.41.85.57c-.34.16-.61.33-.85.57c-.24.23-.41.5-.57.85c-.16-.34-.33-.61-.57-.85m-3.93 11.68c-4.27 0-7.75-3.48-7.75-7.75s3.48-7.75 7.75-7.75c.41 0 .75.34.75.75s-.34.75-.75.75c-3.45 0-6.25 2.8-6.25 6.25s2.8 6.25 6.25 6.25s6.25-2.8 6.25-6.25c0-.41.34-.75.75-.75s.75.34.75.75a7.7 7.7 0 0 1-1.77 4.921l3.55 3.55c.29.29.29.77 0 1.06c-.15.15-.34.22-.53.22s-.38-.07-.53-.22l-3.55-3.55a7.7 7.7 0 0 1-4.92 1.77' fill='currentColor' fill-rule='evenodd'/></svg></button>
</form>
</div>
</div>
<div class='color-image'><img expr:alt='data:title' expr:src='data:sourceUrl'/></div>
</b:includable>
</b:widget>
</b:section>
<ul class='rotating-box'><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/></ul>
<div class='color-hero'>
</div>
</div>
📚 Code Part 2: Category Button List
Add category buttons like News, Game, Google, etc. Easily editable from layout.
<b:section class='dkclrctgry container' id='dkclrctgry' maxwidgets='5' name='Featured Category' showaddelement='no'>
<b:widget id='Image1' locked='true' title='Education' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEh12Y1jMFMKThUnenvVtrudE2UkRMdC1WBEnh1vIyhZAfjX3Yk4C-2n6yrpmJJkU_tvmsuhEbRPEALlz9lvQtokMujw5txHeP0s5gbJFnwQi_9GYo7sD5yhxb3e3X8qMQ-R4wA1z5_TkB1JbG0_o_kpBHk6pGSX3nwcLaZitE2WYMeo6caQImSE1gg2Qw</b:widget-setting>
<b:widget-setting name='displayHeight'>128</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>128</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='dkclrctgry-img'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='dkclrctgry-title'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
<b:widget id='Image2' locked='true' title='News Updates' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEhZKuOJ1oXuLBcgZi_o_n46sYClAVCZI6vPWlE6PmKT5ZGCxLYdzsC0LzS2KO5a0fBtvUZDo-O6kbGeBSu7FDFppEdYWHt8XiVUiE6rMah8a1l7oDv6cfHDrhslGjhyO_TADVMiYblrHymyHVLAzsHIs-8QkKNPkOtZBq_XZJNULyqvSeun3nth_QwD7w</b:widget-setting>
<b:widget-setting name='displayHeight'>128</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>128</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='dkclrctgry-img'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='dkclrctgry-title'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
<b:widget id='Image3' locked='true' title='Game' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEjvA06y6Ihb7f3JCvClhQ0uzJSOguGJVtDbyyM2J4d9jG_yHigfohNPpmsKS5S81UNSwxM9Q1m4_ER4OE41xK77PDYKJAG4ke4pSa2FxFyeT3isaKnlu1GK6DUnd9-IaHYFOJK859_znGRZLlxpAlcOES4_hg7x69-Kw9AyuY6GyhIawvMZ6TEImgH2nw</b:widget-setting>
<b:widget-setting name='displayHeight'>128</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>128</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='dkclrctgry-img'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='dkclrctgry-title'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
<b:widget id='Image4' locked='true' title='Google Lab' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEh-u0bSsyZRJwFuEl2LCPCt8DhxzjLtyrsk84HjdAufg_5sHi-Y_NLp_KOpti-VndB9l5wi963fR2c-0Lji0G9Bpoi79grF2nbMzaBNe-_9Fch7CCOAuJtw59yRCCB2NTkq8YEH9OGBON-nybgchyTocMtY5ayMq0U2pbAgXPnQvRzBkbpMN5QJ-n22xw</b:widget-setting>
<b:widget-setting name='displayHeight'>128</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>128</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='dkclrctgry-img'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='dkclrctgry-title'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
<b:widget id='Image5' locked='true' title='Experiments' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEg-WxNHaSHHoQESx64l9WsyrJ0s_5iR6Z_UkjoLWgdOe9pdim2q5rXicRw-r2oRcbKvraYdVq2QYMojRxYh3tKifiVjRpEo42HvETDDSitVsXq0a18Vjp89fiBALL1oXYhz-DGVzHpCHUMzRL65awFj8aMfwJY5BdibTwOoEKOW2C2E33Nc4y6Z4gG8Ig</b:widget-setting>
<b:widget-setting name='displayHeight'>128</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>128</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='dkclrctgry-img'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='dkclrctgry-title'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
<b:widget id='Image6' locked='true' title='Products' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEjlWPM9PkJjhPmVcjOHfvrL8icybfpUWhlImqGzFg2wDwi0Ex1tVkq1fzSvFdwi874qnIYrd1WAAcyprWj1CRfoBMM_GyU9aSduzJ4qfS6CaMESDKHkmEqnRmlbKTjE6hhn-B953fAB6ZQSqOzodCYFGHWvirT3mWhP9HwnxcjXw83i0v09EFq73ASdmQ</b:widget-setting>
<b:widget-setting name='displayHeight'>82</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>82</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='dkclrctgry-img'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='dkclrctgry-title'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
</b:section>
🧩 Code Part 3: Services Grid Section
Add six service boxes like On-page SEO, Affiliate Product, etc. Fully responsive and editable from layout.
<b:section class='tint-category container' id='tint-category1' maxwidgets='6' name='Featured Category' showaddelement='no'>
<b:widget id='Image8' locked='true' title='Blogging guide Book' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEjFaRO_6NNbpF98pPTT7W-sQAYUMw-3-GwiOj8P7gQM2gdEnfeeT6v3LDbFGhcJKgyGQJASkqCp7f2_vI7c_6LdYxZrdTTwB0adVf4ltv80q8CwQygMjoofdVAPFtCXuiHRaAhmSe5vN65UO1JlDW6ClSQb00IOnEUzRaoOJ46C0azD0ejAV8vuZFJSvQ=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'>Best Digital Marketing Course/SEO Optimization free to use and implement on your website easily.</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='tint-category-img'><a expr:href='data:link'><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/></a></div>
<div class='tint-category-title'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='tint-category-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
<b:widget id='Image9' locked='true' title='Marketing Development' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEi1CteF3_knrz7n6EioTBLtr6clqd63vhBCT_ULnZ0Gkd1tZP_8TwhthZELFRJpmnDG26Yc2gFZITjraWfSOOk7V2tlUxS6-WsWJ938s2-bHdV0a8iiTJnJJxfegBK0NbVEaoD3bNKrVHBzwI0XGWM-Mvwm9UAUMnT7QfrAbTZMP_LndohOTUXQPdN5eg=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'>Free Online Marketing Curriculum Development that you can directly adapt and execute on your website.</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='tint-category-img'><a expr:href='data:link'><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/></a></div>
<div class='tint-category-title'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='tint-category-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
<b:widget id='Image420' locked='true' title='Link Building' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEiu1lbTDSXwyTnvFImhSNDpbPzQ1b_1tgMkkhTfUdDOJS31VQWF9MINGklQeDaxcsMXSj0vMxkZNN_6EY4XZpwez6hqf38_OprCCrEpNo8Ekudte-u3TQJ0T4OJpghbPmuZAYLU7ENeFMJBe3Pu0kc6H1a2j1oLdC8uxz_5yFwNezPYddvxf6QfZzv_Fw=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'>Inexpensive Link Building Curriculum Creation that you can readily modify and install on your website.</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='tint-category-img'><a expr:href='data:link'><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/></a></div>
<div class='tint-category-title'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='tint-category-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
<b:widget id='Image421' locked='true' title='On-page SEO' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEgMx_Dj2YUwXvKu4QSqEiw89lL6ptoDQG8weOAtle4UsbydvWmnzl-vwyvoRtqt4O372Ian75YtacvMybVKQVnpYiD0GBZ2iMawu_pHGLBmemiA1F2GtsP21F_1ZLCHiPyHyqAIHswy0E2eX5RKwTkfYy78KZiJrTArmuuBX9lIGqIfhxwbAU-wIDKfiA=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'>The technique of contribute towards the development web pages in search engines in order to rank</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='tint-category-img'><a expr:href='data:link'><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/></a></div>
<div class='tint-category-title'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='tint-category-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
<b:widget id='Image422' locked='true' title='Off-page SEO' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEh5WKcVb8zQqJnQLX-LA36Q0IIm-_5upuuv-YlmFGg2Jf3ou0bbd-OfrrijCskFYhF8x-wc8Yfc5qHtR7j73gIIzD6Nw8ovCc3LfkRc1mPfN8bDMDfLY-CnUd8Nuba-STkBs-kn4OJYBx9HCG2uw2E_mYzU452JgL_9Sgb-rMKLfXOvpto5mX4XGbK53Q=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'>The practice of supporting the growth of web pages in search engines to something in promote increased</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='tint-category-img'><a expr:href='data:link'><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/></a></div>
<div class='tint-category-title'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='tint-category-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
<b:widget id='Image423' locked='true' title='Affiliate Product' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEhu_ovZd5OEZgXWY9_eSwXndtP-M_c44UfFwpN0i3Ugruzd9i7ChN-Cd0Wr924TXThV4UBtJvr9Dcmy3sTrpO0Tt4ETbeOHV_jvq2oQsW1c6f-RDxOeVGiHOSWr4YanVkfVlerWayjbQpD5ClVGJOeCLeB54Z51WOSMTt16e8-Einbd0HQzjYs78nv6DQ=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'><![CDATA[Even if you don't have your own products to sell, there are 7 steps to follow to started selling online.]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='tint-category-img'><a expr:href='data:link'><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/></a></div>
<div class='tint-category-title'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='tint-category-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
</b:section>
🛠️ How to Edit Content
You can easily edit:
- Image (Just change image URL or upload from file manager)
- Titles & Descriptions
- Category Names
- Visibility from layout section
 |
| After saving code you will see these widget on your layout |
Good luck 🤞
Last word
In this post we will provided information about Add Hero Section + Category List + Services Grid to Your Blogger Site, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
Dhanjee Rider
Dk Technozone An Editor,Programmer, grafix Designer Website Designer,Android Geek, Instagram Filter Seller,Blloger, Seo Expert, Wordpress Geek etc. Telegram
