Blogger Carousel: Responsive & Dynamic Slider

Blogger Carousel (BC) helps you to create dynamic slideshows to showcase your blog posts by a specific category/label. You can use carousels in Blogspot to automatically display a list of latest posts inside an animated cycle. Blogger carousel is a mobile responsive widget that adapts perfectly to different screen sizes because it supports multiple breakpoints. It uses Blogger JSON Feeds to dynamically display recent posts from any label you specify. It is a responsive basic carousel plugin created using FlexSlider by Woothemes. You can display multiple thumbnails organized horizontally inside the carousel with navigational controls.

We have already shared two jQuery carousel sliders for blogspot blogs that you can add to your blog by reading the following tutorials:

Create a Horizontal Carousel Widget in Blogger

Create a Vertical Carousel Widget in Blogger

The difference between this carousel and the former is the use of single and multiple slides/items. Former sliders have a fixed width but this carousel can be stretched to as wide as possible depending on the width of the parent DIV.

DEMO

If you are interested to learn how these widgets and plugins are coded then please read my comprehensive guide below:

READ: Introduction to Blogger JSON Feeds

What is Carousel?

Carousels are also called as "sliders" or "slide shows". A Carousel displays a series of content items one at a time inside animated slides that move from left to right or vice versa depending on the language direction of the web page.

Carousels are even used on homepages of corporate news agency sites such as New York Times, to display featured content and latest headlines from a specific category to their audience.

Web masters and bloggers often use carousels on homepage to draw the readers' attention to featured articles or products of the site. If you check our homepage, you will see a carousel featuring the recent seminars and workshops we conducted country wide.

A carousel surely helps to increase your page views and gives life to old articles that you wish to promote on your homepage.

Features Of Blogger Carousel

Blogger Carousel is an advanced widget equipped with these features:

Author Avatar - Unique!

Displays recent posts dynamically inside Carousel. - 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 Image Thumbnails - Unique!

Option to increase or decrease thumbnail Resolution - Unique!

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

Title Length is adjustable

Best Responsive Carousel For Blogger Blogs!

The carousel automatically adjusts its item width and number of thumbnails to show in smartphones, tablets and desktop screens without effecting the UI. Multiple breakpoints are added to ensure the carousel fits device screen size just perfectly. This is why we call it as the best carousel for blogspot blogs! The same carousel is added by default to COPmo template.

[ SMARTPHONES ]

Responsive Blogger Carousel For Blogspot Blogs

[ TABLETS / IPADS]

[ DESKTOP / LAPTOPS ]

Add Blogger Carousel To Blogspot

If you want to add this featured content slider on your homepage then follow these easy steps:

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 in your site.

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

/*######### Blogger Carousel Stylesheet #############*/

.mbtslides-title2font-family:oswald; font-weight:normal;font-size:18px!important; border-bottom:2px solid rgb(144, 241, 40); color:#242729;width:90%; #mbt-c margin:0px 5px; border:0;width:90%;

.flexslider .slides list-style-type:none; margin:0px auto 10px auto;padding:0px; #mbt-c li color:#666; font-family:helvetica; font-size:12px; overflow:hidden; position:relative; padding-top: 10px; line-height: 1.6em;#mbt-c .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) #mbt-c .flex-divmargin:0px auto 20px auto; display:block; border-bottom:0px solid #eee; padding-bottom:20px!important; position:relative; #mbt-c 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; #mbt-c .mbttitle font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none; #mbt-c .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;

#mbt-c .iFeaturedoverflow:hidden;position:relative;margin:0 0px 10px 0;padding:0;width:120px; .flexslider .iFeatured a background: none; padding:0px; display: block;border:1px solid #eee; #mbt-c .iFeatured imgwidth:100%!important; height:75px!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);

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()

    $('#mbt-c').flexslider(

        animation: "slide",

        directionNav: false,

         itemWidth: 120,

        itemMargin: 25,

       touch: true,

       slideshowSpeed: 2500,

      pauseOnHover: true,

     animationSpeed: 700,

    );

);

