1. Irsah inDesigns Blog
  2. Explore Ultimate Blogger Content Post Carousel Slider 2018

Ultimate Blogger Content Post Carousel Slider 2018

Learn how to AMP'd your blog with valid AMP HTML Blogger theme framework. Visit Blogr-AMP Theme and AMPaction Theme. No 3rd party application. Compatible with published posts. Quick in search & on any devices.
Displaying inner Blogger blog published contents can't get any easier with the may Blogger plugins & widgets available on the internet.

However, it's quite messy with copying and pasting codes here & there and sometimes becomes un-manageable -- especially when you are like us, changes Blogger themes now & then ;)

Today we are sharing the ultimate Blogger content gallery carousel and post slider which is super easy to setup using custom Blogger widgets. This might be the last responsive Blogger content carousel & image slider you ever need due to its versatility for customizations ;)

We call it BlogrCart Content Carousel (BlogrCart CC)-- The last (hopefully) Blogger content carousel you will need to install on your blogs powered by Blogger! BlogrCart CC features as follows:-

  • One click install -- no copy/paste codes required.
  • Responsive content carousel slider allows to display blog contents or just your post images.
  • Mouse & touch swipe enabled transitioning actions.
  • Ability to enable/disable post contents display with widget setup.
  • Add multiple BlogrCart Content Carousel in a blog page with easy.
  • Ability to retrieve posts in random order, by Labels/categories.
  • Lightweight plugin, make changes to content display with settings included.
  • Introduces our newest BlogrCartFeed(js) plugin -- a vanilla javascript Blogger feed retriever with loads of options from your widget settings.
  • [NEW] Ability to display multiple Youtube videos in post contents.
  • Drag & drop widgets in your Blog layout & fits in anywhere.
  • [NEW] Displays blog contents from another blog you own!
  • And many more..

BlogrCart Content Carousel Examples


Dual Posts Display by Recent Published Posts




More setup examples made available here at BlogrCart CC example page:


Overwhelmed?

All the example Blogger Content Carousel with multiple installs ! It's Awesome!

Add widget to your Blog!



Reaching users installed & counting...
Thank you for the support! — Irsah inDesigns

Subscribe Now & Widgets Updates Delivered Instantly!


By clicking the "Add Modal Popup Widget Form widget", you have read & agreed on the Terms of Service & Software Policy
Version History

 0-9-2 - November 2017

  • Widget/plugin release

1.0 How to Install BlogrCart Content Carousel & Slider Widget?


  1. While sign in to Blogger, click "Add BlogCart Content Carousel Widget" button above
  2. At Blogger Add Page Element, select your blog to install this widget
  3. Click Add Widget
  4. Locate the added widget and drag & drop to place them anywhere in the footer section of your Blog Layout -- the lower the better.
  5. Preview your new widget which will be located at your Layout > Footer section.
  6. Click Edit to setup your Pop up Modal Follow by Email (Subscribe) options.

If you need to preview the widget contents you can click Edit Content.

Free Blogger Widget Installer Follow by Email Gadget Pop up

1.1 Adding & Removing Widget


You can remove the widget anytime you like and re-install again but do take note on the dependencies as stated below.

This widget is 100% safe & secured, no encryption -- read able codes & mark-ups.

1.2 Widget Placement


Place your custom widget anywhere available in your theme layout. Use Layout drag & drop feature to setup your widget placement accordingly.


This custom Blogger widget setups comes in 3 parts and they are:-


  1. Blogger contents setings
  2. Content carousel settings
  3. Content carousel custom CSS for styling


2.0 BlogrCart Content Setup


Setting up BlogrCart CC widget is made supper easy as all settings is available upon widget install. Drag & drop anywhere appropriate in your blog Layout then click Edit to view the settings.

2.1 Blogger Contents (Feed) Settings


Here are the full parameters that can be used to further extend your BlogrCart Content Carousel (BlogrCart CC) widget & its default values.

var @Params = {
  containerId: null,     
  label: false,          
  random: false,         
  maxResults: 5,         
  maxFeed: 100,          
  heading: false,        
  title : true,          
  summary : true,        
  image: true,           
  labels: true,          
  date: true,            
  author: true,          
  BeforeSend: null,      
  BeforeConstruct: null,         
  video: true,
  pluginUrl : 'https://cdn.staticaly.com/gh/BlogrCart/widget/09ad2032/blogger-feed.min.js',
};


Detail Description


containerId : null

The DOM element by ID to attach the constructed feed.
By default the HTML/Javascript widget ID has been assigned by BCartCC

Accepted Values: strings
label : null

The posts by Label to retrieve and construct.

Accepted values: strings
random : false

Display constructed posts in random order.

Accepted values: boolean
maxResults : 5

The maximum of posts to display.

Accepted values: integers
maxFeed : 150

The maximum feed to retrieve a blog feed.

Accepted values: integers
heading

Heading title for the constructed posts retrieved. Text displayed using an <h3> heading tag with assigned classname feed-heading.

