Revoli Blogger Template” Documentation by “Odd Themes” v1.0

Created: 23/06/2014
By: Odd Themes
Email: oddthemes@gmail.com Website: www.OddThemes.com

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

Table of Contents

  1. Installation
  2. Add Social Links on Top Right
  3. Upload Logo
  4. Setting up the menu
  5. Ads on Header
  6. Slider
  7. Post Section
  8. Sidebar Ads
  9. Catch On Facebook
  10. Progress bars on Sidebar
  11. 4 Column Footer Widgets
  12. Credits To

  1. Installation - top

    2. You Follow These Steps To Upload Your Blogger Template To Blogger Platform. First Login to your Blogger DashBoard by Using Your Google Username And Password.

    Then follow these steps:

    1. On Blogger Dashboard Click Template.

    2. Click on Customize Mobile Template on right side, now check the radio button for NO.

    3. Click Backup/Restore button (Top Right).

    4. Click on Choose File ( Browse..) button. Find the “template.xml” file location.

    5. Then Click Upload.

    You Can See that the Header area have Social Icons Collection. To place your URL's in Social Icons in this theme you can follow these steps:

    1. On Blogger Dashbord Click Template

    2. Click Edit HTML

    3. Scroll down and Find this Code :

    <div class='le_social'> 
                    <ul> 
                        <li><a href='http://facebook.com/oddthemes'><i class='fa fa-facebook'/></a></li><li><a href='http://twitter.com/oddthemes'><i class='fa fa-twitter'/></a></li><li><a href='http://plus.google.com'><i class='fa fa-google-plus'/></a></li><li><a href='http://youtube.com/'><i class='fa fa-youtube'/></a></li><li><a href='http://dribbble.com/'><i class='fa fa-dribbble'/></a></li>                    </ul> 
                </div>

    4. Change # with yours Social URL link

    Access your blog Layout > click Edit link on Header widget

    In Configure Header window, input your Blog Title and Blog Description. If you want to upload your image logo, make sure you check Instead of title and description, then click Choose File and locate your logo file. And click Save button to finish.

    To Edit Menu in this theme you can follow these steps:

    1. On Blogger Dashbord Click Template
    2. Click Edit HTML
    3. Scroll down and Find this Code :

      <nav id='menu'> 
      <input type='checkbox'/> 
      <label> 
        &#8801; 
        <span> 
          Click&#160;Here 
        </span> 
      </label> 
      <ul> 
        <li class='home'> 
          <a href='/' style='border-bottom:2px solid #DD030E;'> 
            Home 
          </a> 
        </li> 
        <li> 
          <a href='/search?max-results=12' style='border-bottom:2px solid #4A86B8;'> 
            Blog 
          </a> 
        </li> 
        <li> 
          <a href='#' style='border-bottom:2px solid #CCC700;'> 
            Drop Down 
          </a> 
          <ul class='menus'> 
            <li> 
              <a href='#'> 
                Tab 1 
              </a> 
            </li> 
            <li> 
              <a href='#'> 
                Tab 2 
              </a> 
            </li> 
            <li> 
              <a href='#'> 
                Tab 3 
              </a> 
            </li> 
            <li> 
              <a href='#'> 
                Tab 4 
              </a> 
            </li> 
            <li> 
              <a href='#'> 
                Tab 5 
              </a> 
            </li> 
            <li> 
              <a href='#'> 
                Tab 6 
              </a> 
            </li> 
          </ul> 
        </li> 
        <li> 
          <a href='#' style='border-bottom:2px solid #07CC00;'>
            Contact 
          </a> 
        </li> 
        <li> 
          <a href='#' style='border-bottom:2px solid #FE7316;'> 
            Drop Down 
          </a> 
          <ul class='menus'> 
            <li> 
              <a href='#'> 
                Tab 1 
              </a> 
            </li> 
            <li> 
              <a href='#'> 
                Tab 2 
              </a> 
            </li> 
            <li> 
              <a href='#'> 
                Tab 3 
              </a> 
            </li> 
          </ul> 
        </li> 
        <li> 
          <a href='#' style='border-bottom:2px solid #4A86B8;'>
            Advertise 
          </a> 
        </li> 
<li> 
          <a href='#' style='border-bottom:2px solid #C50298;'> 
            Music 
          </a> 
        </li> 
<li> 
          <a href='#' style='border-bottom:2px solid #38CFCA;'>
            Gaming 
          </a> 
        </li> 
<li> 
          <a href='#' style='border-bottom:2px solid #DD030E;'> 
            Design 
          </a> 
        </li> 
<li> 
          <a href='#' style='border-bottom:2px solid #8F408A;'>
            Video 
          </a> 
        </li> 
