Don't Miss

In this tutorial we're going to share an article on How to Add Slidorion Featured Posts Slider to Blogger Blog.
An Image Slider is used to show most popular or featured posts on a blog. Mostly bloggers use image sliders for attracting their visitors to specific posts, because visitors are likely to get more attracted to sliders. Today we're going to share Slidorion Featured Posts slider for blogger. Slidorion slider is a combination of an image slider and accordion. It displays an image with its title and description. The right side consists of an accordion like slides menu and the images on the left side. The slides are linked to respective tabs with a large array of eye catching effects. In this tutorial we'll show you that How to Add Slidorion Featured Posts Slider to Blogger Blog.

How to Add Slidorion Featured Posts Slider to Blogger Blog

First and foremost, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area, press Ctrl+F to search and search for the </head> tag. Now copy the below code and paste it just above/before the </head> tag

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[

/*!
 * Slidorion, An Image Slider and Accordion Combined
 * Intructions: http://www.slidorion.com
 * Created by Ben Holland - http://www.benholland.me
 * Version: 1.2.0
 * Copyright 2013 Ben Holland <hi@benhlland.me>
 */
!function($){"use strict";$.fn.extend({slidorion:function(options){var defaults={autoPlay:!0,controlNav:!1,controlNavClass:"slidorion-nav",easing:"",effect:"random",first:1,interval:5e3,hoverPause:!1,speed:1e3},opts=$.extend(defaults,options),firstSlide=window.location.hash.match(/slidorion/i)?location.hash.split("/")[1]-1:null;return this.each(function(){var current=firstSlide||opts.first-1,effect=(opts.first,opts.effect),interval=opts.interval,controlNav=opts.controlNav,controlNavClass=opts.controlNavClass,zPos=1,intervalPause=!1,active=!1,prevEffect="",obj=$(this),autoPlaying=null,$slider=$(".slider",obj),$accordion=$(".accordion",obj),$slides=$slider.find(".slide"),$linkHeaders=$accordion.find(".header"),$linkContent=$accordion.find(".content"),effects=["fade","slideLeft","slideUp","slideRight","slideDown","overLeft","overRight","overUp","overDown"],slideEffects=["slideLeft","slideUp","slideRight","slideDown"],overEffects=["overLeft","overRight","overUp","overDown"],animationOptions={queue:!0,duration:opts.speed,easing:opts.easingOption},sliderCount=$slides.length,accordionCount=$linkHeaders.length,randomEffectMap={random:effects,slideRandom:slideEffects,overRandom:overEffects},init=function(){sliderCount===accordionCount?(opts.autoPlay===!0&&(autoPlaying=setInterval(function(){playSlider(current,effect)},interval),obj.data("interval",autoPlaying)),opts.hoverPause===!0&&opts.autoPlay===!0&&obj.hover(function(){intervalPause=!0,stopAuto()},function(){intervalPause=!1,restartAuto()}),resetLayers(),$slides.eq(current).css("z-index",zPos),zPos++,$linkContent.hide(),$linkHeaders.eq(current).addClass("active").next().show(),controlNav&&(obj.append('<div class="'+controlNavClass+" "+controlNavClass+'-left"></div><div class="'+controlNavClass+" "+controlNavClass+'-right"></div>'),$("."+controlNavClass+"-left").click(leftNavigation),$("."+controlNavClass+"-right").click(rightNavigation)),$linkHeaders.click(sectionClicked)):console.log("The number of slider images does not match the number of accordion sections.")},getRandomEffect=function(effect,arr){return effect=arr[~~(Math.random()*arr.length)],effect==prevEffect?getRandomEffect(effect,arr):effect},animation=function(current,section,effect){if(!active){active=!0,opts.autoPlay===!0&&opts.intervalPause===!1&&restartAuto();var $current=$slides.eq(current),$new=$slides.eq(section),currentWidth=$current.outerWidth(),currentHeight=$current.outerHeight();randomEffectMap[effect]&&(effect=getRandomEffect(effect,randomEffectMap[effect]));var changeSlideCSS=function($el,settings){var defs={left:"0",top:"0",zIndex:zPos};$el.css($.extend(defs,settings))},animateSlides=function($el,settings){if($el instanceof Array)return $.each($el,function(){animateSlides($(this),settings)}),void 0;var defs={left:"0",top:"0"};$el.animate($.extend(defs,settings),animationOptions)};switch(prevEffect=effect,effect){case"fade":$new.css({"z-index":zPos,top:"0",left:"0",display:"none"}).fadeIn(opts.speed);break;case"slideLeft":changeSlideCSS($new,{left:currentWidth,top:0}),animateSlides([$current,$new],{left:"-="+currentWidth});break;case"slideRight":changeSlideCSS($new,{left:"-"+currentWidth+"px",top:0}),animateSlides([$current,$new],{left:"+="+currentWidth});break;case"slideUp":changeSlideCSS($new,{top:currentHeight,left:0}),animateSlides([$current,$new],{top:"-="+currentHeight});break;case"slideDown":changeSlideCSS($new,{top:"-"+currentHeight+"px",left:0}),animateSlides([$current,$new],{top:"+="+currentHeight});break;case"overLeft":changeSlideCSS($new,{left:currentWidth}),animateSlides($new,{left:"-="+currentWidth});break;case"overRight":changeSlideCSS($new,{left:"-"+currentWidth+"px"}),animateSlides($new,{left:"+="+currentWidth+"px"});break;case"overUp":changeSlideCSS($new,{top:currentHeight}),animateSlides($new,{top:"-="+currentHeight});break;case"overDown":changeSlideCSS($new,{top:"-"+currentHeight+"px"}),animateSlides($new,{top:"+="+currentHeight});break;case"none":$new.css({"z-index":zPos})}setTimeout(function(){active=!1,resetZpos($new)},opts.speed)}},sectionClicked=function(){if(!active){var section=$(this).index()/2;return section===current?!1:($linkHeaders.removeClass("active").next(".content").slideUp(),$linkHeaders.eq(section).addClass("active").next(".content").slideDown(),animation(current,section,effect),zPos++,current=section,!1)}},playSlider=function(current){$linkHeaders.eq(getNextSlide(current)).trigger("click",sectionClicked)},stopAuto=function(){clearInterval(obj.data("interval"))},restartAuto=function(){clearInterval(obj.data("interval")),autoPlaying=setInterval(function(){playSlider(current,effect)},interval),obj.data("interval",autoPlaying)},leftNavigation=function(){$linkHeaders.eq(getNextSlide(current-2)).trigger("click",sectionClicked)},rightNavigation=function(){$linkHeaders.eq(getNextSlide(current)).trigger("click",sectionClicked)},getNextSlide=function(tempSection){return tempSection++,tempSection===sliderCount?0:0>tempSection?accordionCount-1:tempSection},resetZpos=function($el){zPos>3*sliderCount&&(zPos=2,$slides.css("z-index","1"),$el.css("z-index",zPos),zPos++)},resetLayers=function(){for(var i=sliderCount-1;i>0;i--)$slides.eq(i).css("z-index",zPos),zPos++};init()})}})}(jQuery);

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {

    $('#slidorion').slidorion({
        autoPlay: true,
        effect: 'fade',
        hoverPause: true,
        interval: 3000,
        speed: 800,
        controlNav: false,
        controlNavClass: 'nav'
    });
  
});