Accepted values: strings
title : true

Displays the post titles if set to true.
Extend title object values to update title characters & ellipsis

Accepted values: boolean/object

Extending title : {} object:

title : {
  chars: 70,
  more: '....'
},

chars - the amount of characters
more - text displayed after snippeted text
summary : true

Displays the post summary if set to true.
Extend summary object values to update summary characters & ellipsis

Accepted values: boolean/object

Extendingsummary : {} object:

summary : {
  chars: 140,
  more: '...'
},

chars - the amount of chars
more - text displayed after snippeted text
image : true

Displays the post image if set to true.
Extend image object values to update image width, size, default image if the hosted image supports Blogger image retrievals. Otherwise, the original image URLs is used instead.

Accepted values:boolean/object

Extending image : {} object:

image : {
  width: 640,
  height: 480,
  defaults: 'https://4.bp.blogspot.com/-MowVHfLkoZU/VhgIRyPbIoI/AAAAAAAATtE/qHST4Q2YCCc/s1600/placeholder-image.jpg'
  youtube: 'sddefault',
},

width - width/size of post featured image in pixels if uploaded via Blogger UI.
height - height of post images in pixels
defaults - full qualified URL to a stored images to replace poast images which is not found.
youtube - Youtube video thumbnail size "sdddefault" "hqdefault"
labels : true

Displays the post labels if set to true.
Extend labels object values to update the amount of label to display

Accepted values: boolean/object

label : {
  limit : 1,
},

Extending label : {}object:

limit - the amount of Labels to display
date : true

Displays the post date by updated if set to true.
Extend date object values to update date format, separator, months names & published timestamp.

Accepted values: boolean/object

date : {
  format : "mmddyy",
  spacer : [' ',', '],
  months : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Ogo','Sep','Oct','Now','Dec'],
  published : false
},

Extending date : {} object:

format - dd(day) mm(month) yy(year) available values "ddmmyy" "mmddyy" "yymmdd" "yyddmm"
spacer - the date separators in Array format required 2 values
months - the months in array format required 12 values
published - set to true to display posts by published date
author : true

Displays the post assigned author if set to true.
Extend author object values to display author image (if available).

Accepted values: boolean/object

author : {
  image : false 
},

Extending author : {} object:

image - attempts to display author image
video : false

Attempts to display Youtube videos if found as post featured images.
Extend author object values to display author image (if available).

Accepted values: boolean/object

video : {
  attributes : { 
 
  },
  parameters : {

  }, 
},

Extending video : {} object:

attributes - set of object key value pairs to pass as video iframe attributes
parameters - set of object key & value pairs to pass as Youtube parameters request https://developers.google.com/youtube/player_parameters?playerVersion=HTML5
BeforeSend : null

Attempts to pass a function before blog feed requests.
Passes @params final settings object with function for further manipulation.

BeforeSend : function( data ){
  console.log( data ); // data - the @params values 
},

Accepted values: function
AfterConstruct : null

Attempts to add a function after blog feed have been retrieved & constructed.
Passes constructed feed in HTML for further manipulation.

AfterConstruct : function( obj ){
  console.log( obj ); // displays the constructed feed 
},

Accepted values: function

Plugin library helpers.

This plugin uses BlogrCart Feed retriever hosted at Github. Added dynamically & only once if BlogrCartFeed() instance is not available.

pluginUrl : https://cdn.staticaly.com/gh/BlogrCart/widget/09ad2032/blogger-feed.min.js',

3.0 Blogger Responsive Content Carousel Settings


BlogrCart CC full parameters available & used with slickjs responsive content carousel library http://kenwheeler.github.io/slick/

var SLIDER = {
  onFadeIn : 'slow',
  fade: false,
  slidesToShow: 2,
  slidesToScroll: 1,
  speed: 400,
  autoplaySpeed: 3000,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  //centerMode: true,
  autoplay: true,
  nextArrow: '<button class="slick-arrow slick-next">Next</button>',
  prevArrow: '<button class="slick-arrow slick-prev">Prev</button>',
  responsive: [{
    breakpoint: 768,
    settings: {
      centerMode: false,
      slidesToShow: 1,
      slidesToScoll: 1,
    }
  }],
  jQueryUrl : 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',
  jsUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.min.js',
  cssUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.css'
};

More information on slickjs parameters available at http://kenwheeler.github.io/slick/ page

BlogrCart CCPlugin Library Helpers.

This plugin requires jQuery. Added dynamically & only once if jQuery is not available in your blog page.

jQueryUrl : 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',

Requires slickjs plugin library hosted at Github. Added dynamically and only included only once if $.fn.slick function is not available.

jsUrl : 'v/kenwheeler/slick/ee7d37fa/slick/slick.min.js',

Requires slickjs plugin CSS hosted at Github. Added dynamically & only included only once if $.fn.slick function is not available.

cssUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.css',

4.0 BlogrCart Content Carousel Custom Styles/CSS


By default a general content slider styling have been applied. The styles is included with this <link/> tag