</script>
<h2 class="mbtslides-title2">Blogger Carousel!</h2>

<div class="flexslider" id="mbt-c">

<ul class="slides">

<script type="text/javascript">

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

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

var ListCount = 9;

var ListLabel = "Make Money Online";

var TitleCount = 66;

var ImageSize = 150;

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

function mbtcarousel(json)

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

.png]")/) != null)

.png]")/)[1];

else

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

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

var listing = "<li><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></li>";

document.write(listing);



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

</script>

</ul></div>

The following control options will help you modify the widget:
- 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: Blogger Carousel!
- 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.
- 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" and if you type it as "Blogging" 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.

Click Save and you are all done!

Let us help you with installation of Blogger Carousel!

Let me know if you need any help or clarification related to any step above. Adding carousel to your blogs will surely increase your pageviews and overall ad impressions. AdSense revenue does surely increase when users visit multiple pages. This recent posts carousel is indeed the best featured content slider to boost your website pageviews significantly and help in reducing bounce rate. Add this carousel to your blogs and let me know if you need any help. Good luck! =)

23
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': '6992867356188195930', 'body': 'how can i stop it from retrieving youtube thumbnail from the post page instead of post image itself?', 'timestamp': '1472584685374', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1472584685374#c6992867356188195930', 'author': 'name': 'Samara Ssr', 'avatarUrl': '//lh6.googleusercontent.com/-sb4fcpKDhKU/AAAAAAAAAAI/AAAAAAAAEFc/snT_VdtrpqA/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11165849465283402682', 'displayTime': 'Aug 31, 2016, 12:18:00 AM', 'deleteclass': 'item-control blog-admin pid-356484052', 'id': '6579651874831831097', 'body': 'Hello.... Really great widget. I have been waiting for this widget ever since. Thank you so so much. I will add it to my blogg www.obhiabablog.blogspot.com right away.x3cbr /x3ex3cbr /x3eThanks bro.', 'timestamp': '1472609828261', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1472609828261#c6579651874831831097', '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': 'Aug 31, 2016, 7:17:00 AM', 'deleteclass': 'item-control blog-admin pid-605869752', 'id': '9084277810293188086', 'parentId': '6992867356188195930', 'body': 'I have updated the coded in step#11. Please reuse that code. I have made the modification to suit your requirement :)', 'timestamp': '1472729588208', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1472729588208#c9084277810293188086', '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': 'Sep 1, 2016, 4:33:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '9088644330598083007', 'parentId': '6579651874831831097', 'body': 'you are always welcomed John :)', 'timestamp': '1472729607294', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1472729607294#c9088644330598083007', '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': 'Sep 1, 2016, 4:33:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '3091038444267376473', 'parentId': '6992867356188195930', 'body': 'Cool. Thanks Mohammad for the change in code :)x3cbr /x3ex3cbr /x3eworking perfectly :D ', 'timestamp': '1472754287099', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1472754287099#c3091038444267376473', 'author': 'name': 'Samara Ssr', 'avatarUrl': '//lh6.googleusercontent.com/-sb4fcpKDhKU/AAAAAAAAAAI/AAAAAAAAEFc/snT_VdtrpqA/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11165849465283402682', 'displayTime': 'Sep 1, 2016, 11:24:00 PM', 'deleteclass': 'item-control blog-admin pid-356484052', 'id': '3825084369924910891', 'body': 'Hellox3cbr /x3eYou gave good information on image slider tool you show the whole code so person can understand.Thank you', 'timestamp': '1473428147844', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1473428147844#c3825084369924910891', 'author': 'name': 'Unknown', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/00047447750604861443', 'displayTime': 'Sep 9, 2016, 6:35:00 PM', 'deleteclass': 'item-control blog-admin pid-1433383753', 'id': '2056096346865125655', 'body': 'Hello ,x3cbr /x3ex3cbr /x3eYou provide nice thaught about Blogger Carousel...it is very nice.x3cbr /x3ex3cbr /x3eThank you for sharing it..i will try it in my blog', 'timestamp': '1473942997196', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1473942997196#c2056096346865125655', 'author': 'name': 'Interior Design', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/05572086161760299029', 'displayTime': 'Sep 15, 2016, 5:36:00 PM', 'deleteclass': 'item-control blog-admin pid-1815258635', 'id': '6446697656791699949', 'body': 'Hii,x3cbr /x3ex3cbr /x3eThank you for Sharing this...This post is nice information collection about image slider.', 'timestamp': '1474037030631', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1474037030631#c6446697656791699949', 'author': 'name': 'Render Farm', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/15871963638457405768', 'displayTime': 'Sep 16, 2016, 7:43:00 PM', 'deleteclass': 'item-control blog-admin pid-64920285', 'id': '8860944820769456533', 'body': 'Hii Sir,x3cbr /x3ex3cbr /x3eNice blog about Blogger Carousel...Nice and easy widget of image slider..x3cbr /x3eThank you for sharing this...', 'timestamp': '1474123773924', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1474123773924#c8860944820769456533', 'author': 'name': 'Unknown', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/12893984461323140305', 'displayTime': 'Sep 17, 2016, 7:49:00 PM', 'deleteclass': 'item-control blog-admin pid-200072012', 'id': '4364663055902996484', 'body': 'Hi, I have installed this widget but donx26#39;t want to show post content in it...how to remove the whole content.?..want to show title only', 'timestamp': '1474126742424', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1474126742424#c4364663055902996484', 'author': 'name': 'EduIslam Mission', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJvL1QoMiU0mDZMu-CCk0dokuJ5Gh9tzH0AhF1TkrS7i8felBfRQd7GCq2LBd2zCeQ99y0x6kW0Ryg6NiOrBvAKV1D7F5Xx5HvY2iXJBa43gzha6bneYRG96J6yJtJLnNLIHkx6aOw_1o/s35/logo.jpg', 'profileUrl': 'https://www.blogger.com/profile/05356829784218767934', 'displayTime': 'Sep 17, 2016, 8:39:00 PM', 'deleteclass': 'item-control blog-admin pid-635610579', 'id': '3528383207413977890', 'body': 'is there any way to remove the date and time displayed? I want it to be plane without the date and time showing ', 'timestamp': '1474613971707', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1474613971707#c3528383207413977890', 'author': 'name': 'Nsn Media', 'avatarUrl': '//lh6.googleusercontent.com/-2le-BYe8wVQ/AAAAAAAAAAI/AAAAAAAAAA4/5VOzEqYx1Go/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/02294551654028955211', 'displayTime': 'Sep 23, 2016, 11:59:00 AM', 'deleteclass': 'item-control blog-admin pid-2011818841', 'id': '5299521967246590210', 'body': 'hello I really like this widget and I wanted to install it on my blog but I want to remove the post date displayed there? how can I do that? I hope to hear back from you', 'timestamp': '1474614550978', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1474614550978#c5299521967246590210', 'author': 'name': 'Nsn Media', 'avatarUrl': '//lh6.googleusercontent.com/-2le-BYe8wVQ/AAAAAAAAAAI/AAAAAAAAAA4/5VOzEqYx1Go/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/02294551654028955211', 'displayTime': 'Sep 23, 2016, 12:09:00 PM', 'deleteclass': 'item-control blog-admin pid-2011818841', 'id': '1704588779633039943', 'parentId': '5299521967246590210', 'body': 'To remove the date/time add the following CSS code inside your HTML/JavaScript widgetx3cbr /x3ex3cbr /x3ex26lt;stylex26gt;x3cbr /x3e.flexslider .idate display:none;x3cbr /x3ex26lt;/stylex26gt;', 'timestamp': '1474896105590', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1474896105590#c1704588779633039943', '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': 'Sep 26, 2016, 6:21:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '5478959211889136216', 'parentId': '4364663055902996484', 'body': 'A good approach would be to edit the HTML code but a shortcut would be to simply add this code inside the HTML/JavaScript widgetx3cbr /x3ex3cbr /x3ex26lt;stylex26gt;x3cbr /x3e.iFeatured, .iline display:none;x3cbr /x3ex26lt;/stylex26gt;', 'timestamp': '1474896264377', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1474896264377#c5478959211889136216', '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': 'Sep 26, 2016, 6:24:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '6108924606238548156', 'body': 'Hello, Thanks for this tutorial.x3cbr /x3eI wanted to ask if it works on a subdomain like x26quot;dot blogspot dot comx26quot;. My seems not to show after pointing the url to my blogspot url. thanks in advance for your reply', 'timestamp': '1475262308817', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1475262308817#c6108924606238548156', 'author': 'name': 'seyoops', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/11376057077584216975', 'displayTime': 'Oct 1, 2016, 12:05:00 AM', 'deleteclass': 'item-control blog-admin pid-1837385921', 'id': '1100434648798407418', 'parentId': '6108924606238548156', 'body': 'Am facing the same problem. It is not working on blogspot.com', 'timestamp': '1478325705438', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1478325705438#c1100434648798407418', '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': 'Nov 5, 2016, 11:01:00 AM', 'deleteclass': 'item-control blog-admin pid-605869752', 'id': '6948097667880781366', 'parentId': '6108924606238548156', 'body': 'It will work perfectly on both free domains i.e. blogspot.com and custom domains i.e (.com, .net, .org etc) as long as all steps are applied correctly.x3cbr /x3ex3cbr /x3eYour blog link must start from http:// or https://', 'timestamp': '1479033074018', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1479033074018#c6948097667880781366', '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': 'Nov 13, 2016, 3:31:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '8760603026433629886', 'body': 'Hi sir, I m biggest fan of you by my heart.', 'timestamp': '1479097667826', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1479097667826#c8760603026433629886', 'author': 'name': 'CH Adnan', 'avatarUrl': '//lh3.googleusercontent.com/-tOhKykOgYSU/AAAAAAAAAAI/AAAAAAAAACQ/8UZFBgdJB-Q/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/13917535462737685824', 'displayTime': 'Nov 14, 2016, 9:27:00 AM', 'deleteclass': 'item-control blog-admin pid-1384941277', 'id': '8269236306767538496', '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': '1481567930775', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1481567930775#c8269236306767538496', '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:38:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '452270397911164605', 'body': 'hi Mohammad, how can i call this slider with a single div(any possibility) so that i can use it in my post page, instead of pasting all code again in the post html?', 'timestamp': '1483717373550', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1483717373550#c452270397911164605', 'author': 'name': 'Samara Ssr', 'avatarUrl': '//lh6.googleusercontent.com/-sb4fcpKDhKU/AAAAAAAAAAI/AAAAAAAAEFc/snT_VdtrpqA/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11165849465283402682', 'displayTime': 'Jan 6, 2017, 8:42:00 PM', 'deleteclass': 'item-control blog-admin pid-356484052', 'id': '6089673979665305316', 'parentId': '6992867356188195930', 'body': 'Hi Mohammad, If i wanted to have two sliders one is for news label and other for tech, does pasting the same code with change in label name work? and how can i use two sliders inside posts? please respond... ', 'timestamp': '1483988429908', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1483988429908#c6089673979665305316', 'author': 'name': 'Samara Ssr', 'avatarUrl': '//lh6.googleusercontent.com/-sb4fcpKDhKU/AAAAAAAAAAI/AAAAAAAAEFc/snT_VdtrpqA/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11165849465283402682', 'displayTime': 'Jan 10, 2017, 12:00:00 AM', 'deleteclass': 'item-control blog-admin pid-356484052', 'id': '1098723044149607099', 'body': 'why i see it vertical and not horizontal?', 'timestamp': '1485201951246', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1485201951246#c1098723044149607099', 'author': 'name': 'SkeletoN', 'avatarUrl': '//lh5.googleusercontent.com/-Bw_2cGZrgmA/AAAAAAAAAAI/AAAAAAAAASY/msnt-vlWg_E/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/01261937143185401034', 'displayTime': 'Jan 24, 2017, 1:05:00 AM', 'deleteclass': 'item-control blog-admin pid-568665385', 'id': '2024658658895612707', 'body': 'i have set up this widget on my blog but didnt work on my blog x3cbr /x3eplease i need your help x3cbr /x3ex3cbr /x3emy blog url is www.emmanuelsblog.com.ngx3cbr /x3ei followed the instruction correctly but it didnx26#39;t work. then i use my own knowledge but still dont work you may need to check to know if my blog can run this widget.x3cbr /x3ex3cbr /x3eplease i need your help thanks God bless you', 'timestamp': '1520686335057', 'permalink': 'https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?showCommentx3d1520686335057#c2024658658895612707', 'author': 'name': 'Emmanuelx26#39;s Blog TV', 'avatarUrl': '//lh3.googleusercontent.com/-xk0w_h-9gos/AAAAAAAAAAI/AAAAAAAAB-I/V1ryLWt39YU/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/15106719539248529757', 'displayTime': 'Mar 10, 2018, 5:52:00 PM', 'deleteclass': 'item-control blog-admin pid-299981818'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '5488954286781137063', 'feed': 'https://www.mybloggertricks.com/feeds/5488954286781137063/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

