Image
Dida
Administrator
Author
Last edited:

Are you looking for a slider widget for your Blogger website, or do you want to make your homepage more unique? This slider automatically fetches the latest posts from a specific label and displays them in a modern carousel layout with thumbnails, genres, and descriptions.

It’s perfect for movie, book, TV series, anime, or manga review blogs. In this tutorial, you’ll learn how to add a responsive Owl Carousel slider to your Blogger gadget and give your homepage a more engaging and modern look.

Adding an Owl Carousel Slider Widget on Blogger

Before making any changes to your HTML, always back up your current theme. Go to your Blogger Dashboard, click Theme > click the down arrow next to the Customize button, and then select Backup and download the file.

Step 1: Add CSS

  1. In the Theme section, click the down arrow next to Customize, and select Edit HTML
  2. Click anywhere inside the HTML editor and press Ctrl + F (or Cmd + F on Mac)
  3. Search for this tag: </b:skin>
  4. Copy and paste the entire CSS code above it 
    .slider.section{margin-bottom:20px;overflow:hidden}.ct-wrapper{padding:0;position:relative;width:auto;margin:0;overflow:hidden}.owl_carouselle.owl-carousel.owl-loaded{margin-bottom:0}.slider-item{position:relative;height:100%}.slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#2d3436;opacity:.4;z-index:1}a.slider-image{height:100%;filter:blur(0px)}.post-descript{position:absolute;left:5%;top:5%;z-index:99;padding:25px;text-align:left;transition:all .3s;width:70%;overflow:hidden}.slider-wrapp .post-inner{padding:0;margin:auto}.slider-item h2.post-title{max-width:350px;font-size:24px;margin:0;max-height:none;overflow:hidden;line-height:normal;white-space:nowrap;text-overflow:ellipsis}.slider-item h2.post-title a{color:#fff;transition:all .3s}.slider-item h2.post-title a:hover{color:#aaa}.slider-item .post-date{display:inline-block;color:#aaa;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase}.slider-item .post-tag a{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;transition:all .3s}.covert{position:absolute;top:14%;right:5%;bottom:0;height:200px;width:140px;z-index:5}.covert a{filter:none!important;border-radius:3px}.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}.owl-dots{position:absolute;top:255px;right:0;left:0;margin:auto;overflow:hidden;text-align:center}.owl-dots button{display:inline-block;margin:0 3px;border-radius:10px;padding:6px;outline:none;border:none;background:rgba(255,255,255,.24);box-shadow:0 2px 2px rgb(0 0 0 / 60%),inset 0 1px 1px rgb(0 0 0 / 52%)}.owl-dots button.owl-dot.active{background-color:#f39c12}.owl-carousel .owl-item{height:290px;box-shadow:0 20px 10px -15px rgba(0,0,0,.1);overflow:hidden}.owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)}.owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s}.owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0}.owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)}.post-sinop{display:block;margin-top:5px;color:#ddd}.post-sinop strong{text-transform:uppercase}.post-sinop b{display:none}.post-sinop p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:5px 0;font-size:14px}.post-title{display:flex;display:-ms-flex;display:-webkit-flex}h2.post-titlenya{font-size:1.4em;text-transform:uppercase;line-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;margin: 10px 0;max-width:85%}h2.post-titlenya a{color:#fff}.right-title{order:2;width:100%}.post-meta{margin-right:5px;order:1}.post-tr{display:inline-block;height:48px;margin:-5px 0 0 -5px}.site-ret{font-size:48px;color:#f3d872;position:relative}.site-ret .fa-star:before{font-family:&quot;Font Awesome 5 Free&quot;;font-weight:600}.site-ret .fa span{font-size:14px;position:absolute;left:0;top:29px;color:#333;font-weight:600;letter-spacing:-1px;display:block;height:48px;width:100%;text-align:center}.post-genre{margin-top:5px;margin-left:-3px}.genre-slide{font-size:14px;display:inline-block;max-width:75%;overflow:hidden;text-overflow:ellipsis;color:#ddd;white-space:nowrap}.genre-slide a.manual-label:not(:last-child)::after{content:',';}.genre-slide .manual-label{color:white;padding-left:3px;display:inline-block}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@media screen and (max-width:768px){.feature-item{width:50%;margin:0 auto 15px auto}}@media screen and (max-width:640px){.post-descript{padding:15px 10px;left:3%;right:3%}.slider-wrapp .post-inner{padding:0 10px}.slider-item h2.post-title{font-size:16px;max-width:50%}.feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}.covert{height:130px;width:92px;top:7%;right:3%}}@media screen and (max-width:430px){.covert{height:100px;width:71px}}.thumb.overlay:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-color:rgba(0,0,0,.7);background-image:url(https://1.bp.blogspot.com/-eQ7EqK07jKo/YLJGRM_fnfI/AAAAAAAAEvU/_D-ctbfUt3cUo5dOpBfTKOw0eE4p90evwCNcBGAsYHQ/s3/pattern.png)!important}.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}.site-ret span span{font-family:Signika Negative}.post-titlenya a{color:white;font-size:21px}.label-slider{background:#b51200;padding:3px 4px;border:none;border-radius:5px;font-size:12px;margin-left:3px}.label-slider:hover{background:gray}.post-tag span{font-size:13px}.stts-poss,.type-poss{font-size:14px}.tagstat{display:flex;flex-wrap:nowrap;align-items:center;}.type-poss:not(last-child)::after{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15px' height='15px' viewBox='0 0 24 24'%3E%3Cpath fill='%23b1c7c7' d='M12 10a2 2 0 0 0-2 2a2 2 0 0 0 2 2c1.11 0 2-.89 2-2a2 2 0 0 0-2-2'/%3E%3C/svg%3E");display:inline-block;margin:0 3px;vertical-align:middle;}
    To add a blur effect to your slider’s background, find the a.slider-image selector in your CSS and change the filter: blur value from 0px to 30px.

