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="http://3.bp.blogspot.com/-dPr3ZxSx1wI/VIZ3DeaBeCI/AAAAAAAANx4/wF41ObBsZa8/s1600/slide-1.jpg" /></a></div>
        <div class="slide"><a href="SLIDE-2-LINK-HERE"><img src="http://1.bp.blogspot.com/-rE5YSN-mShk/VIZ3Bcw9yfI/AAAAAAAANxw/8o0MO5WJEF0/s1600/slide-2.jpg" /></a></div>
        <div class="slide"><a href="SLIDE-3-LINK-HERE"><img src="http://1.bp.blogspot.com/-48n-5XgVtc8/VIZ3DVMtryI/AAAAAAAANx8/OPiQRGudiX4/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!

8 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