“Soloris Blogger Template” Documentation by “Cyby” v1.0

Created: 18/02/2014
By: Cyby
Email: cybydesign@gmail.com

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

Table of Contents

  1. Installation
  2. Add Social Links
  3. Upload Logo
  4. Setting up the menu
  5. Image Slider
  6. Sidebar Tabs Widgets Setup
  7. Flicker Image
  8. Meta Keywords and Description
  9. Custom Error 404 Page
  10. Breaking News
  11. Adding Adsense
  12. Sidebar Social Icons
  13. Sidebar Ad
  14. Find on Facebook
  15. Top Tabs Area (Recent Post By Tag)
  16. Layout Screenshot
  17. Credits

  1. Installation - top

    2. Now you have Soloris Blogger Template. You Can 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 “soloris-theme.xml” file location.

    5. Then Click Upload.

    You Can See that Header Right side area have Social Icons Collection. To Edit Social Icon 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='textwidget'><ul class='social-icons' style='list-style-type :none;margin-top: -6px'> 
<li><a class='icon fa fa-twitter' href='#' title='Twitter'><span class='visuallyhidden'>Twitter</span></a></li>
<li><a class='icon fa fa-facebook' href='#' title='Facebook'><span class='visuallyhidden'>Facebook</span></a></li>
<li><a class='icon fa fa-linkedin' href='#' title='LinkedIn'><span class='visuallyhidden'>LinkedIn</span></a></li>
<li><a class='icon fa fa-pinterest' href='#' title='Pinterest'><span class='visuallyhidden'>Pinterest</span></a></li>
<li><a class='icon fa fa-rss' href='#' title='RSS'><span class='visuallyhidden'>RSS</span></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. (Top Menu) Scroll down and Find this Code :

      <div> <!-- MENU BEGIN --> 
              <ul class='nav' id='menuhlng'> 
              <li><a href='#'>Home</a></li> 
              <li><a href='#'>About</a> 
              </li> 
              <li><a href='#'>Login</a> 
              </li> 
              <li><a href='#'>Downloads</a> 
              </li> 
              <li class='dropdown'><a href='#'>List</a> 
                <ul> 
                  <li><a href='#'>DropDown 1.1</a></li> 
                  <li><a href='#'>DropDown 1.2</a></li> 
                  <li><a href='#'>DropDown 1.3</a></li> 
                  <li class='dropdown'><a href='#'>DropDown 1.4</a>      
                    <ul> 
                      <li><a href='#'>DropDown 1.1</a></li> 
                      <li><a href='#'>DropDown 1.2</a></li> 
                    </ul> 
                  </li> 
                  <li><a href='#'>DropDown 1.5</a></li> 
                  <li><a href='#'>DropDown 1.6</a></li> 
                </ul> 
              </li> 
              <li><a href='#'>Support</a> 
              </li> 
            
          </ul>  
        </div> <!-- MENU END -->
    4. Change # with yours URL link.

    E) Image Slider - top

    This theme Have Half Page Responsive Image Slider, if you need install the slider, then follow these steps

    Go To Blogger >> Layout

    Then Click On Edit Button. (See the Example Image Above)

    Then You Can See Again Popup Window Like Below

    Then Add The Below Code Here

    <div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<a href="Link-url"><img src="Image-Url" /></a>
<div class="massage">
<div class="slider-title"><a href="Slider-title-url">Slider-Title</a></div>
discription for slider</div>
</li>
 
<li>
<a href="Link-url"><img src="Image-Url" /></a>
<div class="massage">
<div class="slider-title"><a href="Slider-title-url">Slider-Title</a></div>
discription for slider</div>
</li>
 
<li>
<a href="Link-url"><img src="Image-Url" /></a>
<div class="massage">
<div class="slider-title"><a href="Slider-title-url">Slider-Title</a></div>
discription for slider</div>
</li>
 
<li>
<a href="Link-url"><img src="Image-Url" /></a>
<div class="massage">
<div class="slider-title"><a href="Slider-title-url">Slider-Title</a></div>
discription for slider</div>
</li>

