Automated Recent Posts Slider For Blogger

Automated Recent Posts Slider For Blogger - [FlexSlider]

Today we will create a dynamic and automated recent posts slider for blogger using Blogger JSON Feed and jQuery. We will display recent posts of your blog inside FlexSlider which is a free slider plugin provided by woothemes. The slider gives a feeling of a tab widget where you can switch from one slide to another using the tab buttons or navigational controls. WordPress users have already integrated recent posts inside flexslider but this is the first time blogspot users will be able to display automatic list of recent posts inside a image slider.

Also Check: Display Recent Posts Inside Vertical Slider

DEMO

Today's recent posts slider is coded using the same logic with which we coded our last JSON widget except for few design differences. Please check the last widget also:

READ: Display Recent Posts by label with Animated Thumbnails and Avatars.

Also read our json series to learn how to code these gadgets yourself!

READ: Introduction to Blogger JSON Feeds

Unique Features of Automated Recent Posts Slider

Today's recent posts widget has some unique features introduced first time online:

Author Avatar - Unique!

Displays recent posts inside Dynamic Slider or as a Dynamic Flat list. - Unique!

Displays recent posts from a specific category/label.

Slider with two animations: Slide & Fade

Clickable Comments Count

Custom Date Format in ribbon fashion - Unique!

Clickable Animated Featured Thumbnails - Unique!

Option to increase or decrease thumbnail Resolution - Unique!

Support for Third-party Images and YouTube thumbnails - Unique!

Title Length is adjustable

Add Automatic Recent Posts Slider Widget in Blogger

Follow these easy steps to add recent posts slider to your blogspot blog:

Go To Blogger > Template

Backup your template

Click "Edit HTML"

Just below <head> tag paste the following JS and CSS source links:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>

Note: Do not add JQuery, FontAwesome or Oswald links in the code above to your template if you are already using them on your site.

Next search ]]></b:skin> and just above it paste the following code:

<style>

/*######### Recent Posts Slider Stylesheet #############*/

.mbtslides-titlefont-family:oswald; font-weight:normal;font-size:18px!important; border-bottom:2px solid rgb(144, 241, 40); color:#242729; width:300px;.flexslider width:300px; margin:0px; border:0;

.flexslider .slides list-style-type:none; margin:0px auto 10px auto;padding:0px; .flexslider li color:#666; font-family:helvetica; font-size:12px; overflow:hidden; position:relative; padding-top: 10px; line-height: 1.6em; .flexslider .flex-control-navlist-style:none outside none;position:absolute;top:-45px;right:5px;text-align:right;height:10px

.flexslider .flex-control-nav lidisplay:inline-block;margin:0 2px

.flexslider .flex-control-nav atext-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important

.flexslider .flex-control-nav a.flex-activebackground-color:rgb(132, 219, 6);border:1px solid rgb(144, 241, 40) .flexslider .flex-divmargin:0px auto 20px auto; display:block; border-bottom:1px solid #eee; padding-bottom:20px!important; position:relative; .flexslider li a color:#0080ff; text-decoration:none; .flexslider icolor:#999; padding-right:5px; .flexslider .ilineline-height:2em; margin-top:3px; .flexslider .icontentline-height:1.5em; margin-top:5px; .flexslider div spanmargin:0 5px 0 0; display:inline-block;font-weight: normal; .flexslider .mbttitle font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none; .flexslider .mbttitle:hover, .flexslider .itotal a:hover color:#333; text-decoration:none;

.flexslider .iedit atext-decoration:none; color:#999; cursor:pointer

.flexslider .iedit:before, .flexslider .iauthor:before, .flexslider .itag:before, .flexslider .icomments:before, .flexslider .idate:before, .flexslider .itotal span:beforefont-family:fontAwesome; position:relative; padding-right:8px; color:#999; .flexslider .iauthorpicwidth: 17px!important;height: 17px!important;border-radius: 50%; float: none; display: inline-block!important; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;

