Dynamic Blogger Recent Posts With Carousel Sliding Widget

Introduction

Hello, Friends, Many of my posts related to Recent Posts Widgets were outdated so instead of updating those posts with the same code and design I have created a couple of great looking widgets which will be published in upcoming days.

Today I Have Created Recent Posts Widget with Carousel Sliding Feature which is responsive and looks great in any screen size.

This widget is not new but we have used TinySlider which is a Vanilla Javascript Based Slider Plugin which is lightweight and has zero dependencies.

This is the reason we have used the tiny slider to achieve the Sliding Effect and used Blogger JSON API to fetch the posts.

This Carousel Recent Posts Widget Looks very stylish and it is modular you don't need to tweak your template just you need to add this plugin in your layout using add a gadget section.

For the DEMO Purpose, I'm using this widget in my blog you can scroll down to see it live and working.

You may still have doubts regarding the responsiveness of this widget if you have any doubt just open my blog in your mobile phones or tablets to check the real responsiveness thanks to Tiny Slider 2 Plugin we got a lot of options to make it responsive.

Mobile Responsive Carousel Sliding Recent Posts widget

Carousel Sliding Recent Posts in Mobile

I think now its time to add the widget I will show you how you can add it. If you are a new blogger you can be surprised or find this code too long but this is the code that I wrote I'm not minimising so that if a user wants to customize or create their own widget they can easily do.

Installing the widget

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.

STEP 3: Click On "Add a Gadget" As highlighted in the image above.

STEP 4:After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.

STEP 5: Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

<link href='https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css' rel='stylesheet'/>
<style>
:root{
--success: rgb(40 167 69); /* Light Green Color*/
--light: rgb(248 249 250); /* Whitish Color */
--dark: rgb(52 58 64); /* Dark Gray Color*/
--gray: rgb(108 117 125); /* Normal Gray Color*/
--pink: rgb(232 62 140); /* Pink Color*/
}

.ABT_Recent_Posts{
margin-top: 30px;
}

.ABT_Recent_Posts div h2{
font-size: 16px;
margin-top: 10px;
text-transform: capitalize;
padding: 5px;
min-height: 80px;
}

.ABT_Recent_Posts div h2 a:hover{
text-decoration: none;
color: var(--success);
}

.ABT_Recent_Posts div{
text-align: center;
background-color: var(--light);

}

.ABT_Recent_Posts div a {
color: var(--gray);
}

.ABT_Recent_Posts img{
width: 100%;
max-height: 200px;
min-height: 200px;
height: 100%;
object-fit: cover;

}

.ABT_Recent_Posts div p{
margin: 0
}

.ABT_Recent_Posts div p a{
display: block;
background: var(--pink);
color: var(--light);
padding: 10px;
transition: all .5s;
}
.ABT_Recent_Posts div p a:hover{
background: var(--dark);
color: var(--light);
text-decoration: none;

}

.ABT_Recent_Posts div p{
border-radius: 4px;
}

.tns-controls {
width: fit-content;
margin: 20px auto;

}

.tns-controls button{
margin: 0px 15px;
outline: none;
border: none;
font-size: 20px;
background: unset;
padding: 5px 10px;
border-radius: 4px;
background-color: rgba(0,0,0,.1);
}

.tns-controls button:hover{
background-color: rgba(0,0,0,.2);
}
</style>

<div class='ABT_Recent_Posts'>

</div>

<script>
let TotalPosts = 10; // Number of posts you want to display
function ABT_Fetch_Recent_Posts(JSON) {
const POSTS = JSON.feed.entry;
let PostTitle, PostURL = "";
let JumpLinkText = "Read More";
let RecentPostsContainer = document.querySelector(".ABT_Recent_Posts");

for (let i = 0; i < TotalPosts; i++) {
//Get Title and URL of the Post
POSTS[i].link.forEach((el, i) => {
if (el.rel === "alternate") {
PostTitle = el.title;
PostURL = el.href;
}
})

//Get Post Thumbnail
let thumbnail = POSTS[i].media$thumbnail && POSTS[i].media$thumbnail.url;
if (thumbnail) {
thumbnail = thumbnail.replace("s72-c", "");
} else if (POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))/)) {
thumbnail = POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))/)[0];
} else {
thumbnail = "https://placeholder.pics/svg/300/DEDEDE/555555/Image%20Not%20Loaded";
}

RecentPostsContainer.innerHTML += `<div>
<img src="${thumbnail}" alt="${PostTitle}"/>
<h2>
<a href="${PostURL}">${PostTitle}</a>
</h2>
<p><a href="${PostURL}">${JumpLinkText}</a></p>
</div>`;

}
}

var blogLink = document.location.origin;
var callScript = document.createElement("script");
callScript.src = `${blogLink}/feeds/posts/default?alt=json-in-script&start-index=1&max-results=${TotalPosts}&callback=ABT_Fetch_Recent_Posts`;
let Recent_Posts_Container = document.querySelector('.ABT_Recent_Posts');

document.body.appendChild(callScript);

let SliderOptions = [
"<i class='fas fa-arrow-left'/>",
"<i class='fas fa-arrow-right'/>",
];

window.onload = () => {
tns({
container: ".ABT_Recent_Posts",
items: 1,
mouseDrag: true,
autoplay: true,
controls: true,
arrowKeys: false,
gutter: 10,
nav: false,
slideBy: 1,
autoplayHoverPause: true,
autoplayButtonOutput: false,
controlsText: [
"<i class='fas fa-arrow-left'></i>",
"<i class='fas fa-arrow-right'></i>",
],
controlsPosition: "bottom",
loop: false,
preventScrollOnTouch: "force",
autoplayTimeout: 6000,
rewind: true,
responsive: {
0: {
items: 1,
},
320: {
items: 1,
},
460: {
items: 2,
},
600: {
items: 3,
},
800: {
items: 4,
},
}

});
}
</script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js'></script>

This is it, now get ready for the customization part.

Customization

If you want to change the Number of posts to display by default it is 10 but if you want to increase or decrease then just change the red highlighted number in the above code.

If you want to change the text for jump link by default it is Read More.

If you have a blog for example relating to the food reviews or movie reviews then you might want to show read review or something else then change the orange highlighted text. (make sure you don't remove quotes surrounding the text)

If you want to customize the styling according to your theme then you can do it easily I'm not adding how to do it here because you might break the widget if you miss a semicolon also. Ask me in comments with your blog URL I will change the styling for you.

Final Words

I hope you like this widget I have spent a lot of time in tweaking tiny slider plugin to work with blogger dynamic code. If you like it please do share this Blog Posts in your social profiles.

I know you want many blogger widgets if you have any request for any type of widget or plugin for your blog do request in comments or Send a message through Contact Form will be happy to assist and create a widget for our blogger community.

Credits:

For Slider Functionality thanks to Tiny Slider

Official Live Demo:

Mother's Touch - Premium Cakes in Kalaburagi

All Frontend Dev Tricks - Javascript & Reactjs tutorials

Dynamic Blogger Recent Posts With Carousel Sliding Widget

Introduction

Installing the widget

Customization

Final Words

Credits:

No comments:

Post a Comment

ABOUT US

Read The Blog

Tutorials

Follow Tapbots