How To Setup Sorallax Blogger Template

Sorallax Blogger Template

Sorallax Blogger Template is a most advanced landing page template for blogger which provides lots of incredible features. Sorallax is a responsive blogger template so you don't have to worry about its style on different devices. Sorallax is equipped with various of widgets which will help you to publish your blog more professionally. To make it easy for you we have published this detailed documentation, so that you can setup your blog correctly. You have made a good decision by choosing our template. You can check the live demo or download the template through the button below and also Please Read this documentation carefully in order to set up your blog and please note that there’s no support for free users.

Basic Setup

  1. Template Installation
  2. Logo Setup
  3. Template Setting
  4. Shortcodes & Markups
  5. Create Sitemap

Header Background

Access your blog Theme > click Edit Html>  and then find the following coding.

.header-outer {
background-position: top left;
width: 100%;
min-height: 100%;
max-height: -13px;
color: #fff;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiZA0u6dzdZtJXdpQRoSZ-Y8Lc1YJEcwsdR0_zxbYnsVo7KPuRBAsyNCaGs_bVSAUCiziadxcaHq-m5psGdfYRb4xboIwvEVXNxVTfH3nGxFSehWfoddwekeLfpGTUFOsCWhVrRF7fGk/s1600/1.jpg);
}

Change the black highlighted code with your own image link.

Note:- Don't change anything else, otherwise the background will not work properly.

Social Widget

Access your blog Theme > click Edit Html>  and then find the following coding.

<div class='blog-description social-icons'>
            <a href='http://www.facebook.com/' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGjdlz5tJsN8m8afrc85AYaM9sxMLRf51amexU3_gpAOVPbLpUzIKeatgoz5H7uLQVEz_s6_V10iVgRKCedex2EcguN2UtrPl62zgmOrKuLSMMoBzEbUlSiuvH1Xj4b-jwinPQ8WQ5FgI/s1600/facebook.png'/></a>
            <a href='http://www.twitter.com/' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUJP2b-G68qJXlZMpfnoAgluwzDP09syDwqAv2DxRRwcMZNJh4y-321K66kjn5lCjK2mw0qqq6a08Jn3WMqsiVjiLRxwjKElPIKOKHoCXB1w3G-VZyxbo9ansjl6mAU8W6LuySfDg4n8/s1600/twitter.png'/></a>    
            <a href='https://plus.google.com' target='_blank'><img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWpp5q1tXEaTvGbc3v1FmEi826J4_7yaSTrtyfVW5olD1USDRbLfyV7FML39zbuaokEq5qCQ6C45Sg-mJIT0JqYQTmXsRPfCxRZLdu_YzCHy6o2097a_v9UUXCwxU6vyK9bCuSLesUrRw/s1600/google-plus.png'/></a>          <a href='https://pinterest.com/' target='_blank'><img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigGp0QwLM-TQL3cwISRc4f_RucqOlOfX5_PXouS7bGgwAf77JzDaxjX0SzibH6gFLOfO1hEk5Z-8-EqaRUwcXUEdOhqrwktRa8N-y7P4MeywqWdXZvqLBgD7cpAecDVaTyy-szgvi7jwI/s1600/pinterest.png'/></a>
            <a href='https://behance.com/' target='_blank'><img alt='Behance' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQyF3ogipSsX69_QhV6EMZBrGuTdhj0t054pt6FwnXSwiCyIwL656tB-gGRRYCoyaWHLNoQO7qgHL-ac93FExwRteH10H-JGY5cv6N6D_Z6x_SKJIRP0Tihn1woTKzdV-GPhxBKM1-Zg/s1600/behance.png'/></a>
            <a href='https://dribbble.com/' target='_blank'><img alt='Dribbble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiWjYE64jZr7PK4ZEgbYGEgpspmFACcoRGAfPdE9VRwUoUALdgy5KGqPnPk6Io3x_IMbgG7D65wCgfB8ZPEse134zGT6cG2mGt_tLk3SJYtpmXmxVnxdQmjd7qXbqg0OphZxIOqkTpJ90/s1600/dribbble.png'/></a>
            <a href='https://flickr.com/' target='_blank'><img alt='Flickr' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXQaPa509r2-vEMXm6RSe_Yo78joK1EdXKwh0cIImE6Pg4VzEEuJTzDSx8l5B3RwneL84ECXYRVB_aqwB9eF6yGsF9JIDMJr3Y8EKm_4Bs54L0pBJf1_gpGxKYbntTntRI-T1IOTIwfhg/s1600/flickr.png'/></a>
            <a href='https://youtube.com/' target='_blank'><img alt='YouTube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Qp0RtD7Er9hsfu69gEoxv309ko6biZ6Ov0i_z5HpC1dXqxf9oCRr3duuRFgLGzntq2nQ3AFblm1h-GFZP353KZPwdfmps6ZxwqY5fXBveydRfyj2reQqrVJ74R6tQ98b_CtWBT4oyyk/s1600/youtube.png&quot;'/></a>
        </div>

