Want to show grid style services in blogger page or post

byInfokie •Sunday, January 30, 2022

0

Contents

A-Steps to add style blocks in blogger
a-Insert code in layout

This framework design help you exhibit significant administrations utilizing a heading, passage and a SVG symbol, this totally made up HTML and CSS as it were, this framework segment is totally versatile and looks proficient, you can undoubtedly support your change or lift visits to significant pages, along these lines, we should go straight into process.

Steps to add style blocks in blogger

To exhibit administrations style blocks, follow the underneath steps

Go to blogger layout area add HTML/JavaScript gadget in legend segment of your subject.

Now copy the underneath HTML code and change the necessary like heading, section and SVG symbols.

<section class="k2_CSS_GRID">
   <div class="K2_GRID_container">
     <h2 class="K2_GRID_heading">Our Services</h2>
     <p class="K2_GRID_paragraph">Explore our web services</p>                  
     <div class="K2_All_GRID">                   
     <div class="K2_single_grid">                     
     <div class="K2_icon_background">
     <svg class="K2_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="K2_single_heading">Fast loading</h3>
     <p class="K2_single_paragraph">We can optimize your website by compressing CSS & Javascript.</p>
     </div>
        
     <div class="K2_single_grid">
     <div class="K2_icon_background">
     <svg class="K2_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="K2_single_heading">Fully Responsive</h3>
     <p class="K2_single_paragraph">We build a fully responisve website for better speed and appearance</p>
     </div>
        
     <div class="K2_single_grid">
     <div class="K2_icon_background">
     <svg class="K2_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="K2_single_heading">SEO</h3>
     <p class="K2_single_paragraph">We make SEO template with proper breadcrumbs, schema data included. </p>
     </div>
                                
     <div class="K2_single_grid">
     <div class="K2_icon_background">
     <svg class="K2_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="K2_single_heading">Ready</h3>
     <p class="K2_single_paragraph">Our website design is super professional you can easily access</p>
     </div><div class="K2_single_grid">
     <div class="K2_icon_background"><svg class="K2_icon_svg"><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></svg>
     </div>
        
     <h3 class="K2_single_heading">Pros</h3>
     <p class="K2_single_paragraph">Unique social sharing, custom designs contact page builds</p>
     </div>

<div class="K2_single_grid">
     <div class="K2_icon_background">
     <svg class="K2_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="K2_single_heading">Updated regularly</h3>
     <p class="K2_single_paragraph">We always update template regularly add features to fix some bugs that appear</p>
     </div>
     </div>
     </div>
 </section>
        
 <style>
.K2_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;}.K2_GRID_heading a{color:#191924;}@media screen and (min-width:40em){.K2_GRID_heading{font-size:3rem;}}@media screen and (min-width:40em){.K2_GRID_heading{font-size:3rem;}}

.K2_GRID_paragraph{box-sizing:border-box;min-width:0;font-size:1.25rem;margin-top:0.5rem;text-align:center;}.K2_GRID_paragraph lead{font-size:1.25rem;}@media screen and (min-width:40em){.K2_GRID_paragraph{font-size:1.5rem;}} 
           
.K2_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){.K2_All_GRID{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.5rem;grid-gap:1.5rem;}}@media screen and (min-width:52em){.K2_All_GRID{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:3rem;grid-gap:2rem;}}
                 
.K2_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){.K2_single_grid{padding:1.5rem;}}@media screen and (min-width:52em){.K2_single_grid{padding:2rem;}}
                                           
                
.K2_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;}.K2_single_heading a{color:#191924;}@media screen and (min-width:40em){.K2_single_heading{margin-top:1.5rem;}}
                                   
.K2_single_paragraph{box-sizing:border-box;min-width:0;margin-bottom:0;}.K2_single_paragraph lead{font-size:1.25rem;}
.K2_icon_svg svg, .K2_icon_svg svg.line{background-color:#015;
fill: #d7e1ec;
stroke: #d7e1ec;
}

.darkMode .K2_single_grid{
border: 1px solid grey;
background: #2f2f2f;
</style>

Insert code in layout of your blog and services grid will be added in the homepage of blogger
Underneath image is displaying on sidebar, instead of sidebar, select on content section, select add gadget and fallow up the procedure to get service grid

Layout

Html/ Java

Content

Actual

You have successfully added grid section to your blogger layout, customize color and font size using CSS code.