Step 2: Add JavaScript

  1. While still in the HTML editor, press Ctrl + F (or Cmd + F on Mac), and search for: </head>.
  2. Copy and paste this code above it: 
    <script id='owl-carousel-js' src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js' type='text/javascript'/>
  <script type='text/javascript'>//<![CDATA[
/* ==========================================
   EDIT YOUR SETTINGS HERE
   ========================================== */
const config = {
    noImage: "http://1.bp.blogspot.com/-S5pmP6Y0KUs/V6CsQEqKNGI/AAAAAAAAEFY/LZigJ20wKVkpzFLJSuzvjJDkC9z9IFy5wCK4B/s1600/image-not-found.png",

    // List the types you want to highlight in the "Type" tag
    typePoss: ["Movie", "Tv Series", "Novel", "Animation", "Anime"],

    // List the statuses you want to detect
    statusPoss: ["Completed", "Ongoing", "Dropped"],

    // List the genres you want to detect
    allowedGenres: ["Action", "Adventure", "Comedy", "Drama", "Romance", "Fantasy"],
    maxPosts: 8,
    summaryLimit: 200
};

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('x 1m(e,a){E 8.X(8.W()*(a-e+1))+e}x 11(e){4 a,s,r=e.6;q(0===r)E!1;7(;--r;)a=8.X(8.W()*(r+1)),s=e[r],e[r]=e[a],e[a]=s;E e}x 1n(e){1o a=11(e.1l.1k),s=8.1h(a.6,9.1i);z.L(\'<2 3="1j-1p"><2 3="S 1q-1w">\');7(4 r=0;r<s;r++){7(4 t=a[r],l=t.D.$t,i="",o=0;o<t.J.6;o++)q("1x"==t.J[o].1y){i=t.J[o].A;I}7(4 d="",n=0;n<t.5.6;n++)q(9.1u.G(t.5[n].j)){d=\'<B 3="1f-V">\'+t.5[n].j+"</B>";I}7(4 c="",v=0;v<t.5.6;v++)q(9.1r.G(t.5[v].j)){c=\'<B 3="1s-V">\'+t.5[v].j+"</B>";I}4 f="";q(t.5)7(4 m=0;m<t.5.6;m++){4 p=t.5[m].j;9.1e.G(p)&&(f+=\'<a 3="1d-K" A="/1b/K/\'+p+\'">\'+p+"</a>")}4 u=t.R?t.R.$t:t.Q?t.Q.$t:"",g=$("<2>").F(u),h=g.H(".O").6?g.H(".O").F():g.H("p").18().F()||"",y=9.1A;t.13$12&&(y=t.13$12.T.P("1X","1V").P("/1U-c/","/1S-1T/"));4 b=\'<a A="\'+i+\'" 1Y-K="U" 3="C-20" 21="N:T(\'+y+\') 1Q-1G Y Y;N-1R: 1H;1F: 1E%;1B:1D;"></a>\',w=\'<2 3="C-1I"><2 3="C-1O"><2 3="U 1P">\'+b+\'</2><2 3="1N">\'+b+\'</2><2 3="k-1K"><2 3="1L">\'+d+" "+c+\'</2><2 3="k-D"><2 3="1M-D"><Z 3="k-1J"><a A="\'+i+\'">\'+l+\'</a></Z></2></2><2 3="k-10"><2 3="10-22">\'+f+\'</2></2><2 3="k-1W"><p>\'+h+\'</p></2></2><2 3="1C"></2></2></2>\';z.L(w)}z.L("</2></2>")}$(z).1Z(x(){$(".S").19({1a:!0,17:!0,1c:!0,16:!1,14:!0,15:1z,1t:{0:{M:1},1v:{M:1},1g:{M:1}}})});',62,127,'||div|class|var|category|length|for|Math|config||||||||||term|post||||||if|||||||function||document|href|span|slider|title|return|html|includes|find|break|link|label|write|items|background|desc|replace|summary|content|owl_carouselle|url|thumb|poss|random|floor|center|h2|genre|shuffleArray|thumbnail|media|dots|smartSpeed|nav|loop|first|owlCarousel|autoplay|search|lazyLoad|manual|allowedGenres|type|1e3|min|maxPosts|ct|entry|feed|getRandomInt|postarea4|let|wrapper|owl|statusPoss|stts|responsive|typePoss|600|carousel|alternate|rel|1200|noImage|display|clear|block|100|width|repeat|cover|item|titlenya|descript|tagstat|right|covert|wrapp|overlay|no|size|s720|rw|s72|maxresdefault|sinop|default|aria|ready|image|style|slide'.split('|'),0,{}))
//]]></script>

    Note: The core logic of this script is compiled and protected to prevent unauthorized redistribution. However, the customizable parameters (noImage, typePoss, statusPoss, allowedGenres, maxPosts, and summaryLimit) are fully editable.

  3. Click Save