Change the links with your own social links.

Note:- Don't change anything else, otherwise the widget will not work properly.

Menu

Access your blog Theme > click Edit Html>  and then find the following coding.

<ul id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>                
  <li><a href='/' itemprop='url'><span itemprop='name'>Home</span></a></li>
<li><a href='#about' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='#review' itemprop='url'><span itemprop='name'>Review</span></a></li>
<li><a href='#service' itemprop='url'><span itemprop='name'>Services</span></a></li>
<li><a href='#Experties' itemprop='url'><span itemprop='name'>Experties</span></a></li>
<li><a href='#blog' itemprop='url'><span itemprop='name'>Latest Blog</span></a></li>
<li><a href='#contact' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a href='http://www.soratemplates.com/2014/11/sorallax-blogger-templates.html' itemprop='url'><span itemprop='name'>Download This Template</span></a></li>
</ul>

Change the details with your own.

Note:- Don't change the href=' ' Values Otherwise the menu will not work.

Slider

Access your blog Theme > click Edit Html>  and then find the following coding.

<div class='master-slider ms-skin-default' id='MS53d5cadc7a9d0'>

<div class='ms-slide' data-delay='6' data-fill-mode='fill'>
<img alt='Slider' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWsZsnSGlyBfGz5ASJ7yLhNyQ7kxgiL7eAsxaqWY_Ib2LLKqYUhD6h-1t4pbVeeVIwv7haxADlc3HdxyS_ox-DTP_uQbEyedD5I9az7m5wwsjg3lxGA6-xExTR7gLBFj_g_o6DVPvKCxw/s1600/P1000733.jpg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWsZsnSGlyBfGz5ASJ7yLhNyQ7kxgiL7eAsxaqWY_Ib2LLKqYUhD6h-1t4pbVeeVIwv7haxADlc3HdxyS_ox-DTP_uQbEyedD5I9az7m5wwsjg3lxGA6-xExTR7gLBFj_g_o6DVPvKCxw/s1600/P1000733.jpg' title=''/>


</div>
<div class='ms-slide' data-delay='6' data-fill-mode='fill'>
<img alt='Slider' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkr5BlOfSarRttZgwmOE8XI3FnehlFl-W19RQRReP3DfaCZm5wsoq3TsBXv7cCok2ZLWgQDqvYPGAptZa2lYTtjKi7g841kIpyj1UXR6GW1ihoGOd41B0PN8yN8ym7KXSWQoRpyTk-SEQ/s1600/large.jpg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkr5BlOfSarRttZgwmOE8XI3FnehlFl-W19RQRReP3DfaCZm5wsoq3TsBXv7cCok2ZLWgQDqvYPGAptZa2lYTtjKi7g841kIpyj1UXR6GW1ihoGOd41B0PN8yN8ym7KXSWQoRpyTk-SEQ/s1600/large.jpg' title=''/>

</div>
<div class='ms-slide' data-delay='6' data-fill-mode='fill'>
<img alt='Slider' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjOiaPo9Qmf2ibMgexFfJdW5h25seMIOCF7TYWuWMlSIJRiYZcbLz8Di0VOkVFtw1Z-AgHuT7br_rgFcgjqRZsJOHYHKomYZZL2yBOVxEGz-0gA2TGnI3Ysoq2T3bKNF7sa_gdZqfbO-g/s1600/0204.jpg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjOiaPo9Qmf2ibMgexFfJdW5h25seMIOCF7TYWuWMlSIJRiYZcbLz8Di0VOkVFtw1Z-AgHuT7br_rgFcgjqRZsJOHYHKomYZZL2yBOVxEGz-0gA2TGnI3Ysoq2T3bKNF7sa_gdZqfbO-g/s1600/0204.jpg' title=''/>


</div>

</div>

Change the details with your own.

We are sorallax - About (Section-1)

Access your blog Theme > click Edit Html>  and then find the following coding.

<div class='servicesholder aboutbox' id='about'>

  <h3 class='anititle'>We are Sorallax.<br/>
We Design your Future</h3>


<p class='overview'>Lorem Ipsum is simply dummy text of the printing and typesetting</p>


<section class='about' id='about'>
      <div class='container'>
        <div class='row'>
          <div class='features'>
            <div class='col-md-3 animate fadeIn animated' data-delay='500'> <i class='fa fa-rocket hovicon effect-1 sub-a'/>
              <h4>Lorem Ipsum </h4>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            </div>
            <div class='col-md-3 animate fadeIn animated' data-delay='1000'> <i class='fa fa-flask hovicon effect-1 sub-a'/>
              <h4>Lorem Ipsum </h4>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            </div>
            <div class='col-md-3 animate fadeIn animated' data-delay='1500'> <i class='fa fa-envelope hovicon effect-1 sub-a'/>
              <h4>Lorem Ipsum </h4>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            </div>
            <div class='col-md-3 animate fadeIn animated' data-delay='2000'> <i class='fa fa-coffee hovicon effect-1 sub-a'/>
              <h4>Lorem Ipsum </h4>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            </div>
          </div>
        </div>
      </div>
   
    </section>




    </div>
