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.
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.
<!--///////////////////////////////////////////A Widget Developed By MM NaumanAuthor: MM NaumanPublisher: https://capoenk-01.blogspot.com/////////////////////////////////////////////SupportSliding Feature UsedSlider: Tiny Slider 2License: MITAuthor: https://github.com/ganlanyuan/tiny-sliderPlease Don't Remove this Comments, This will Help the Authors.--><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'><!-- Dynamic Data will be added here--></div><script>let TotalPosts = 10; // Number of posts you want to displayfunction 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 PostPOSTS[i].link.forEach((el, i) => {if (el.rel === "alternate") {PostTitle = el.title;PostURL = el.href;}})//Get Post Thumbnaillet 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.
If you want to change the text for jump link by default it is Read More.
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.
