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
<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.