Change the colorful highlighted details with your own (About heading, About heading description, About icon, About heading, About description)

    Our Clients - Quotes (Section-2)

    Access your blog Theme > click Edit Html>  and then find the following coding.

    <div class='quoteholder' id='review'>

      <h1>Our Clients </h1>
      <h5>We Value The Quality First</h5>

    <div class='quoteblock'>
    <p>The greatest education in the world is watching the masters at work.</p>
    <cite>- Michael Jackson</cite>
    </div>

    <div class='quoteblock'>
    <p>Tomorrow is my exam, but I don&#39;t care. Bcoz a single sheet of paper can&#39;t decide my future.</p>
    <cite>- Thomas Edison</cite>
    </div>

    <div class='quoteblock'>
    <p>If you can&#39;t make it good, at least make it look good.</p>
    <cite>- Bill Gates</cite>
    </div>

    <div class='quoteblock'>
    <p>Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.</p>
    <cite>- Linus Torvald</cite>
    </div>

    <div class='quoteblock'>
    <p>An eye for an eye only ends up making the whole world blind.</p>
    <cite>- Quote Author (Quote #5)</cite>
    </div>
        </div>
    Change the colorful highlighted details with your own (Quotes heading, Quotes heading description, Quotes , Quotes author)

      Services (Section-3)

      This is the title for recent posts you will publish.
      Access your blog Theme > click Edit Html>  and then find the following coding.

      <div class='aboutusholder aboutbox' id='service'>



        <h3 class='anititle'> Services
      </h3>

      <p class='overview'>Lorem Ipsum is simply dummy text of the printing and typesetting the readable content of a page when looking at its layout. The point of using Lorem Ipsum is it has a more-or-less normal distribution of letters, as opposed readable English.</p>
        <br/>  <br/>

          </div>
      Change the details with your desired one.

      Our Expertise (Section-4)

      Access your blog Theme > click Edit Html>  and then find the following coding.

         <div class='col-md-12'>
                <div class='animate fadeIn animated'>
      <h3 class='exertis'> Our Experties
      </h3>

               
                    <p class='title-detail'>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
                  </div>
                <div class='skills'>
                
                  
                  <div class='skillbar clearfix' data-percent='60%'>
                    <div class='skillbar-title'><span>HTML5</span></div>
                    <div class='skillbar-bar' style='overflow: hidden; width: 60%;'/>
                    <div class='skill-bar-percent animate pulse animated' data-delay='500'>60%</div>
                  </div>
                  <!-- End Skill Bar -->
                  
                  <div class='skillbar clearfix ' data-percent='88%'>
                    <div class='skillbar-title dark-title'><span>CSS3</span></div>
                    <div class='skillbar-bar bg-dark' style='overflow: hidden; width: 88%;'/>
                    <div class='skill-bar-percent gray animate pulse animated' data-delay='1000'>88%</div>
                  </div>
                  <!-- End Skill Bar -->
                  
                  <div class='skillbar clearfix ' data-percent='95%'>
                    <div class='skillbar-title'><span>jQuery</span></div>
                    <div class='skillbar-bar' style='overflow: hidden; width: 95%;'/>
                    <div class='skill-bar-percent animate pulse animated' data-delay='1500'>95%</div>
                  </div>
                  <!-- End Skill Bar -->
                  
                  <div class='skillbar clearfix ' data-percent='74%'>
                    <div class='skillbar-title dark-title'><span>WordPress</span></div>
                    <div class='skillbar-bar bg-dark' style='overflow: hidden; width: 74%;'/>
                    <div class='skill-bar-percent gray animate pulse animated' data-delay='2000'>74%</div>
                  </div>
                  <!-- End Skill Bar --> 
                  </div>
                  
                </div>
      Change the highlighted text with your own.

        Pagenavigation Results

        Access your blog Theme > click Edit Html>  and then find the following coding.

        <script type='text/javascript'>
        var pageNaviConf = {
        perPage: 7,numPages: 4,firstText: &quot;First&quot;,
        lastText: &quot;Last&quot;,
        nextText: &quot;&#187;&quot;,
        prevText: &quot;&#171;&quot;
        }
        </script>

        Change the value of   perPage: 7  from 7 to any number you want (Archive).

        Facebook Page Plugin:

        <center><div class="fb-page" data-href="https://www.facebook.com/soratemplates/" data-width="360" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div></center>

        or you can follow this tutorial if above method won't work
        How to Add Responsive Facebook Like Box Widget In Blogger

        Template Customization

        Access your blog Template > click Customize.
        Colors

        Installation And Custom Services

        We provide plenty of templates for free but if you want something unique for your blog then let us create a unique design for your blog, Just tell us your needs and we will convert your dream design into reality. We also Provide Blogger Template Installation Service. Our Installation service gives you a simple, quick and secure way of getting your template setup without hassle.

        Disqus Comments