</ul>
</div>
</div>
 
<div style='clear: both;'/>
 
<script>
$(document).ready(function () {
$('.flexslider').flexslider({
animation: 'fade',
controlsContainer: '.flexslider'
});
});
</script></div>

    Link Url - Replace # With Links Of Your Own.

    Image URL - Replace Image URL With Your Images Urls.

    Small Description For Image - Replace your Image Description


    F) Sidebar Tabs Widgets Setup - top

    You can see this Soloris Blogger Template have 2 column tabs area with Recent Post By Labels Area.

    Follow This steps To Add Tabs Widgets

    Go To Blogger >> Layout

    Now You Can See Layout Page Right side Area Have 3 Add a Gadjet Buttons Like This picture

    Now Click On "Add a Gadget" and Add Your Own Widgets

    Now enter this below code into the HTML/Javascript you just added.

    <iframe width=100% height='250' src="//www.youtube.com/embed/l6I5RiddRsE" frameborder="0" allowfullscreen></iframe>

    Just Replace The Video Link With Your Video Link.

    After Click Save button, You Can Get The Idea Using These Images Displayed Above.

     

    G) Flicker Image - top

    You Can See sidebar Have Flicker Image Widgets.

    Follow these Steps To Add Flicker Image Widgets

    Go To Blogger >> Layout

    Now Click On "Add a Gadget" and Add Your Own Widgets

    Now Add Your Java Script Here

    <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=52617155@N08" type="text/javascript"> 
</script> 
</div>

    Replace This 52617155@N08 With Your Flicker Id

    You Can Use http://idgettr.com/ to generate Your Flicker Id

    H) Meta Keywords And Description - top

    SEO is a one of Most Important Subject Of site. Meta Keywords And Description Help To SEO Your Site Follow This Steps To Add Meta Keywords And Description to Your Site

    . Click "Edit HTML"

    After You Enter Your Keywords, It Should Look Something Like Given Below

    <meta expr:content='data:blog.metaDescription' name='description'/> <!-- Add Meta Discription To your Blog -->
<meta content='Blogger , Template, New, Themes,' name='keywords'/><!-- Add Meta Keyword To your Blog -->

    How to Add Meta Description

    Goto Blogger >> Settings

    And Click On "Search Profermence" and Now Click Edit On "Meta Description"

    I) Add Coustom 404 Errpage - top

    Add Coustom 404 Page To Bpress Blogger Template.

    Go To Blogger >> Settings

    And Click On "Search Profermence" and Now Click Edit On "errors and rederects"

    Add Followinmg Code here 

    <div id="errpage">
<h3>Your requested page was not found</h3>
<div class="errpim"><p>404</p></div>
<div class="emass"><p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/>
Please check that the Web site address is spelled correctly.</p></div>
<ul>
<form class="ssimplesearch" method="get" action="/search">
<table width="100%">
<tr>
<td><input type="text" style="width:95%;" value="Search this blog.." onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q"></td>
</tr>
</table>
</form>
</li>
</ul>
</div>

    J) Setup Breaking News bar on top - top

    You Can See recent post shot as a breking news bar, follow this steps to add it to your blog

    Goto Blogger >> Template

    Now Click Edit Html Button

    Now Find "Replace With your Blog Url"

    Then Replace "http://soloris-themesack.blogspot.com/" This url With Your Blog URl

    Finaly Click Save Button

    K) Adsense Ads Under The Post Title and before Post Footer - top

    Do you need to add adsense ads under the blog post title and before blog post footer, ok thene foloow this steps,

    1.Add Adsens Ads After Post Title

    Goto Blogger.com > Template > Html Editer

    Then Search This Code 

      <!--Add Adsense Code Here / Under the Blog Psot Title (Show Only Post Page)-->

    Now you can see like this code 

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

  <!--Add Adsense Code Here / Under the Blog Psot Title (Show Only Post Page)-->

