• Welcome

    WhiteSpot is a Simple Blogger Template with Responsive Features and many Custom set make this Template look different ...

  • Post Page

    2 Column Post Page with static Author post widget...

  • Full Page

    In this section we will see 3 column post , but look up , that's not a sidebar like on post page...

  • Contact page

    This page look like the same with About page, full page custom with any featured Include...

Tuesday 15 April 2014

Documentation

Posted by Ichi Hikaru | 03:32 Categories:
Please follow the instructions below carefully. I assume you already have a Blogger account. So let us begin.

Get Started



Uploading/ Installation

1. Unzip WhiteSpot.zip.
2. Login to Blogger Dashboard and click the Template menu.
3. Click the Backup / Resore on the right top
4. Discover where the location Whitespot theme.xml
5. Then click Upload.

After the file uploaded, we will begin to adjust to your blog, starting from the settings menu.

Menu


To change the URLs on the menu, you need to log in to your Dashboard.
1. Click the Templates menu in your Dashboard
2. Click the Edit HTML
3. Then find the following code...

<navi id='menul'>
<input type='checkbox'/>
<label>&#8801;<span><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> </span></label>
<ul>
  <li><b><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></b></li>
  <li><a href='/p/about.html'>About</a></li>
<li><a href='#'>Drop Down</a>
<ul class='menus'>
 <li><a href='#'>Photoshop</a></li>
 <li><a href='#'>Illustrator</a></li>
    <li><a href='#'>Web Design</a></li>
 <li><a href='#'>HTML</a></li>
 <li><a href='#'>CSS</a></li>
 <li><a href='#'>Web Design</a></li>
 <li><a href='#'>User Experience</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Advertise</a></li>
       </ul>
    </navi>
4. Replace the "#" with your own URL

Second Menu


Still in the area of ​​the Edit Html Template
1. Find the code below

<li class='cnt'><a href='/search?max-results=6'>Posts</a><span class='count'/>
<script type='text/javascript'>
function postCount(json){
            document.write(&quot;<span class='counts postx'>&quot;);
            var count = json.feed.openSearch$totalResults.$t;
            document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
            document.write(&quot;</span>&quot;)
      }
      </script><script expr:src='data:blog.homepageUrl + &quot;/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount&quot;'/>
</li>
                  <li class='cnt'><a href='/p/friends.html'>Friends</a><span class='count'/>
<script type='text/javascript'>
            function commentCount(json){
            document.write(&quot;<span class='counts commx'> &quot;);
            var count = json.feed.openSearch$totalResults.$t;
            document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
            document.write(&quot;</span>&quot;)
      }
</script><script expr:src='data:blog.homepageUrl + &quot;/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=commentCount&quot;'/>
</li>
     <li class='drop'><a href='#'>More</a>
      <ul>
    <li><a href='#'>Photoshop</a></li>
    <li><a href='#'>Illustrator</a></li>
                <li><a href='#'>Web Design</a></li>
    <li><a href='#'>HTML</a></li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>Web Design</a></li>
    <li><a href='#'>User Experience</a></li>
    <li><a href='#'>FreelanceSwitch</a></li>
                    <li><a href='#'>Creattica</a></li>
                    <li><a href='#'>WorkAwesome</a></li>
                    <li><a href='#'>Mac Apps</a></li>
                    <li><a href='#'>Web Apps</a></li>
     <li><a href='#'>ThemeForest</a></li>
                    <li><a href='#'>GraphicRiver</a></li>
                    <li><a href='#'>ActiveDen</a></li>
                    <li><a href='#'>VideoHive</a></li>
                    <li><a href='#'>3DOcean</a></li>
                        </ul>
       </li>  
2. Replace the "#" with your own URL

Slider Photo


1. Login to Dashboard
2. Click the Template
3. Click the Edit Html
4. Find the code below

<ul>  
<li><a href='#'>  <img alt='' class='slimg ' src='https://googledrive.com/host/0ByqhjC92aoIQT2pRU1ExYlNMblU/final1.jpg'/>
 </a>
</li>
<li>
 <a href='#'>  <img alt='' class='slimg' src='https://googledrive.com/host/0ByqhjC92aoIQT2pRU1ExYlNMblU/final.jpg'/>
 </a>
</li>
<li>
    <a href='#'>  <img alt='' class='slimg' src='https://googledrive.com/host/0ByqhjC92aoIQT2pRU1ExYlNMblU/final2.jpg'/>
 </a>
</li>
<li>
 <a href='#'>  <img alt='' class='slimg' src='https://googledrive.com/host/0ByqhjC92aoIQT2pRU1ExYlNMblU/final3.jpg'/>
 </a>
</li>
</ul>
<div class='clear'/>  
5. Change Image URL above with your own image URLs.

Slider Cover


1. Login to Dashboard
2. Click the Template
3. Click the Edit Html
4. Find the code below

<div class='mycover'>
<ul>
  <li><img src='https://googledrive.com/host/0ByqhjC92aoIQT2pRU1ExYlNMblU/w1.jpg' title='My Cover'/></li>
<li><img src='https://googledrive.com/host/0ByqhjC92aoIQT2pRU1ExYlNMblU/w2.jpg' title='My Cover'/></li>
<li><img src='https://googledrive.com/host/0ByqhjC92aoIQT2pRU1ExYlNMblU/w1.jpg' title='My Cover'/></li>
<li><img src='https://googledrive.com/host/0ByqhjC92aoIQT2pRU1ExYlNMblU/w3.jpg' title='My Cover'/></li>
</ul>
<div class='clear'/> 
</div>
5. Replace the image URL above with your own URL.

Social Menu


1. Click on the Dashboard Templates
2. Edit Html
3. Find the code below

<ul>

        <li><a class='social-rss' href='#' target='_blank'>RSS</a></li>

        <li><a class='social-facebook' href='#' target='_blank'>Fb</a></li>

        <li><a class='social-twitter' href='#' target='_blank'>Twit</a></li>

        <li><a class='social-google' href='#' target='_blank'>G+</a></li>

    </ul>
4. Replace the "#" with the URL of your own social media.

Setting up The Custom Page


About Page




  1. Search Folders "Page" on the package Whitespot 
  2. Open the "About.txt" file with Notepad. 
  3. Copy all the code inside 
  4. Then go to your Blogger Dashboard 
  5. Click Page on the Dashboard 
  6. Create a New Page 
  7. Click the button Html 
  8. Paste all of the code 
  9. Publish 
  10. Adjust sentence and fill in the appropriate page of your blog

Contact Page


  1. Search Folders "Page" on the package Whitespot 
  2. Open the "Contact.txt" file with Notepad. 
  3. Copy all the code inside 
  4. Then go to your Blogger Dashboard 
  5. Click Page on the Dashboard 
  6. Create a New Page 
  7. Click the button Html 
  8. Paste all of the code 
  9. Publish 
  10. Adjust sentence and fill in the appropriate page of your blog
To activate the Contacts function is the form, follow the steps below
   1. Go to Menu Layout on the Dashboard
   2. Click on Add Gadget
   3. More Gadgets

    4. Save

Widget


  1. Search Folders "Widget" on the package WhiteSpot 
  2. Open the "Widget.txt" file with Notepad. 
  3. Copy all the code inside 
  4. Then go to your Blogger Dashboard 
  5. Click Layout on the Dashboard 
  6. Add a Gadget 
  7. Paste all of the code 
  8. Save 
Well, I guess everything I described above. But if there is any question about the template settings, please ask it on the discussion page.
And thanks for buying Whitespot Responsive Blogger Template.



Continue
Subscribe to: Posts (Atom)
  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube