How To Add Showcase Widget In Your Blog.

Hello There Friend!

Hope You Are Fine. In This Post I Am Going To Tell You How To Add A Stylish Showcase In Your Blog. So That You Can Add The Type Of Contents In Your Blog. In This Post We Will Talk About The Advantage And How To Add The Showcase In Your Blog

What Is Showcase Widget?

Showcase Widget Is Actually A Type Of Arranged Manner Of Large Icons That Can Be Added In Your Blog. It Is Used By The Websites Who Deliver Data In More Than One Topic.

Why To Use Showcase Widget In Your Blog?

Showcase Widget Can Be Used To Add The Basic Topics In Your Blog. You Can Make This Widget To Get Ease For Your Users So That They Can Easily Find Your Topics. You Can Also Add The Different Categories Of Your Blog. There Is No Disadvantage Of This Widget But Sometimes Can Decrease The Website Speed.

How To Add Showcase Widget In Your Blog?

Follow The Given Steps One By One To Add Showcase Widget In Your Blog:
Step 1: First Of All Go To The Blogger Dashboard.
Step 2: Lgin To  Your BloggerAccount And Go To The Layout Section 
Step 3: Add The New HTML Widget To Your Blog
Step 4: Copy The Below Code And Paste It In That Widget.

HTML

<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 development 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 help you 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 help you build a fully responisve website for better speed and conversion.</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 Friendly</h3>
     <p class="K2_single_paragraph">We make SEO friendly 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-to-use</h3>
     <p class="K2_single_paragraph">Our website design is super professiona and you can easily use the site.</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">Pro Plugins</h3>
     <p class="K2_single_paragraph">Unique social sharing plugins, custom designs and 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 the template regularly and add features or 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_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;}
                             
.K2_icon_svg{box-sizing:border-box;min-width:0;width:2rem;height:2rem;fill:currentColor;width:2rem;height: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{
fill: #d7e1ec;
stroke: #d7e1ec;
}

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

Step 5: Click On The Save Button.

You Can Add The Details Like Name Of The Category According To Your Wish

We Have Completely Added The Showcase Widget In The Blog. If You Have Any Problems In Adding The Showcase In Your Blog, You Can Tell Me In The Comments. I Will Fully Try To Resolve It.

Thanks For Reading.