//]]>
</script>
  
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700);

.slidorion {
    position: relative;
    width: 640px;            /* Set to slidorion width. Is equal to .slider + .accordion width */
    height: 350px;            /* Set to slidorion height. Is equal to .slider and .accordion height */
    background: #CBCBCB;
    padding: 10px;
    border: 1px solid #BBB;
    -webkit-box-shadow: 0 0 34px #bbb;
    -moz-box-shadow: 0 0 34px #bbb;
    box-shadow: 0 0 34px #bbb;
    line-height: 20px;
}

.slider {
    width: 62.5%;
    height: 100%;
    position: relative;
    float: left;
    overflow: hidden;        /* Hides the animations */
}

.slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.accordion {
    width: 37.5%;
    height: 100%;
    font-family: Verdana;
    background: #eee;
    box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
    position: relative;
    z-index:999;
    overflow: hidden;
    float: left;
}

.accordion .header {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    background: #ededed;
    background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
    background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
    background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
    background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
    background: linear-gradient(top, #ededed 59%,#dcdcdc 100%);
    border-top: 1px solid #ccc;
}

.accordion .header:first-child {
    border-top: none;
}

.accordion .header:hover {
    background: #EDEDED;
    cursor: pointer;
}

.accordion .header.active {
    border-bottom: none;
    background: #676767 !important;
    color: #FFF;
}

.accordion .content {
    height: 208px;            /* This height needs to be changed as it depends on the accordion height and number of tabs */
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    margin: 0;
    padding: 16px;
    border: none;
    background: #d6d6d6;
    background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
    background: -webkit-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
    background: -o-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
    background: -ms-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
    background: linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
    overflow:auto;
}

.accordion .content p {
    margin-bottom: 10px;
}

.slidorion .slidorion-nav {
    position: absolute;
    top: 200px;
    width: 16px;
    height: 27px;
    z-index: 9999;
    background: url('../img/arrows.png') 0 0 no-repeat;
    cursor: pointer;
}

.slidorion .slidorion-nav-left {
    left: 30px;
}

.slidorion .slidorion-nav-right {
    right: 310px;
    background-position: -16px 0;
}
</style>

Click Save Template button. Now its time to add the HTML, go to Layout >> Add a Gadget >> Scroll down and select HTML/JavaScript gadget from the list. Now copy the below HTML code and paste it in the empty widget box.
Note: You can add it anywhere you want

<div id="slidorion" class="slidorion">

    <div class="slider">
        <!-- slide images -->
        <div class="slide"><a href="SLIDE-1-LINK-HERE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib-gQlrQA5hV-SsImEJatyQ_KOwqOyRx7brsbR_4rso-9StvpSObmYK7amTn0TQ2AvrsIZwqGCx_EBgjwzWpF7yyK0chcDLnvqy5bRgdVnplYOaKFUcaHFssssuIA2n_7GCvjX3UH-555R/s1600/slide-1.jpg" /></a></div>
        <div class="slide"><a href="SLIDE-2-LINK-HERE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSSIUs2c55DZ3trvuYlLc-1cTwK5mJx-v7YENK5b_rPlfTglrw8DGql9frZDZfrcFGf1NgOOaq4n33eeWM82x0cS2s7-LeZmzgYLJJ0vNbbGrLc5iUamOC5GxXPo_UHLaGH_cY2bGcvjR-/s1600/slide-2.jpg" /></a></div>
        <div class="slide"><a href="SLIDE-3-LINK-HERE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGDffF8NFd5GuML29-oUJoBGfLsYJx4F690cqgDo1sADwF4Sk2eS4dhZcYDVWR5bMEFdFjpxMi6AyNtigHs_zYa9LiY9GsdEoSXnbdqgdQwiHlLMi1CgBAXXgSd2VoSfWUiBoI7OwJt0ZM/s1600/slide-3.jpg" /></a></div>
        <!-- slide images end -->
    </div>

    <div class="accordion">
   
        <!-- slide 1 content -->
        <div class="header">Slide Title 1</div>
        <div class="content">
            <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.  </p>
        </div>
        <!-- slide 1 content end -->
       
        <!-- slide 2 content -->
        <div class="header">Slide Title 2</div>
        <div class="content">
            <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.  </p>
        </div>
        <!-- slide 2 content end -->
       
        <!-- slide 3 content -->
        <div class="header">Slide Title 3</div>
        <div class="content">
            <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.  </p>
        </div>
        <!-- slide 3 content end -->
       
    </div>
   
</div>

Customization:
  • Replace the text it Red with the Slide Links
  • Replace the text in green with your slider image URL's
  • Replace the text in yellow with slide titles
  • Replace the bolded text with slides description

Finally click Save button and you're done!

From Editors Desk

We hope this article may have helped you in Adding a Slidorion Posts Slider to your Blogger Blog. Share this article with your friends and don't forget to subscribe us!

19 comments to ''How to Add Slidorion Featured Posts Slider to Blogger Blog"

ADD COMMENT
  1. Is there any way to hide this on individual post pages so that it's visible on the main blog page, but not the other pages?

    ReplyDelete
  2. It is a very useful post. At https://alltopreviews.com/services/dissertationteam Dissertationteam reviews should agree to post this as I think it is a very useful information for every blogger and site owner.

    ReplyDelete
  3. It doesn't make a difference if pay 'something'. A full rollover is connected in light of the fact that the understanding you made was to make installment in full. It is a "payday" advance, to be paid at your next payday, not a normal term credit. Check Cashing San-diegoPayday Loans Chicago Car Title Loans Chicago Check Cashing Check Cashing

    ReplyDelete
  4. Become aware of the recent trends in gaming to take advantage of the technological innovations that are out on the market today. The new Wii controller has a motion sensor, which is something that you may want to experience in your game play. Always be on the lookout for new trends to optimize your gaming experience. https://hacksmista.com/

    ReplyDelete
  5. Spend the time studying every day. The more time you devote to college, the more you will get out of it. Doing well in your classes will ensure that you make more money and have a better job.
    what dwu mean

    ReplyDelete
  6. Amazing paper! Great writer. I cannot Express my gratitude for their work. https://www.admissionservices.com/ I was able to elaborate (by choice, not because it wasnt done right) and my professor said it was "perfect" . Fantastic work!

    ReplyDelete
  7. But if the insect appeared in buildings, whether residential or service facilities, it is expected to collapse, taking many lives and huge material losses if the insect feeds on the structure and concrete for a long time.
    شركة مكافحة حشرات بسكاكا
    شركة رش مبيدات بسكاكا
    المبيدات الحشرية الكيميائية
    افضل شركة مكافحة حشرات

    ReplyDelete
  8. I never really thought I could possibly get a loan online until my friend got a personal loan from Capital One Finance ltd where i also applied for a loan and was approved with a good credit score and i can as well recommend them for anyone who needs a loan. Email: capitalonefinanceltd2@gmail.com or WhatsApp: +1 (267)404-6479

    ReplyDelete
  9. Approaches to work in a gathering: If your outreach group takes up the preparation program as a gathering then your colleagues will have a superior comprehension among them and they will function as one. You will see an impressive change in the plannings, capacities, participation, and capability in your cooperation. Excellent preparing projects will improve the nature of their work. Essay Writing Service

    ReplyDelete
  10. It shows a picture with its title and portrayal. The right side comprises of an accordion like slides menu and the pictures on the left side. The slides are connected to individual tabs with a huge cluster of eye getting impacts. Buy Essay, In this instructional exercise we'll tell you that The best way to Add Slidorion Featured Posts Slider to Blogger Blog.

    ReplyDelete
  11. Yet, on the off chance that the bug showed up in structures, regardless of whether private or administration offices, it is relied upon to implode, taking many lives and enormous material misfortunes if the bug benefits from the design and cement for quite a while. Custom Essay Help Service

    ReplyDelete
  12. Become mindful of the new patterns in gaming to exploit the mechanical advancements that are out available today. The new Wii regulator has a movement sensor, which is something that you might need to encounter in your game play. Continuously be keeping watch for recent fads to upgrade your gaming experience. Assignment Writing Service

    ReplyDelete
  13. Recent and future e-commerce industries include mobile commerce, where products are sold using a variety of mobile devices, and Facebook commerce, which provides an audience to conduct business. http://www.confiduss.com/en/info/blog/article/top-ecommerce-jurisdictions/

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. I was immediately enamoured with your website when I first stumbled across it. While working on my project, I came across your approach of information transmission, which is both new and effective. I hope you'll keep doing so and bringing us new, fascinating, and entertaining material like I get from assignment help services. This is a five-star article in my opinion.

    ReplyDelete