### “Christmas 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 Media on Sidebar
3. Upload Logo
4. Setting up the menu
5. Horizontal Ads Image
6. Recent Posts
7. Meta Keywords and Description
8. Custom Error 404 Page
9. Sidebar Social Widgets
10. 6 Tabs Widget
11. Video Carousel
12. Credits

###
1. Installation - top

Here you are with Christmas Responsive Blogger Template. 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 “Christmas-template.xml” file location.

5. Then Click Upload.

###
2. Add Social Links on Top Right - top

You Can See that Side area have Social Icons Collection. To Edit Social Icon in this theme you can follow these steps:

1. On Blogger Dashbord Click Layout

2. Click Edit as shown in below image

3. Add this Code :

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

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

4. Change # with yours Social URL link

###
3. Upload Logo- top

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.

###
4. Setting up the menu - top

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 :

           <!-- Menu -->
                        <div id='menu-container'>
              <nav id='neat-menu'>
                   <ul id='menu23'>
                     <li><a href='/'>HOME</a></li>
                       <li><a href='#'>DROPDOWN <i class='fa fa-chevron-down'/></a>
                           <ul>
                               <li><a href='#'>Menu element 1</a></li>
                               <li><a href='#'>Menu element 2</a></li>
                               <li><a href='#'>Menu element 3</a></li>
                               <li><a href='#'>Menu element 4</a></li>
                               <li><a href='#'>Menu element 5</a></li>
                           </ul>
                       </li>
                       <li><a href='#'>DROPDOWN <i class='fa fa-chevron-down'/></a>
                           <ul>
                               <li><a href='#'>Menu element 1</a></li>
                               <li><a href='#'>Menu element 2</a></li>
                               <li><a href='#'>Menu element 3</a></li>
                               <li><a href='#'>Menu element 4</a></li>
                               <li><a href='#'>Menu element 5</a></li>
                           </ul>
                       </li>
                       <li><a href='#'>DROPDOWN <i class='fa fa-chevron-down'/></a>
                           <ul>
                               <li><a href='#'>Menu element 1</a></li>
                               <li><a href='#'>Menu element 2</a></li>
                               <li><a href='#'>Menu element 3</a></li>
                               <li><a href='#'>Menu element 4</a></li>
                               <li><a href='#'>Menu element 5</a></li>
                           </ul>
                       </li>
                       <li><a href='#'>SINGLE MENU</a></li>
                   </ul>

4. Change # with yours URL link.

### E) Horizontal Ads Image - top

Follow These steps To Add Ads

Go To Blogger >> Layout

Now You Can See Layout Page Right side Area Have Html/Javascript as shown in the image.

Now you can enter your ads code into the HTML/Javascript you just added.

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

F) Recent Posts - top

You Can See below Ads there is a RECENT POSTS section.

The above area is automatically populated when you publishes your posts.

G) Meta Information - 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 Performance" and Now Click Edit On "Meta Description"

H) Add Custom 404 Error page - top

Add Coustom 404 Page To Blogger Template.

Go To Blogger >> Settings

And Click On "Search Performance" 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>

For Facebook refer to the below image, and click on edit

Paste the below code into the content box that appears.

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

K) 6 Tabs Widget - top Goto Template >> Search for below code:

    <div class='tab-wrapper'>
    <div class='tabber' id='tab1'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Break?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab2'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sport?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab3'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Games?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab4'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Cool?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab5'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/God?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab6'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Music?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='clear'/>
    </div>

Now Add Your Own Labels that you use in your blog in the above code replacing Break, Sport, Games, Cool, God, Music.
To change the text on website: "Adventure","Action","Bike Game","Dress-Up","Strategy","Sport Game", then search for below code and edit it:
Title1 = "Adventure";
Title2 = "Action";
Title3 = "Bike Game";
Title4 = "Dress-Up";
Title5 = "Strategy";
Title6 = "Sport Game";

Now you are good to go.

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