Samara SsrAug 31, 2016, 12:18:00 AM

how can i stop it from retrieving youtube thumbnail from the post page instead of post image itself?

ReplyDelete
Replies

Prince John OkosunAug 31, 2016, 7:17:00 AM

Hello.... Really great widget. I have been waiting for this widget ever since. Thank you so so much. I will add it to my blogg www.obhiabablog.blogspot.com right away.

Thanks bro.

ReplyDelete
Replies

UnknownSep 9, 2016, 6:35:00 PM

Hello
You gave good information on image slider tool you show the whole code so person can understand.Thank you

ReplyDelete

Interior DesignSep 15, 2016, 5:36:00 PM

Hello ,

You provide nice thaught about Blogger Carousel...it is very nice.

Thank you for sharing it..i will try it in my blog

ReplyDelete

Render FarmSep 16, 2016, 7:43:00 PM

Hii,

Thank you for Sharing this...This post is nice information collection about image slider.

ReplyDelete

UnknownSep 17, 2016, 7:49:00 PM

Hii Sir,

Nice blog about Blogger Carousel...Nice and easy widget of image slider..
Thank you for sharing this...

ReplyDelete

EduIslam MissionSep 17, 2016, 8:39:00 PM

Hi, I have installed this widget but don't want to show post content in it...how to remove the whole content.?..want to show title only