<link href="https://cdn.staticaly.com/gh/BlogrCart/widget/d3309de9/blogger-feed-carousel.min.css" rel="stylesheet"></link>

Users can add their custom styling right in BlogrCart Content Carousel widget. Some example CSS have been included for further customization.

<style>
/* Add Custom CSS */
.feed-image:after, .feed-video-wrapper {
  padding-bottom: 75%;  /* 4:3 */
}
.feed-caption {
  padding-top:1.5em;
  color: white;
  background-color: rgba(0,0,0,.55);
  outline: solid 1px rgba(255,255,255,.35);
  outline-offset: -.75em;
}
.feed-caption h4 {
  font-size: 1.25em;
}
.feed-caption p {
  font-size: 1em;
}
.feed-meta {
  font-size: 0.825em;
}
</style>

5.0 Dependencies


jQuery library hosted by Google CDN. 

<script src="https://cdn.staticaly.com/gh/BlogrCart/widget/09ad2032/blogger-feed.min.js" type="text/javascript"></script>

slick(js) - Last Carousel You'll Ecver Need by developed & maintained by @KenWheeler on Github

<script src="https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.min.js"/>
<link href="https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.css"/>

All codes & detail documentation made available at the respective GitHub pages & delivered via Staticaly Content Delivery Network (CDN). 

<script src="https://cdn.staticaly.com/gh/BlogrCart/widget/7f09459f/blogger-feed.min.js" type="text/javascript"></script>

6.0 Optimizing BlogrCart CC Widget


Rule of thumb -- the more images/data displayed on a webpage, the more bytes the browser needs to download - slower page display. This can be clearly seen on mobile devices

With that said, please be considerate. Set at a minimum amount of posts to display at maxResults and maxFeed variables.

Even though all necessary optimization like async external files inclusion, non blocking above the fold scripts etc have been incorporated, in the end, it is up to you and your best judgements.

By default all external files have used with BlogrCart CC widget have been optimized for performance on any blog. The external files is served using free CDN services which make files served amazingly fast.

However, if you want to embed the library codes directly to your theme, you can achieve this by following below instructions.

Add All Javascripts Contents.

  • Create a plain text file using your favorite text editor.
  • Copy below file contents from this URL end point, starting with...

https://cdn.staticaly.com/gh/BlogrCart/widget/7f09459f/blogger-feed.min.js

  • Then followed by contents from this file...

https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.min.js

  • Highlight all of these codes to copy & go to your blog Layout.
  • At Blog Layout click +Add a Gadget select HTML/Javascript gadget, then paste the codes inside the widget body like so....

<script>

... {{ your copied codes }}...
]
</script>

  • Click Save to save widget.
  • Drag & drop widget somewhere above your BlogrCart CC widget.
  • Click Save Arrangements.

Add Custom CSS

  • Create a ne plain text file with your favorite text editor.
  • Select/highlight all codes at this file endpoint...

https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.css

  • Then copy all file contents at below URL and place it below the above contents...

https://cdn.staticaly.com/gh/BlogrCart/widget/d3309de9/blogger-feed-carousel.min.css

  • Once done, go to Theme > Customize > Advance > Add CSS then add the carousel CSS inside the AddCSS box.
  • Click Apply to Blog.

You can further remove the external file link tag at your BlogrCart CC widget content. Find below in your widget to remove/delete.

<link href="https://cdn.staticaly.com/gh/BlogrCart/widget/d3309de9/blogger-feed-carousel.min.css"></link>

7.0 Troubleshooting & Custom Setup


By default the widget will initiate and display on Blogger homepage. Users can further tweak this setup by going to the widget codes to update existing widget settings.

  • Go to Theme
  • click Edit HTML
  • click Jump to Gadget
  • select your custom HTML/Javascript gadget
  • expand <b:includable id="main">
  • find below

cond='data:view.isHomepage'

  • To replace like so...

Displays at Homepage and Post pages => cond='data:view.isHomepage or data:view.isPost'
Displays at Homepage and Static pages => cond='data:view.isHomepage or data:view.isPage'
Displays at Homepage and Index pages => cond='data:view.isMultipleItems'
Displays in Post Pages only => cond='data:view.isPost'
Displays in pages other than Homepage => cond='!data:view,isHomepage'

  • Click Save Theme

Need More Customization & Features?

You can contact us by using our Contact page here Please provide your name, blog URL, and a detail description of your issues -- our Theme designers & developer team may not entertain if failure to do so.

If you need custom setup, removing attribution, custom pop up styling & effects --you can also use our Contact page to get in touch with us.

This software/application is provided as-is with no warranty -- developer/author/designers will not be reliable for any loss whatsoever.

What do you think? Do you have any feedback or additional functions that needs to be included with Blogger content slider gallery gadget? Add your questions & comments below...


New shopping cart widget for Blogger blogs -- transform your blog & sell products using your blog posts instantly! Visit Add Shopping Cart Widget Page to learn more.

Get In Touch