Step 3: What You Must Change

You can customize the slider’s behavior by modifying the config object in the script.

Parameter Example
noImage Image URL
typePoss Movie or TV Series
statusPoss Complete or Ongoing
allowedGenres Action or Romance
summaryLimit 400
  • noImage: Add a fallback image if the post doesn't have an image.
  • typePoss, statusPoss, allowedGenres: Labels indicate the type, status, or genre of your post. Only posts with labels included in this array will be shown.
  • summaryLimit: Controls the length of the post descriptions displayed by the slider.

Step 4: Add a Gadget

  1. Go to Layout in your Blogger Dashboard.
  2. Click Add a Gadget in the section where you want the slider and select HTML/JavaScript.Screenshot on how to add HTML/JavaScript widget
  3. Copy and paste the following code into the Content box: 
    <script>document.write("<script src=\"/feeds/posts/default/-/Series?max-results=5&orderby=published&alt=json-in-script&callback=postarea4\"><\/script>");</script>
  4. Change the Series in the code above to the Label of the posts you want to show in the slider. If you want to show all recent posts, remove /-/Series. Your script will become like this: 
    <script src=\"/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=postarea4\">
  5. You can change the number of posts by changing this max-results=5 to max-results=10.
  6. Save the gadget

Step 5: Display your Description/Summary

For the slider to display your descriptions correctly, wrap your summary or synopsis in the specified HTML tag when writing your post:

  1. Inside your Blogger post editor, switch to HTML View.Screenshot on how to change from Compose view to HTML view
  2. Wrap your summary like this: 
    <div class="desc">This is your summary/synopsis...</div>
  3. Click Publish or Update
    4. Owl Carousel Slider Preview Image

If you encounter any issues, such as images not displaying, please check the following:

  • Images not showing: Make sure your posts have a Featured Image. This should be the first image in the post.
  • Slider is blank: Check that the Label name in Step 3 exactly matches the labels assigned to your posts. The label name is case-sensitive.
  • Genres are missing: Check the labels in the allowedGenres array. Only labels listed in this array will be displayed.

Final Thoughts

Can I add my personal rating to the slider and display it? Yes, you can add your personal rating, such as 8/10, 9/10, etc. Just replace the labels you want to display in the config statusPoss. Make sure your post is properly labeled. Learn more about the widgets you can add to your website.