How To Setup Sora CV Blogger Template

Sora CV Blogger Template

Sora CV is a modern design premium quality blogger template with advanced features to build your own unique and professional portfolio. Sora CV 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.

.background-container{
  position: relative;
height:380px;
overflow:hidden;
background: $maincolor url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Q6GWvjEk_aUy6ELVvc6XOPBu566DdEeRTVLEiU0e7XD7iaz7DYhm6AH6e5kJT5JIp7IXy0UJW9_rBz4Cp1g5t0w-C2RFtNpVQvubhvTr-yi8PM5p_RxXg64E_ZHhyrNW0aWaK-HkZSVE/s1600/head-back.jpg) no-repeat;
    background-attachment: fixed;
    background-size: cover;
background-position:bottom center;
}


Change the black highlighted code with your own image link.

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

Main Menu/DropDown/Multi DropDown

Access your blog Layout > click Edit link on Main Menu widget.
Normal Link : Features
Sub Link: _Sub Link 1.0 (before the link add "_") 1 underscore
Sub Link 2: __Sub Link 1.1 (before the link add "__") 2 underscore

Header Title

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Header Title Widget Section, and then add your description text into the content section. Have a look to the format below.
<div class='sora-author-box-text'>
<div class='sora-author-box-text-head'>
<span class='hello-txt'>Hello</span>
<h2 class='profile-title'><span>I&#39;m</span> John Doe</h2>
<h3 class='profile-position'>Developer and businessman</h3>
  </div>
<div class='sora-author-box-text-details'>
<ul class='profile-list'>
    <li class='clearfix'>
        <strong class='list-title'>Age</strong>
        <span class='cont'>29</span>
    </li>
    <li class='clearfix'>
        <strong class='list-title'>Address</strong>
        <span class='cont'>24058, Belgium, Brussels, Liutte 27, BE</span>
    </li>
    <li class='clearfix'>
        <strong class='list-title'>E-mail</strong>
        <span class='cont'><a href='mailto:robertsmith@company.com'>robertsmith@company.com</a></span>
    </li>
    <li class='clearfix'>
        <strong class='list-title'>Phone</strong>
        <span class='cont'><a href='tel:+12562548456'>+1 256 254 84 56</a></span>
    </li>
    <li class='clearfix'>
        <strong class='list-title'>Freelance</strong>
        <span class='cont'>till April 15, 2016</span>
    </li>
    <li class='clearfix'>
        <strong class='list-title'><span class='list-button'>On Vacation</span></strong>
        <span class='cont'><i class='fa fa-calendar'/>till March 25, 2016</span>
    </li>
</ul>
  </div>
<div style='clear: both;'/>
</div>
Replace the highlighted text with your details or desired text. 

Social Top/Footer

Access your blog Layout > click Edit link on Social Top widget.

Icons Available { facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen }

  

About Text & Button

Access your blog Theme > click Edit Html>  and then find the following coding.
<div class='card-content'>
    <!-- ABOUT PARAGRAPH -->
    <p>
        Hello! I&#8217;m John Doe. Senior Web Developer with over 13 years of experience specializing in front end development. Experienced with all stages of the development cycle for dynamic web projects.Having an in-depth knowledge including advanced HTML5, CSS, CSS3, SASS, LESS, JSON, XML, Java, JavaScript, JQuery, Angular JS. Strong background in management and leadership.
    </p>
</div>
<div style='clear: both;'/>
<div class='card-action' id='about-btn'>
<!-- BUTTONS -->
                        <div class='about-btn'>
                            <!-- DOWNLOAD CV BUTTON -->
                            <a class='btn waves-effect' href='#'>Download CV</a>
                            <!-- CONTACT BUTTON -->
                            <a class='btn waves-effect' href='#contact'>Contact Me</a>
                        </div>
                    </div>

Change the details with your own.

Note:- Change the # in href=' ' Values Otherwise the menu will not work properly.

PROFESSIONAL SKILLS

It has two types of widgets in it first one is skill bar and the other one is skill circle. 
  • Skill Bar's

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

<div class='skills'>
   <!-- skill -->
  <dl>
    <dt>HTML</dt>
    <dd class='skill-percent html' data-percent='90'/>
    <dt>CSS</dt>
    <dd class='skill-percent css' data-percent='85'/>
    <dt>jQuery</dt>
    <dd class='skill-percent jquery' data-percent='70'/>
    <dt>Javascript</dt>
    <dd class='skill-percent javascript' data-percent='50'/>
  </dl>
   <!-- #skill -->
</div>
Here are the things you need to change.

  1. Red Highlighted code is for the abilities you want to mention.
  2. Blue Highlighted code is for the score for those abilities.
  • Skill Circle

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

