WordPress Style Recent Posts Auto Slider Widget for Blogger

What is WordPress Style Recent Posts Auto Slider Widget?

WordPress Style Recent Posts Auto Slider Widget Fetches Your Most Recent Posts With Posts Thumbnails and Display Title of the Posts after the Thumbnail which looks beautiful and can be customized according to your desires or websites Themes. this is light weight and Can be Place above footer. Created By JSON Script And Decorated by using Regular CSS and Some JS. 

Why To Use WordPress Style Recent Posts Auto Slider Widget?

WordPress Style Recent Posts Auto Slider Widget is Recommended Because It has Beautiful Sliding feature Which looks Official and inspired by WordPress Sites. and It can display unlimited number of posts at a time and does not look messy. isn't it great? :P Ok Jokes Apart but a long tutorial to achieve this. and this widget has transition effects, Hover effects and much more.

when the visitors comes from Search engines to a particular post they don't know what is new in the site. if Recent Posts Widget will be there there will be more Page views, internal linking and low bounce-rate if this is there then it is good for SEO.

See The GIF Demo Below After the tutorial you will get this Widget:

Let Start! How To Add  WordPress Style Recent Posts Auto Slider Widget in Blogs or sites:

Before Starting this Tutorial Please Make Sure You Added This Code Before </body> in your Template This is Very Important Step. Follow This Tutorial Fix/Improve Thumbnail Resolution in all Blogger Widgets

Steps To Add WordPress Style Recent Posts Auto Slider 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 

and Open it 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.

<!--WP Style Recent Posts with hover effect by trendingwidgets.com */ -->
<style type="text/css">
.recent_label_with_thumbs li{display:inline-block;list-style:none;float:left;text-align:left; position:relative;}.recent_label_with_thumbs li strong{padding:2px!important; margin:0!important;list-style:none;float:left;text-align:center;width:90%;font-size:13px;color:gold;border-radius:0px 0px 10px 10px; word-wrap:break-word;}.recent_label_with_thumbs li strong a{color:white; font-size:13px;font-weight: bold;font-family: helvetica;word-wrap: break-word;white-space:normal!important}.recent_label_with_thumbs span .clearfix:hover strong {  display:block;}.recent_label_with_thumbs > span{  display:inline-block!important;}.recent_label_with_thumbs img:hover{  box-shadow: 0px 0px 8px 2px gold inset;}.recent_posts_Wrap{white-space:normal!important;   height: 230px;    overflow: hidden;    margin: 0px;    width: 100%;    background: none repeat scroll 0% 0% rgb(38, 41, 44);    border: 1px solid rgb(51, 51, 51);    padding: 5px 5px 25px 5px;    border-bottom-right-radius: 10px;    border-bottom-left-radius: 10px;    box-shadow: 0px 2px 7px rgb(102, 102, 102); display:block; clear:both;}.recent_posts_Wrap li{  overflow: hidden; float: left; width: 205px; height: 220px; border-top:0px solid #333; margin:10px 10px 0px 0px; padding:2px 0px 4px 0px;right:-15px;}.recent_posts_Wrap li img{  width:180px;height:150px; padding:2px; border: 1px solid #A3A3A3!important; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;position:relative;}.recent_posts_Wrap li img:hover{border: 1px solid #c5c5c5; }
.recent_posts_Wrap li img {filter:alpha(opacity=80);opacity: 0.8;border:0;}.recent_posts_Wrap li:hover img {filter:alpha(opacity=100);opacity: 1.0;border:0;}
</style><script src="https://mytopdownloads.com/Trending%20Widgets/recent_posts.js"></script>
<div class="recent_posts_Wrap"><script type='text/javascript'>var numposts = 8;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 80;</script><marquee  behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' ><script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentPosts"></script></marquee></div>

Customization:

• The Yellow Highlighted Text is Responsible for Width And Height of Thumbnails if you want to increase or decrease just change the parameter and play with this till you get your Desired Width and Height. but don't make the thumbnails width more than 200px or else it will break the code.

• The Green Highlighted Text is Responsible For  Number of Posts To Display By Default 4 Posts Will Be Displayed If You Want More Then Change This Green Text with your desired Number.

STEP 6:  All Done Save the Gadget and Check it in your site.

Optional Steps if you added this Script already then don't follow Below Tutorial Just Save it and Enjoy:

Now We Will Add JavaScript to Improve Thumbnail Quality

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

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

STEP 3: Click On Edit HTML.

STEP 4:  After Clicking on Edit HTML Search for 

</body>

STEP 5:  Copy This Below Code Before </body>

<script type='text/javascript'>                   function changeThumbSize(id,size){var blogGadget = document.getElementById(id);var replacement = blogGadget.innerHTML;blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");var thumbnails = blogGadget.getElementsByTagName("img");for(var i=0;i&lt;thumbnails.length;i++){ thumbnails[i].width = size; thumbnails[i].height = size; }}

changeThumbSize("Your_Widget_ID",210);                   </script>

Customization:

The Yellow Highlighted Text is Responsible for The Widget ID. Replace the Yellow Text With your Recent Posts Widget ID.

Widget ID Can Be Found In The URL Address bar in the HTML/JavaScript section of Add A Gadget As Shown in the Image Below:

That's It Thanks For Following our Tutorial '' WordPress Style Recent Posts Auto Slider Widget for Blogger '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.