ReplyDelete
Replies

Nsn MediaSep 23, 2016, 11:59:00 AM

is there any way to remove the date and time displayed? I want it to be plane without the date and time showing

ReplyDelete

Nsn MediaSep 23, 2016, 12:09:00 PM

hello I really like this widget and I wanted to install it on my blog but I want to remove the post date displayed there? how can I do that? I hope to hear back from you

ReplyDelete
Replies

seyoopsOct 1, 2016, 12:05:00 AM

Hello, Thanks for this tutorial.
I wanted to ask if it works on a subdomain like "dot blogspot dot com". My seems not to show after pointing the url to my blogspot url. thanks in advance for your reply

ReplyDelete
Replies

CH AdnanNov 14, 2016, 9:27:00 AM

Hi sir, I m biggest fan of you by my heart.

ReplyDelete

Mohammad Mustafa AhmedzaiDec 12, 2016, 11:38: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

Samara SsrJan 6, 2017, 8:42:00 PM

hi Mohammad, how can i call this slider with a single div(any possibility) so that i can use it in my post page, instead of pasting all code again in the post html?

ReplyDelete

SkeletoNJan 24, 2017, 1:05:00 AM

why i see it vertical and not horizontal?

ReplyDelete

Emmanuel's Blog TVMar 10, 2018, 5:52:00 PM

i have set up this widget on my blog but didnt work on my blog
please i need your help

my blog url is www.emmanuelsblog.com.ng
i followed the instruction correctly but it didn't work. then i use my own knowledge but still dont work you may need to check to know if my blog can run this widget.

please i need your help thanks God bless you

ReplyDelete