.go:nth-child(n+1) .inset .numbers:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "HTML5";
  font-weight: 100;
  color: #1a2a46;
  top: 120px;
width:120px;
}
.go:nth-child(n+2) .inset .numbers:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "CSS3/SCSS";
  font-weight: 100;
  color: #1a2a46;
  top: 120px;
}
.go:nth-child(n+3) .inset .numbers:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "jQuery";
  font-weight: 100;
  color: #1a2a46;
  top: 120px;
}
Change the highlighted text with your own.
Note:- Search one code at once.

    MY EXPERIENCE

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

    <div class='works-wrap row'>
    <div class='works-title'>
      <h4><i class='lnr lnr-license'/>My Experience</h4>
      </div>
    <div style='clear: both;'/>


        <div id='timeline'>
         <ul class='timeline timeline--first'>
          <li class='era'>
             <h2 class='era__title'>First Era</h2>
          </li>
          <li class='entry entry--left'>
             <div class='entry__content wow animated fadeIn' data-wow-delay='0.3s' data-wow-duration='1s'>
    <div class='date'>2014 - 2016</div>
                <h2>Bacon Ipsum</h2>
                <p>Bacon ipsum dolor amet ball tip jerky sirloin pancetta capicola prosciutto meatball pig leberkas cow pork chop shank meatloaf.</p>
             </div>
          </li>
          <li class='entry entry--right'>
             <div class='entry__content wow animated fadeIn' data-wow-delay='0.3s' data-wow-duration='1s'>
    <div class='date'>2011 - 2014</div>
                <h2>Bacon Ipsum</h2>
                <p>Ground round short ribs fatback, salami shoulder sausage chuck shankle landjaeger drumstick ribeye meatloaf doner.</p>
             </div>
          </li>
          <li class='entry entry--left'>
             <div class='entry__content wow animated fadeIn' data-wow-delay='0.3s' data-wow-duration='1s'>
    <div class='date'>2009 - 2011</div>
                <h2>Bacon Ipsum</h2>
                <p>Swine pork belly prosciutto jowl pork chop chicken filet mignon cupim doner boudin.</p>
             </div>
          </li>
       </ul>
    </div>
    <div class='timeline-wrap'>
       <ul class='timeline'>
          <li class='era'>
             <h2 class='era__title'>Second Era</h2>
          </li>
          <li class='entry entry--right'>
             <div class='entry__content wow animated fadeIn' data-wow-delay='0.3s' data-wow-duration='1s'>
    <div class='date'>2007 - 2009</div>
                <h2>Bacon Ipsum</h2>
                <p>Jerky corned beef jowl cupim hamburger, alcatra meatball swine pork chop ribeye leberkas short loin tenderloin picanha venison.</p>
             </div>
          </li>
          <li class='entry entry--left'>
             <div class='entry__content wow animated fadeIn' data-wow-delay='0.3s' data-wow-duration='1s'>
    <div class='date'>2006 - 2007</div>
                <h2>Bacon Ipsum</h2>
                <p>Ribeye turducken flank cupim ball tip ham pork belly venison biltong pork chop jowl andouille spare ribs.</p>
             </div>
          </li>
          <li class='entry entry--right'>
             <div class='entry__content wow animated fadeIn' data-wow-delay='0.3s' data-wow-duration='1s'>
    <div class='date'>2005 - 2006</div>
                <h2>Bacon Ipsum</h2>
                <p>Jerky corned beef jowl cupim hamburger, alcatra meatball swine pork chop ribeye leberkas short loin tenderloin picanha venison. Ribeye turducken flank cupim ball tip ham pork belly venison biltong pork chop jowl andouille spare ribs.</p>
             </div>
          </li>
       </ul>
    </div>
    <div class='timeline-wrap'>
       <ul class='timeline'>
          <li class='era'>
             <h2 class='era__title'>Last Era</h2>
          </li>
          <li class='entry entry--left'>
             <div class='entry__content wow animated fadeIn' data-wow-delay='0.3s' data-wow-duration='1s'>
    <div class='date'>2004 - 2005</div>
                <h2>Bacon Ipsum</h2>
                <p>Landjaeger cow flank ribeye meatball, corned beef tongue.</p>
             </div>
          </li>
          <li class='entry entry--right'>
             <div class='entry__content wow animated fadeIn' data-wow-delay='0.3s' data-wow-duration='1s'>
    <div class='date'>2003 - 2004</div>
                <h2>Bacon Ipsum</h2>
                <p>Landjaeger cow flank ribeye meatball, corned beef tongue.</p>
             </div>
          </li>
          <li class='entry entry--left'>
             <div class='entry__content wow animated fadeIn' data-wow-delay='0.3s' data-wow-duration='1s'>
    <div class='date'>2002 - 2004</div>
                <h2>Bacon Ipsum</h2>
                <p>Landjaeger cow flank ribeye meatball, corned beef tongue.</p>
             </div>
          </li>
          <li class='entry entry--right'>
             <div class='entry__content wow animated fadeIn' data-wow-delay='0.3s' data-wow-duration='1s'>
    <div class='date'>2000 - 2002</div>
                <h2>Bacon Ipsum</h2>
                <p>Landjaeger cow flank ribeye meatball, corned beef tongue.</p>
             </div>
          </li>
       </ul>
        </div>

      </div>
    Change the highlighted text with your own.
    Note:- Search one code at once.

      MY INTEREST

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

      <div class='hobby-title'>
      <h4><i class='lnr lnr-heart'/>My Interest</h4>
      </div>
       <div style='clear:both;'/>
      <div class='sora-cv-hobby-details-inner'>
      <div class='card-content'>
      <!-- Hobby PARAGRAPH -->
      <p>
            First of all I love music, country music is my favorite. Love watching football, movies and playing games with my buddies. I spend quite a lot of time in traveling and photography, these keeps me fresh for working environment. I also spend time volunteering at the Red Cross in London, UK each month.
          </p>
      </div>
      <div style='clear: both;'/>
      <div class='card-action' id='about-btn'>
      <ul>
      <li class='odd'><i class='fa fa-music'/><span>Music</span></li>
      <li><i class='fa fa-gamepad'/><span>Gaming</span></li>
      <li class='odd'><i class='fa fa-camera'/><span>Photo</span></li>
      <li><i class='fa fa-futbol-o'/><span>Football</span></li>
      <li class='odd'><i class='fa fa-plane'/><span>Traveling</span></li>
      <li><i class='fa fa-film'/><span>Movies</span></li>
      </ul>
      </div>
      </div>
      Change the highlighted text with your own.
      Note:- Search one code at once.

      Here are the things you need to change.

      1. Red Highlighted code is for the icons you want to mention. (fontawesome - http://fontawesome.io/cheatsheet/)
      2. Yellow highlighted code is for text.
      3. Blue Highlighted code is for the title.
      4. Green Highlighted code is for the hobby.

        From the Blog

        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='Portfolio-title'>
        <h4>From the Blog</h4>
        </div>
        Change the details with your desired one.

        Testimonial


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

        <div class='testimonial-title'>
        <h4><i class='lnr lnr-smile'/>Testimonials</h4>
        </div><div style='clear:both;'/>
        <div class='main-gallery' id='section-5'>
          <div class='gallery-cell'>
            <div class='testimonial'>
           
             <div class='person-speech'> <q class='testimonial-quote'>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mauris ex, gravida ut leo eu, rhoncus porta orci. Fusce vitae rutrum nulla.&quot;</q></div>
          <div class='testimonial-meta'>
        <div class='testimonial-image'> <img class='testimonial-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyETf0Q0l7Hp3H7OBYc1Sn69RDTi84yGxPj1-Lj2NY1Mu_3_uJtKbsEeQ86t9THfSRbXapHmu8misx0_FbeHL5thyphenhyphenMPIivFLPZ0oSpsQ1haegZUYhDCDxNL3aswam3J1_kQwO7_uXD3w/s400/128.jpg'/></div>
           <div class='person-name-title'> <span class='testimonial-author'>Joe Smith</span><span class='testimonial-author-details'>CEO of Cubix</span></div></div>
            </div>
          </div>
          <div class='gallery-cell'>
             <div class='testimonial'>
             
           <div class='person-speech'> <q class='testimonial-quote'>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mauris ex, gravida ut leo eu, rhoncus porta orci. Fusce vitae rutrum nulla.&quot;</q></div>
         <div class='testimonial-meta'>
        <div class='testimonial-image'> <img class='testimonial-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidXLbu3sGsC7U0Ksuyff_TDMLdceHFNBghYIfvQAIiK2_O_fyIS323WtpIlU21yib340J_B7ywSFm9PfVS9stnI1o_dPOBrPBLE0331wImYxUBJlQO1nv5r4nmdRTggCOnMBsvBCzoLsM/s400/128+%25281%2529.jpg'/></div>
         <div class='person-name-title'> <span class='testimonial-author'>Lisa Jones</span><span class='testimonial-author-details'>Freelance Web Developer</span></div>
          </div>
            </div>
          </div>
          <div class='gallery-cell'>
                <div class='testimonial'>
             
              <div class='person-speech'> <q class='testimonial-quote'>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mauris ex, gravida ut leo eu, rhoncus porta orci. Fusce vitae rutrum nulla.&quot;</q></div>
          <div class='testimonial-meta'>
        <div class='testimonial-image'> <img class='testimonial-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0WNOEJjMOD9bbN4Xo5xGhyphenhyphen1MfU5mNI4DDxbPJiYVfMHyMkGidaKAJm7VFzYcPQsKx3eV-Ltj2sEFM3zFC-tcFxCTL7GrYOEeBu9D_vqSBFkgbnznMek3DYLsmjBmiHq0hyphenhyphenr-3Y_cH2s/s400/128.jpg'/></div>
        <div class='person-name-title'> <span class='testimonial-author'>Ryan Waltz</span><span class='testimonial-author-details'>Front-End Developer</span></div>
            </div>
        <div>
          </div>
        </div>
        </div>
          </div>
        Here are the things you need to change.

        1. Red Highlighted code is for the users image. 
        2. Blue Highlighted code is for the review.
        3. Green Highlighted code is for the user details.

        Pricing

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

        <div class='about-wrap row'>
        <div class='about-title'>
          <h4><i class='lnr lnr-cart'/>Pricing</h4>
          </div>
        <div style='clear: both;'/>
        <div id='pricing'>
        <div class='price_card alpha wow fadeInLeft' data-wow-delay='0.3s' data-wow-duration='1s' style='visibility: visible; animation-duration: 1s; animation-delay: 0.3s;'>
        <div class='price_card_wrap'>
        <div class='header'>
        <span class='price'>$10</span>
        <span class='name'>Alpha Pack</span>
        </div>
        <ul class='features'>
        <li>Complete documentation</li>
        <li>Working materials in PSD and Sketch format</li>
        </ul>
        <button>Add to cart</button>
        <span class='tip'>* Great for beginners!</span>
              </div>
        </div>
        <div class='price_card bravo wow fadeInLeft' data-wow-delay='0.5s' data-wow-duration='1s' style='visibility: visible; animation-duration: 1s; animation-delay: 0.5s;'>
        <div class='price_card_wrap'>
        <div class='header'>
        <span class='price'>$15</span>
        <span class='name'>Bravo Pack</span>
        </div>
        <ul class='features'>
        <li>Complete documentation</li>
        <li>Working materials in PSD, Sketch and EPS format</li>
        <li>6 months access to the library</li>
        </ul>
        <button>Add to cart</button>
        <span class='tip'>* Most popular!</span>
              </div>
        </div>
        <div class='price_card charlie wow fadeInLeft' data-wow-delay='0.8s' data-wow-duration='1s' style='visibility: visible; animation-duration: 1s; animation-delay: 0.8s;'>
        <div class='price_card_wrap'>
        <div class='header'>
        <span class='price'>$25</span>
        <span class='name'>Charlie Pack</span>
        </div>
        <ul class='features'>
        <li>Complete documentation</li>
        <li>Working materials in PSD, Sketch and EPS format</li>
        <li>1 year access to the library</li>
        <li>2GB cloud storage</li>
        </ul>
        <button>Add to cart</button>
              </div>
        </div>
        </div>

          </div>
        Change the highlighted part's with your own details for every team member.

        Map

        Access your blog Theme > click Edit Html>  and then find the following coding.
         <script>
              function initMap() {
                var uluru = {lat: 51.5074, lng: 0.1278};
                var map = new google.maps.Map(document.getElementById(&#39;map&#39;), {
                  zoom: 4,
                  center: uluru
                });
                var marker = new google.maps.Marker({
                  position: uluru,
                  map: map
                });
              }
            </script>
        Change the lat: 51.5074 with your latitude & lng: 0.1278 with your longitude.

          Get In Touch

          There are few things which you can change in this section.

          • Headings and description.

          Access your blog Theme > click Edit Html>  and then find the following coding.
          <div class='contact-title'>
          <h4><i class='lnr lnr-phone'/> Get in Touch</h4>
          </div>
          • Feel free To Contact

          Access your blog Theme > click Edit Html>  and then find the following coding.
          <div class='contact-other'>
          <h1 class='con-title'>Feel free To Contact</h1>
          <p class='con-text'>
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolores, quasi unde quisquam facilis at ullam aperiam similique dicta voluptatibus!
                          </p>
          <ul class='con-list'>

          <li><i class='lnr lnr-map'/>3066 Stone Lane, Wayne, Pennsylvania.</li>
          <li><i class='lnr lnr-phone'/>+610-401-6021, +610-401-6022</li>
          <li><i class='lnr lnr-envelope'/>admin@mydomain.com</li>
          <li><i class='lnr lnr-earth'/>www.yourdomain.com</li>
          </ul>
          </div>
          Change the highlighted part's with your own details for every team member.

          Contact Form

          To make the contact form work you have to do nothing, it works automatically hurrah!!  

          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