</b:if>
    Replace 
      <!--Add Adsense Code Here / Under the Blog Psot Title (Show Only Post Page)-->

    this Html Comment With Your Adsens Code

    2.Add Adsens Ads before Post footer

    Goto Blogger.com > Template > Html Editer

    Then Search This Code 

    <!--Add Adsense Code Here / Before Post Footer (Show Only Post Page)-->

    Then You can see like this code 

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
 
  <!--Add Adsense Code Here / Before Post Footer (Show Only Post Page)-->
 
</b:if>

    replace 

     
  <!--Add Adsense Code Here / Before Post Footer (Show Only Post Page)-->

    this code with your adsens code.

    L) Sidebar Social Icons - top Goto Layout >> Click on Add a Gadget as shown below and Add HTML/JavaScript from Popup.

    Then Add The Below Code In The Area Provided In The Popup Window. 

    <div class="social-side widget-content"><ul class="LinkList" style="list-style-type:none; padding-left:15px;"> 

<li><a href="https://twitter.com/#" class="twitter" target="_blank">Twitter</a></li> 

<li><a href="https://www.facebook.com/#" class="facebook" target="_blank">Facebook</a></li> 

<li><a href="https://plus.google.com/#" class="plus" target="_blank">Google+</a></li> 

<li><a href="#" class="rss" target="_blank">RSS</a></li> 

<li><a href="#" class="vimeo" target="_blank">Vimeo</a></li> 

<li><a href="#" class="linkedin" target="_blank">LinkedIn</a></li> 

<li><a href="#" class="instagram" target="_blank">Instagram</a></li> 


</ul><div class="clear"></div></div>

    Now Change The Links in href To Your Links.



    Now Add Your Own Ad here of 300 x 250 Dimension.

    N) Find On Facebook - top



    Now Enter the Facebook like box code of your own page, sample code is given below

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmobgaze&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=383379138407631" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowtransparency="true"></iframe>


    O) Top Tabs Area (Recent Post By Tag) - top

    Top Tabs Area is the area shown below in the website.

    Goto Layout, click on Add a gadget below slider as shown in below image then add HTML/JavaScript.

    Write this code in the Content area
    <div id="simplesidepost"></div> 
<script type='text/javascript'> 
$('#simplesidepost').cbrnewpost({ 
postType:"h", 
tagName:"Break" 
}); 
</script>
    Change the TAGNAME to anything of your choice that is used in your website.

    Same thing goes for Recent Games Tab, code for RECENT GAME is 
    <script type='text/javascript'> 
var numposts = 5; 
var showpostthumbnails = true; 
var displaymore = false; 
var displayseparator = true; 
var showcommentnum = false; 
var showpostdate = false; 
var showpostsummary = true; 
var numchars = 100; 
</script>  
<script type="text/javascript" src="/feeds/posts/default/-/Sport?published&alt=json-in-script&callback=labelthumbs"></script>
    Change the SPORT label from the above code to your used label in your website.

    Add a gadget thing goes the same for TECH REVIEW Tab just add the below code in HTML/JavaScript. 
    <script type='text/javascript'> 
var numposts = 5; 
var showpostthumbnails = true; 
var displaymore = false; 
var displayseparator = true; 
var showcommentnum = false; 
var showpostdate = false; 
var showpostsummary = true; 
var numchars = 100; 
</script>  
<script type="text/javascript" src="/feeds/posts/default/-/Break?published&alt=json-in-script&callback=labelthumbs"></script>
    Just Change the BREAK label above to your label/tag used in your website.



    P) Layout ScreenShot - top

    1. Header
    2. Image Slider
    3. Follow By Email
    4. Top Tabs Area (Recent Post By Tag)
    5. Blog Post Area
    6. Sidebar Tabs
    7. 4 Column Footer Area
    8. Other Sidebar Widgets
    9. Social Sidebar
    10. Sidebar Ads area
    11. Header Ads

    Q) Credits To - top

    Image Slider From - http://www.woothemes.com/flexslider/
    Other Icons - http://www.iconfinder.com/

     

    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.

    Cyby At ThemeSack.com

    Go To Table of Contents