How To Setup Sora Sorallax Blogger Template

Sorallax Blogger Template is an one page blogging blogger theme with parallax animation effect. This theme is loaded with high quality widgets and functions, That lets your create professional looking portfolio themes in no time.
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.

See Demo Live Preview Free Download Free Version Buy Now Premium Version

Basic Setup

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

Video Documentation

You can check this below video to understand the setup process much more easily, just click the below image to watch the video directly on YouTube, or click this link - How To Setup Sorallax Blogger Template

Social Buttons

To edit  social icons of this template , you can follow this step:

1. On Blogger Dashbord Click Template

2. Click Edit HTML

3. Scroll down and Find this Code :

<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/AVvXsEgry_yXb01Hz5ZxMKp5h1pDnHdF8Nmaynw2OriFRJZAmHmmZowAthhSLQshy3wuFnamjrmzFsVk96O7Q4pfBvIwEjS7yfdNZrY-KeFYUV8s2DgZ-FX0PjKEM-QmQTtWBUBMAH7U_Blvhpk/s1600/facebook.png'/></a> <a href='http://www.twitter.com/' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY1-XwZIeaoD5KsAB5h0d9sPo0bZGo2HfMsqjXdv2BPef1tiD7ieX5ytHGQ7AL18eBjxU8EcXLIRntzo_pGhAhXoMVCteI5eyhd4frwuDxMB5QIJOlAxVjpTglZERGrLl0gtAcMeikWeE/s1600/twitter.png'/></a> <a href='https://plus.google.com' target='_blank'><img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh99Z2UatlkoQpFTtOXT7qKpz4nITL2oC6swfcq3xN0HnyZ1PjUGxrmAqxKxS-2f3tz4y7fehTzkDzhMSkKj79qjMhRzylRmvVMqe6cK9BkLsFaPBlBDfw6Kmpu0hAMqAIWIt-eSZ1de5o/s1600/google-plus.png'/></a> <a href='https://pinterest.com/' target='_blank'><img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTsb4JP9m0St67I4nZE_I6UwYrLzQvqco3BuMXh8YzDwqdyHi_VGgSYn74FEBBxTp83wAIoY8YzB6eje2qwotqdEp_hd60BGpa4lEr3TMkNs4qPmdeQt9T74wr14EUgyTIiMsVAu1L8M/s1600/pinterest.png'/></a> <a href='https://behance.com/' target='_blank'><img alt='Behance' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_z_YW0vjXz1le6drLT9XAMPve1TDX6r53idLC0s5SGorCLRw3FsFQGbwLO6GrRzZInpt1CFWXWO11KrXOCmeUGQm38eDHzxnauw9kaTJDXCSeyYQ_fnyFRE4I4rqkyngD_dDXQjFYo0/s1600/behance.png'/></a> <a href='https://dribbble.com/' target='_blank'><img alt='Dribbble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCW4qWCI3ptxqW7IXaGHcZ8sy_cTxKikkGBMNZIQrMFtzIAQEGolQIMK2r_y8g6_RFEczCKH_wwUIjfYioIP5hMTuQmdEiKEukt79cLyWTPgafzEl47P-_-YqQLWWQ8nGZ8_PFjAjs5J8/s1600/dribbble.png'/></a> <a href='https://flickr.com/' target='_blank'><img alt='Flickr' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3GPkPunzh5hYt8gbNAYHUAHhtdAgMS25KadIN2Ntardxofk_tGkRSD0LLY_Bu-EgUjbU9UYMBslAtb390OFL6WIUAbrO5yQD-YreCaGT3TfOpwL85duYs3SXlPZ9iWReU5TKt01kDUkI/s1600/flickr.png'/></a> <a href='https://youtube.com/' target='_blank'><img alt='YouTube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOODTEW7MF4bhkbIelugf34FhIps_uwxy7L7RdwIJQyVjv5Ad79btFc0UtsPNhtNqRsDMAlnt_ITiEDJzxR3lMdmdlUbf5g925GSWzUNJLqQq5fljMU1EN3vbVhdhNBh4OvRuuHa3PX4/s1600/youtube.png&quot;'/></a> </div>

4. Change detail with your own

Main Menu/Dropdown Menu/Multi Dropdown

On Blogger Dashbord Click Theme

Click Edit HTML

(Menu) Scroll down and Find this Code :