.flexslider .iFeaturedoverflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0; .flexslider .iFeatured a background: none; padding:0px; display: block;border:1px solid #eee; .flexslider .iFeatured imgwidth:110px!important;height:65px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border-radius: 2px; .flexslider .iFeatured:hover img opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4) .flexslider .icomments acolor:#0080ff; font-family: arial;font-size:12px; .flexslider .icomments a:hovertext-decoration:underline .flexslider .icomments:before content:'f086'; padding:0px 3px 0px 7px; color:#84DB06; .flexslider .idate position: absolute;left: 0px;top: -7px; background: rgb(132, 219, 6);color: #fff;padding: 3px 4px;font-family: oswald;font-size: 11px;border: 1px solid rgb(144, 241, 40); .flexslider .idate divwidth:18px; line-height:1.6em; text-align:center;

.flexslider .idate:after content: ' ';position: absolute;z-index:-9999px;width: 0;height: 0;left: 25px;top: -1px;border-width: 4px 6px;border-style: solid;border-color: transparent transparent rgb(125, 208, 4) rgb(125, 208, 4);

</style>

Make these changes
- To change the green color theme of the slider simply replace the green highlighted color codes with color of your choice. The color can be in rgb or #hexadecimal, both work. Use our Color Code Generator.

Save your template.

Now go to Blogger > Layout

Select "Add a Gadget"

Choose "HTML/JavaScript" gadget

Keep the title field empty and then paste the following code inside it:

<script type="text/javascript">

$(window).load(function()

    $('.flexslider').flexslider(

   animation: "slide",

        directionNav: false,

       touch: true,

       slideshowSpeed: 2500,

      pauseOnHover: true,

     animationSpeed: 700,

    );

);

</script>
<h2 class="mbtslides-title">Recent Posts Slider</h2>

<div class="flexslider">

<ul class="slides">

<script type="text/javascript">

//################### Defaults

var ListBlogLink = "http://mybloggertricks.com";

var ListCount = 6;

var ListLabel = "SEO";

var TitleCount = 66;

var ImageSize = 150;

//################### Function Start

function mbtslider(json)

for (var i = 0; i < ListCount; i++)

.png]")/) != null)

.gif

else

ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAs1VcjfKLI1JCImIdsdeKuuer42J5RdF9OPFkmltp_gGavMlDjAUgybdsDSfW2WmMM233m6Z_6rnyy2mDhRb5AJ4rxUW2IbrvBjHo3eAZpHwOFmOCstZ8H3kAnfg4jk7VMmR2FJGTvh4/s200/Icon.png'";

//################### Printing List

var listing = "<div class='flex-div'><div class='iFeatured'><a href="

+ ListUrl+

"><img src="

+ListImage+

"/></a></div><a class='mbttitle' href="

+ListUrl+

"target='_blank'>"

+ListTitle+

"</a><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"

+ListAuthor+

"</span><span class='icomments'>"

+ListComments +

"</span> <span class='idate'><div>"

+ D +

"</div><div> "

+ M +

"</div></span></div></div>";

if (i == 0)

document.write('<li>');

if (i < ListCount/2)

document.write(listing);

if (i == ListCount/2)

document.write('</li><li>');

if (i >= ListCount/2)

document.write(listing);

if (i == ListCount)

document.write('</li>');



document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtslider'></"+"script>");

</script>

</ul></div>

The following control options will help you modify the widget:
- animation: Select your animation type, "fade" or "slide"
- slideshowSpeed: You can set the speed of the slideshow cycling, in milliseconds
- animationSpeed: You can also set the speed of animations, in milliseconds
- pauseOnHover: Pause the slideshow when hovering over slider, then resume when no longer hovering
- You can edit the widget title by editing: Recent Posts Slider
- If you don't want to use the title then delete the yellowhighlighted code.
- ListBlogLink : Insert your Blog link here
- ListCount : Decide how many posts do you wish to display. Choose even integer only like 2,4,6,8,10 etc.
- ListLabel : Insert your blog label/category here. Remember that labels are case sensitive. Therefore type it exactly as it is shown in your browser address bar. If your label is "blogging tips" and if you type it as "Blogging Tips" then it wont work. You must make sure that all letters are written in correct cases.
- TitleCount : Choose how many characters to display in post title.
- ImageSize : You can control the resolution or aspect ratio of thumbnails by editing ImageSize = 150;where the value 150 means that you want your images to be within 150 x 150 pixels in size. Keep this value close to the thumbnail size to ensure website load time is not effected a lot. Since our thumbnail images have a width of about 110px, therefore I have kept the resolution as 150, slightly higher to display images in slightly good quality.
- If you want to show recent posts published on your blog but don't wish to display posts from a specific label then simply remove /-/"+ListLabel+" from the code above.

