Scrollable Popular Posts Widget for Blogger

Dhanjee Rider

Introducing the Scrollable Popular Posts Widget for Blogger

Are you a blogger searching for an engaging way to showcase your popular posts? Look no further! In this article, we'll introduce you to an exciting Scrollable Popular Posts widget that will captivate your readers and keep them exploring your top content. With just a few lines of code, you'll have a dynamic and visually appealing widget ready to go. Let's dive in!

🔧 Building the Foundation: HTML, CSS, and JavaScript

To create the Scrollable Popular Posts widget, we'll combine the power of HTML, CSS, and JavaScript. Don't worry if you're not a coding expert – we'll guide you through each step.

Here i have provided code for showing popular posts in flex mode user can scroll left and right to see the post thumbnail and when user Hover on the image the post title has been show

Steps to adding custom post sliders in blogger

Copy this code and paste in treb edit or any text editor app for customisation

DEMO

 
 <section class="mainbox">
  <h2 class="line-title">trending games</h2>
  <div class="boxmag cc4">
      <a href="#"> 
 <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFXfCN-Yix-kFpQKk2sjvH0uLGfJp07YD9ehDtuvbyo7yUAP_mkqgbF269vUkMOkWfkc1ZbZzrkcQBVObj3nR6S20yIEmTxWeXrdZ4vawNIziEaTNsJC-km4vYNtd2rHH3yIrLwb0ABzlc-ZPDcVJV8jJZnw6sTQmK9tVUPNYp4VQ62J0YXKmWAhXU/s1440/jet%20theme%20World%20s%20fastest%20Blloger%20template%20.webp" alt="Dota 2">
      <div class="item-desc">
        <h3>EDR le liya tha ki wo hai jo ki pichhle saal ki site pe hai na 2</h3>
      
      </div>
    </div>
   </a>
      <a href="#"> 
 <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8uM9XJa9Sa8pPxeeo7qiZpqR1nfBrTLX9hchCdYh45VBIhbQxUZP9Lw662Rzhp80h5HwawzFUcmThSo77IWr1LJJSvKJhz8dvNIZciZyYAPCj9PgKJr2y7PSm7d1Gx1ubmye91zrgNKC7cF7Bd6N_iY71ZawPAba9Kdtn5zUdaTU7GGi2sz-UQzLG/s1280/Copy%20of%20Minimal-Design.webp" alt="PUBG Mobile">
      <div class="item-desc">
        <h3>PUBG Mobile</h3>
       
      </div>
    </div></a>
      <a href="#"> 
 <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1kkVdNWDuTdo26_8kKBSyhM0wuEbRCfSBWethEsyKGLrZI5pNJHVb-D3VRignXVUL0quDEn5JrosHuEc_4OUPYSsd95c2oe2yZEQpLzretA8S1zge5yxp8MWYfQauO3mzL9QTT0IQpgEEBoklOBaWDKE6JgOc0rcKaP5F4P_TlhDRRJ1RKtJCRB2o/s1760/How%20to%20design%20professional%20Website.webp" alt="Fortnite">
      <div class="item-desc">
        <h3>Fortnite</h3>
    
      </div>
    </div></a>
      <a href="#"> 
 <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLSQKx_9FU5J7LkqjMCWpf6wE2IsaVcJn5D9ZrwZOonaT9G0q8Zo6jCaBgn6ITKyN-kFoNqA-EJbH7a4jV2ojDdEvisT0iOWpaeAuX1b9NDxhPn0uI-KzVQ7VsmDWyftOFUAnuK3v7n2Qe4G2PP8-UoO8-quQWRISxIAnnLRooQm_-dpZVrcSLe5_/s1600/top%20follow%20app.webp" alt="Far Cry 5">
      <div class="item-desc">
        <h3>check kro na isiliye dikkat ho jayegi to show hd image</h3>
       
      </div>
    </div></a>
  </div>
</section>
<style>
/* Add the following CSS to make the carousel scrollable */
.mainbox .boxmag {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.mainbox .item {
  display: inline-block;
  margin-right: 15px;
  width: 320px;
  height: 180px;
  background: #343434 no-repeat center center / cover;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.mainbox .item img {
  width: 100%;
height: 100%;
  object-fit: cover;
}


.mainbox .item-desc {
  padding: 0 16px 10px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  transition: all 0.4s ease-in-out;
  transform: translateY(100%);
align-items: center;
text-align: center;

}

.mainbox .item:hover .item-desc {
  transform: translateY(0);
}
.mainbox .boxmag.cc4 .owl-stage {
  margin: 15px 0;
  display: flex;
  display: -webkit-flex;
}

</style>

Now chenge your

post image link
Post url
Post title

You can simply open your post in browser and you can press and copy all things

Now when it is ready go to your Blogger layout and add a gadget on where you want to show this sliders

Congratulations 🎉 you have successfully added Popular post slider that helps to engage more content in a small area

Iff this post is helpful for you so share with your friends 😁 and join our teleegram chenall for much more codes and widgets

Last word

In this post we will provided information about Scrollable Popular Posts Widget for Blogger, 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