<ul id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'> <li><a href='/' itemprop='url'><span itemprop='name'>Home</span></a></li> <li class='has-sub'><a href='#' role='menuitem'><span itemprop='name'>Features</span></a> <ul class='sub-menu m-sub'> <li class='has-sub'><a href='#' role='menuitem'>Multi DropDown</a> <ul class='sub-menu2 m-sub'> <li><a href='#' role='menuitem'>DropDown 1</a></li> <li><a href='#' role='menuitem'>DropDown 2</a></li> <li><a href='#' role='menuitem'>DropDown 3</a></li> </ul> </li> <li><a href='#' role='menuitem'>ShortCodes</a></li> <li><a href='#' role='menuitem'>SiteMap</a></li> <li><a href='#' role='menuitem'>Error Page</a></li> </ul> </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 # with your desired url. 

Setting up the Slider

On Blogger Dashbord Click Template
Click Edit HTML
(Slider) Scroll down and Find this Code :

<div class='master-slider-parent ms-parent-id-5' id='P_MS53d5cadc7a9d0'> <!-- MasterSlider Main --> <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/AVvXsEh-oBD_XN-RXslHapfdgZcnFpyemdzuII2TglugoPaunuwfsN-TBC4SIclZlrNRz04YfvEXYm0ZsrpUoahDo6zcgdLLADPFVQISay5OH0zmOFgWGiwIIhcLWeejoPiB7udMMzBDelci_UY/s1600/P1000733.jpg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-oBD_XN-RXslHapfdgZcnFpyemdzuII2TglugoPaunuwfsN-TBC4SIclZlrNRz04YfvEXYm0ZsrpUoahDo6zcgdLLADPFVQISay5OH0zmOFgWGiwIIhcLWeejoPiB7udMMzBDelci_UY/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/AVvXsEh_a-agjOYQnqR6JhhgupmwGkCl9hVVycmcfCP2Ey-dfjJthgoQgjTtFwhLSJzxJ-8rZsty3QeDbrerde4T7-uXql68vczK2CbzvcJSCUY6VQqgc_RSVG-_qf8ndqf3KFWte6nQzlAiBR0/s1600/large.jpg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_a-agjOYQnqR6JhhgupmwGkCl9hVVycmcfCP2Ey-dfjJthgoQgjTtFwhLSJzxJ-8rZsty3QeDbrerde4T7-uXql68vczK2CbzvcJSCUY6VQqgc_RSVG-_qf8ndqf3KFWte6nQzlAiBR0/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/AVvXsEiJNVYLUoV0RkRlIJ2IGzUf7VBGQSFedr2W_76_XmZbJTmkVVOXkfjkfUf6I7tRf-56Dp_uaiOkt4DHlggOhntA3gJBUYpkCGUZtKxpL776tX_y4QxuY2QVLbiFYWKEPZ9-Efve1fmNlVg/s1600/0204.jpg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJNVYLUoV0RkRlIJ2IGzUf7VBGQSFedr2W_76_XmZbJTmkVVOXkfjkfUf6I7tRf-56Dp_uaiOkt4DHlggOhntA3gJBUYpkCGUZtKxpL776tX_y4QxuY2QVLbiFYWKEPZ9-Efve1fmNlVg/s1600/0204.jpg' title=''/> </div> </div> <!-- END MasterSlider Main --> </div>

Change # with your desired url, image with your desired image. 

How To Setup Design Your Future

On Blogger Dashbord Click Template
Click Edit HTML
(Slider) Scroll down and Find this Code :

<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 text with your desired text. 

How To Setup Quoteholder

To edit  social icons of this template , you can follow this step:

1. On Blogger Dashbord Click Template

2. Click Edit HTML

3. Scroll down and Find this Code :

<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>

4. Change detail with your own

How To Setup Services

To edit  social icons of this template , you can follow this step:

1. On Blogger Dashbord Click Template

2. Click Edit HTML

3. Scroll down and Find this Code :

<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>

4. Change detail with your own

How To Setup Experties

To edit  social icons of this template , you can follow this step:

1. On Blogger Dashbord Click Template

2. Click Edit HTML

3. Scroll down and Find this Code :

<div class='experties' id='Experties'> <div class='row'> <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> </div> </div>

4. Change detail with your own

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.

Contact Us Custom template Services