Click Save and you are all done!

Display Slider or Just a Flat List!

Fortunately I have setup the logic such that you can choose whether to display your posts inside animated FlexSlider or display them as simple flat list similar to my earlier recent posts widget. In other words you can choose to enable or disable the FlexSlider.

How to enable or disable the flex slider?

The logic is extremely simple. If you want to display and enable FlexSlider then insert even integer value next to ListCount , such as 2,4,6,8,10,12 etc. The JavaScript logic above will divide your inserted value into two sections and will display posts in each slide accordingly.

Output will be such:
Recent Posts Slider Widget For Blogger

For displaying a dynamic Flat list or in other words to disable FlexSlider insert odd integer value next to, such as 1,3,5,7,9,11 etc.

Output will be such:
Recent Posts Slider Gadget For Blogspot blogs

Recent Posts Slider Gadget For Blogspot blogs

Wasn't that easy? =)

Let me know if you have any questions or if you need any assistance. I hope this new widget will take your blogspot blog to the next level and help you spice up your blog with one more unique widget which was formerly found only on wordpress blogs. Why Should Wordpress folks have all the fun! =)

15
comments

PLEASE NOTE:

We have Zero Tolerance to Spam.

Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.

(function() {
var items = ['id': '329315546817474712', 'body': 'Nice widget. I really love it and will move straight to adding to my blog. www.obhiabablog.blogspot.com', 'timestamp': '1466879378981', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1466879378981#c329315546817474712', 'author': 'name': 'Prince John Okosun', 'avatarUrl': '//lh3.googleusercontent.com/-c7AzYA2aDh8/AAAAAAAAAAI/AAAAAAAABic/wgYYWSvB-Ig/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/12301775134217028139', 'displayTime': 'Jun 25, 2016, 11:29:00 PM', 'deleteclass': 'item-control blog-admin pid-605869752', 'id': '8790037221908760620', 'body': 'Sir recent blogger posts are not indexed by google.... why ', 'timestamp': '1466926267271', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1466926267271#c8790037221908760620', 'author': 'name': 'Tteachers', 'avatarUrl': '//lh5.googleusercontent.com/-K8ffx02jNrU/AAAAAAAAAAI/AAAAAAAAAJg/tAHWAwqA6W4/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/12331506914561522538', 'displayTime': 'Jun 26, 2016, 12:31:00 PM', 'deleteclass': 'item-control blog-admin pid-1741756080', 'id': '2464219416481979561', 'body': 'Here is how I have problem, the Widget does not work properly and when I add the scripts not work at all. Some help?x3cbr /x3ex3cbr /x3eThanks', 'timestamp': '1466961984203', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1466961984203#c2464219416481979561', 'author': 'name': 'evaggelos evaggelou', 'avatarUrl': '//lh3.googleusercontent.com/-5n9_PDNEJmU/AAAAAAAAAAI/AAAAAAAAS9o/0WHX2ak1ivA/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/08323934542398485227', 'displayTime': 'Jun 26, 2016, 10:26:00 PM', 'deleteclass': 'item-control blog-admin pid-729047986', 'id': '1450072036957525845', 'parentId': '2464219416481979561', 'body': 'looks like some formatting error in the post. Let me fix it and get back to you', 'timestamp': '1466981458227', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1466981458227#c1450072036957525845', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Jun 27, 2016, 3:50:00 AM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '6435744413287844127', 'parentId': '2464219416481979561', 'body': 'The code in step#4 was not properly closed. I have fixed it now. Please use the updated code in step#4 only, rest all remaining code is unchanged and it works just fine', 'timestamp': '1466981925007', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1466981925007#c6435744413287844127', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Jun 27, 2016, 3:58:00 AM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '7553257441245198456', 'parentId': '8790037221908760620', 'body': 'The content of the widget is crawl-able because it loads on your page and not on a separate iframe. It will be crawled and indexed by search robot easily. x3cbr /x3ex3cbr /x3eWhere did you hear that recent posts are not indexed by google? x3d)', 'timestamp': '1466982074049', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1466982074049#c7553257441245198456', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Jun 27, 2016, 4:01:00 AM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '6850798115224840391', 'parentId': '2464219416481979561', 'body': 'Mystery, I do not know why, but just addx3cbr /x3ethe :x3cbr /x3ex3cbr /x3eflexslider/2.6.1 cssx3cbr /x3eflexslider/2.6.1 jsx3cbr /x3ex3cbr /x3enothing works, what can go wrong;', 'timestamp': '1467040821792', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1467040821792#c6850798115224840391', 'author': 'name': 'evaggelos evaggelou', 'avatarUrl': '//lh3.googleusercontent.com/-5n9_PDNEJmU/AAAAAAAAAAI/AAAAAAAAS9o/0WHX2ak1ivA/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/08323934542398485227', 'displayTime': 'Jun 27, 2016, 8:20:00 PM', 'deleteclass': 'item-control blog-admin pid-729047986', 'id': '2330824585797310382', 'body': 'I cant get it worked only showing widget title', 'timestamp': '1467057224656', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1467057224656#c2330824585797310382', 'author': 'name': 'Sadri Ercan', 'avatarUrl': '//lh5.googleusercontent.com/-Wu01z1nyzJg/AAAAAAAAAAI/AAAAAAAAA9o/5f4t2fce_QM/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/05924429306531916426', 'displayTime': 'Jun 28, 2016, 12:53:00 AM', 'deleteclass': 'item-control blog-admin pid-1907972230', 'id': '703973129743601728', 'parentId': '2330824585797310382', 'body': 'My mistake. I just corrected the code. Sometimes formatting becomes a headache x3d)x3cbr /x3ex3cbr /x3eTry now and let me know ', 'timestamp': '1467148606829', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1467148606829#c703973129743601728', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Jun 29, 2016, 2:16:00 AM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '6767482476720199066', 'parentId': '2464219416481979561', 'body': 'Please try now all mistakes in formatting have been rectified. Sorry for the inconvenience caused. ', 'timestamp': '1467148705260', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1467148705260#c6767482476720199066', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Jun 29, 2016, 2:18:00 AM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '1561267646877382556', 'body': 'it shows your site recent posts not mine why', 'timestamp': '1477803426438', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1477803426438#c1561267646877382556', 'author': 'name': 'ANDROID GUIDER', 'avatarUrl': '//lh4.googleusercontent.com/-B1yiIrvT8tM/AAAAAAAAAAI/AAAAAAAAAXw/Pjsmf0l6b9Q/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/05351449364136623584', 'displayTime': 'Oct 30, 2016, 9:57:00 AM', 'deleteclass': 'item-control blog-admin pid-1643751465', 'id': '7636054816457475648', 'body': 'Assalaamualaikum Dear Mr Adminx3cbr /x3ex3cbr /x3eCan I have recent post with multiple Labels?x3cbr /x3ex3cbr /x3ehow to add more than one Labels here?x3cbr /x3evar ListLabel x3d x26quot;SEOx26quot;; x3cbr /x3ex3cbr /x3eCan i have something likex3cbr /x3evar ListLabel x3d x26quot;PET,HOMEGARDENx26quot;; x3cbr /x3ex3cbr /x3ex3ca hrefx3dx22http://www.cintaummahmarketing.comx22 relx3dx22nofollowx22x3eRegards From Cinta Ummahx3c/ax3ex3cbr /x3ex3cbr /x3e', 'timestamp': '1480500618181', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1480500618181#c7636054816457475648', 'author': 'name': 'Cinta Ummah Marketing', 'avatarUrl': '//lh6.googleusercontent.com/-Z6DZYFqntpg/AAAAAAAAAAI/AAAAAAAAAIw/cXvYAfFX4nQ/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/13015847924823073080', 'displayTime': 'Nov 30, 2016, 3:10:00 PM', 'deleteclass': 'item-control blog-admin pid-445213119', 'id': '7423651481093348304', 'parentId': '7636054816457475648', 'body': 'Never Mindx3cbr /x3ex3cbr /x3eSolved that already :)x3cbr /x3ex3cbr /x3ex26lt;spanx26gt;x3cbr /x3evar ListLabel x3d x26quot;Blogx26quot;;x3cbr /x3evar ListLabel2 x3d x26quot;featuredx26quot; ;x3cbr /x3ex3cbr /x3edocument.write(x26quot;x26lt;script srcx3dx26#39;x26quot;+ListBlogLink+x26quot;/feeds/posts/default/-/x26quot;+ListLabel+x26quot;?altx3djson-in-scriptx26amp;callbackx3dmbtsliderx26#39;x26gt;x26lt;/x26quot;+x26quot;scriptx26gt;x26quot;);x3cbr /x3ex3cbr /x3edocument.write(x26quot;x26lt;script srcx3dx26#39;x26quot;+ListBlogLink+x26quot;/feeds/posts/default/-/x26quot;+ListLabel2+x26quot;?altx3djson-in-scriptx26amp;callbackx3dmbtsliderx26#39;x26gt;x26lt;/x26quot;+x26quot;scriptx26gt;x26quot;); x3cbr /x3ex3cbr /x3ex26lt;/spanx26gt;x3cbr /x3ex3cbr /x3eDid some repetation, it worked perfectly!x3cbr /x3ex3cbr /x3ex3cbr /x3eThank you Mr Mohammad Mustafa Ahmedzaix3cbr /x3ex3cbr /x3eYour MBT and its contents are awesomex3cbr /x3e', 'timestamp': '1480556253943', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1480556253943#c7423651481093348304', 'author': 'name': 'Cinta Ummah Marketing', 'avatarUrl': '//lh6.googleusercontent.com/-Z6DZYFqntpg/AAAAAAAAAAI/AAAAAAAAAIw/cXvYAfFX4nQ/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/13015847924823073080', 'displayTime': 'Dec 1, 2016, 6:37:00 AM', 'deleteclass': 'item-control blog-admin pid-445213119', 'id': '3306935087343946634', 'body': 'If the widget does not work for you please replace your jQuery link with this one:x3cbr /x3ex3cbr /x3ex26lt;script typex3dx26quot;text/javascriptx26quot; srcx3dx26quot;http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.jsx26quot;x26gt;x26lt;/scriptx26gt; ', 'timestamp': '1481568045578', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1481568045578#c3306935087343946634', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Dec 12, 2016, 11:40:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '3539257594305531864', 'body': 'it is not working in my blog. It is showing only the widget namex3cbr /x3ex3cbr /x3eplease help', 'timestamp': '1482158699822', 'permalink': 'https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html?showCommentx3d1482158699822#c3539257594305531864', 'author': 'name': 'Anoop Appukuttan', 'avatarUrl': '//lh5.googleusercontent.com/-U24JxCrUWCM/AAAAAAAAAAI/AAAAAAAAACs/iSZFVRSn_OA/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/07485910048797694324', 'displayTime': 'Dec 19, 2016, 7:44:00 PM', 'deleteclass': 'item-control blog-admin pid-1184164356'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '1734322194846226734', 'feed': 'https://www.mybloggertricks.com/feeds/1734322194846226734/comments/default', 'authorName': 'M. Mustafa Ahmedzai', 'authorUrl': 'https://www.blogger.com/profile/11681339458447132019', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;

var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';

return entry.content.$t;

var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;

if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;

if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];

comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;

comments.push(comment);

return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();

window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length

Prince John OkosunJun 25, 2016, 11:29:00 PM

Nice widget. I really love it and will move straight to adding to my blog. www.obhiabablog.blogspot.com

ReplyDelete

TteachersJun 26, 2016, 12:31:00 PM

Sir recent blogger posts are not indexed by google.... why

ReplyDelete
Replies

evaggelos evaggelouJun 26, 2016, 10:26:00 PM

Here is how I have problem, the Widget does not work properly and when I add the scripts not work at all. Some help?

Thanks

ReplyDelete
Replies

Sadri ErcanJun 28, 2016, 12:53:00 AM

I cant get it worked only showing widget title

ReplyDelete
Replies

ANDROID GUIDEROct 30, 2016, 9:57:00 AM

it shows your site recent posts not mine why

ReplyDelete

Cinta Ummah MarketingNov 30, 2016, 3:10:00 PM

Assalaamualaikum Dear Mr Admin

Can I have recent post with multiple Labels?

how to add more than one Labels here?
var ListLabel = "SEO";

Can i have something like
var ListLabel = "PET,HOMEGARDEN";

Regards From Cinta Ummah

ReplyDelete
Replies

Mohammad Mustafa AhmedzaiDec 12, 2016, 11:40:00 PM

If the widget does not work for you please replace your jQuery link with this one:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

ReplyDelete