How To Add Stylish Showcase Widget In Blogger Website.

In This Post I Am Going To Show You How To Add Stylish Showcase Widget In Your Blog. I Will Illustrate It In Very Simple Manner. We Will Add Showcase Widget Through HTML Code. So Lets Start,

What Is A Showcase Widget?

A “Showcase Widget” Is Like A Fancy Display Box On A Website Or In A Computer Program. Its Job Is To Make Certain Things Stand Out And Look Good. It Is Like A Spotlight That Shows Off Specific Items Or Features.

Why Should I Use Showcase Widget In Blog?

The Reason Showcase Widgets Are Important Is That They Help Grab Your Attention And Show You The Best Or Most Important Stuff. They Make Things Look Nice And Organized, Making It Easier For You To Understand And Enjoy What A Website Or Program Has To Offer. So, They’re Like The Cool Decorations In A Store That Make You Want To Check Things Out. It Can Used For Many Things Like:

  • Product Showcase Widget: On A Shopping Website, This Widget Might Show Off The Newest Or Best-selling Products. It’s Like A Window Display In A Store That Makes You Notice The Cool Stuff They Have For Sale.
  • Portfolio Showcase Widget: If You’re An Artist Or A Company, This Widget On Your Website Can Display Your Best Work, Like Showing Off Your Coolest Projects Or Designs.
  • Feature Showcase Widget: In An App Or Computer Program, It Could Highlight New Features Or Important Things The Program Can Do. It’s Like A Tour Guide Pointing Out The Interesting Parts.

How To Add Showcase Widget In Your Blog?

Follow The Below Steps One By One To Add Showcase Widget In Your Blog. These Steps Should Be Done With The Same Manner:

  • Step 1: First Of All Go To The Blogger And Login In To The Blogger Dashboard.
How To Add Showcase Widget In Your Blog
  • Step 2: Now Go To The Layout Section And Search For “Add New HTML Widget“.
How To Add Showcase Widget In Your Blog
  • Step 3: Click On The “Add New HTML Widget” And Paste The Below Code.
How To Add Showcase Widget In Your Blog
<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>

Note: You Can Change The Category Name Like “Pro Plugins” And Also Add Your Showcase Links In The Above HTML Code.

Step 4: Now Click On Save And Check Your Website.

You Have Completely Installed A Showcase Widget In Blog. I Hope You Have Liked And Done It With Errors. If You Face Any Trouble While Installing A Showcase Widget In Your Blog You Can Comment In The Section Below.

Also Read: How To Create And Terms And Conditions In Your Website.

Conclusion:

So, There You Have It! Showcase Widgets Are The Secret Sauce That Makes Websites Pop. They’re Not Just Pretty; They’re Like The Cool Friends Who Always Know Where The Fun Stuff Is. Next Time You’re Surfing The Web, Keep An Eye Out For These Digital Showstoppers – They’re Making The Online World A Way Cooler Place! 🚀✨

Frequently Asked Questions:

What’s A Showcase Widget?

Imagine A Showcase Widget Like A Special Spotlight On A Website Or App. It’s There To Make Certain Things Look Awesome And Grab Your Attention.

How Do Showcase Widgets Make Websites Better?

Showcase Widgets Make Websites More Fun! They Catch Your Eye, Make You Click Around, And Generally Improve How Websites Look And Feel.

Can You Change How Showcase Widgets Look?

Yup! Showcase Widgets Are Often Customizable, So You Can Make Them Match The Style Of The Website Or App You’re Using.

Any Tips For Using Showcase Widgets?

Keep It Short And Sweet! Use Good Pictures, Make Sure It Looks Good On Phones, And Update The Content Regularly To Keep Things Fresh.

Dive Into The World Of Tech With Me.

Leave a comment