<li> 
          <a href='#' style='border-bottom:2px solid #CCC700;'> 
            Show 
          </a> 
        </li> 
        <li> 
          <a href='/404' style='border-bottom:2px solid #07CC00;'>
            Error 404 
          </a> 
        </li> 
      </ul> 
    </nav>
    4. Change # with yours URL link and text with your text.

    E) Ads on Header - top

    You Can See in the Ads on top of the website, to put your ads you can follow the image below:

    F) Slider - top

    You Can See in the Slider on the template, to change images and text on the slider

    You find the below code in the template and change it the way you want. 

    <div class='banner has-dots' style='overflow: hidden; width: 100%; height: 415px;'>
            <ul style='width: 400%; position: relative;margin-top:0px;'> 
                <li style='background-image: url(http://4.bp.blogspot.com/-cvWv1hIwsAE/U8viuyTKQoI/AAAAAAAAAl0/cWYQ2Yu7qpw/s1600/red_1.jpg); width: 25%;'> 
                    <h1>The red finish interior decoration.</h1> 
                    <p>You can easily manage the speed of the slides according to you.</p>
                     
                    <a class='btn btn-1 btn-1c' href='#download'>Explore</a> 
                </li> 
                 
                <li style='background-image: url(http://2.bp.blogspot.com/-H6UBl-3cyLo/U8viyHZ8jBI/AAAAAAAAAmE/L4jX1I8arEc/s1600/slider3.jpg); width: 25%;'> 
                    <h1>Clean, elegant, fantastically designed.</h1> 
                    <p>Change slides with arrow keys, extend with CSS. You have full control.</p>
                     
                    <a class='btn btn-1 btn-1c' href='http://www.oddthemes.com/2014/07/revoli-responsive-blogger-template.html'>Download</a> 
                </li> 
                 
                <li style='background-image: url(http://1.bp.blogspot.com/-i00DHcuFCFU/U8vunOCCh3I/AAAAAAAAAmk/4foVy2cAzuE/s1600/yobitch.jpg); width: 25%;'> 
                    <h1>Premium Version</h1> 
                    <p>To avail premium features or do customizations you have to purchase the theme.</p>
                     
                    <a class='btn btn-1 btn-1c' href='http://shop.oddthemes.com/blogger/revoli-responsive-blogger-template'>Purchase</a> 
                </li> 
                 
            </ul> 
        </div>

    G) Post Section - top

    You Can See in the post section on the website as shown in the below image.

    You can set this part by adding label to this layout widget in the third point.

    You Can See in the post section on the website as shown in the below image.

    You can set this part by adding label to this layout widget in the third point.

    You Can See in the post section on the website as shown in the below image.

    You can set this part by adding label to this layout widget in the third point.

    You Can See in the post section on the website as shown in the below image.

    You can set this part by adding label to this layout widget in the third point.

    You Can See in the post section on the website as shown in the below image.

    You can set this part by adding label to this layout widget in the third point.

    You Can See in the post section on the website as shown in the below image.

    You can set the number of posts to show, refer to the image below.

    H) Sidebar Ads - top

    To add your ads code to the sidebar, you can just go the layout section and click on edit and paste your sidebar ads code, refer to the image.

    I) Catch On Facebook - top

    To add your facebook page code to the sidebar goto layout click on edit, refer to the image. 

    <div id="fb-root"></div> 
<script>(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id; 
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 
<div class="fb-like-box" data-href="https://www.facebook.com/oddthemes" data-width="300" data-height="250" data-show-faces="true" data-stream="false" data-show-border="true" data-header="false" colorscheme="light"></div>

    J) Progress Bars on Sidebar - top

    The progress bars are given just for customization that if you want to use them you can. I am giving the code below: 

    <div class="row"> 
<div class="col-md-5"><h2 class="title" style="margin-top:30px;border-bottom:1px solid #eee;position:relative;"> 
Progress Bars 
</h2> 
<h4> 
HTML5</h4> 
<div class="progress progress-striped active"> 
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" class="progress-bar progress-bar-success" role="progressbar" style="width: 90%;"> 
</div> 
</div> 
<h4> 
CSS3</h4> 
<div class="progress progress-striped active"> 
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar progress-bar-info" role="progressbar" style="width: 100%;"> 
</div> 
</div> 
<h4> 
PHP</h4> 
<div class="progress progress-striped active"> 
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" class="progress-bar progress-bar-warning" role="progressbar" style="width: 80%;"> 
</div> 
</div> 
<h4> 
DESIGN</h4> 
<div class="progress progress-striped active"> 
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" class="progress-bar progress-bar-danger" role="progressbar" style="width: 90%;"> 
</div> 
</div></div></div>
    Modify the code as you want, the css has been included in the template itself.

    K) 4 column Footer widgets - top To edit the below widget on the website you must... Goto layout click on edit and paste the text as shown below: To edit the below widget on the website you must... Goto layout click on edit and paste the text as shown below: To edit the below widget on the website you must... Goto layout click on edit and paste the text as shown below: To edit the below widget on the website you must... Goto layout click on edit and paste the text as shown below: The code is : 

    <div class="flickr_plugin">  
<script src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=48553010@N00" type="text/javascript">  
</script>  
</div>

    Now you are good to go.

    L) Credits To - top

    Fonts/Icons: Font Awesome
    Special credits: God [ For Giving Me Strength ]

     

    Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

    Ceyron Louis At OddThemes.com

    Go To Table of Contents