Latest Themes Contact Us Semi-Customization Follow on Facebook

# Yo..! MAG | Documentation [ Yotemplates.com ]

Thank you for Downloading our template. Please Read the documentation carefully, If you still have any query, Feel Free to contact us at yotemplate@gmail.com. Thank you so much!

- Buy Premium Version & Get Premium Support

##### 1. Backup & Uploading

1. Unzip the Template.zip file.
2. On Blogger Dashboard Click Template.
3. Click on Download Full Template to keep your old template.
4. Click Browse... button. Find where the “Crown-premium.xml” file location.
5. Then Click Upload.
6. Edit mobile Preveiw. (follow images).

#### After installing the theme, there are minimun settings to make all widgets work fine in this template.

##### 2. Blog Feed

1. On Blogger Dashboard Click Settings.
2. Click Other.
3. In Site Feed > Allow Blog Feed Choose Full.
4. Then Click Save settings.

#### Now you can Edit the meta tag Keywords of your blog. follow this steps

1. On Blogger Dashbord Click Template.
2. Click Edit HTML.
3. Click `Ctrl` + `F` and Search for the following Code:
`<meta content='Keywords_Here' name='keywords'/>`
4. Now Click This to generate Meta tag for your blog
5. Change Your Meta Tag With The One You Generated From Jet Seo Tools
6. Click Save template.

##### 1. Setting Main Blog Part

1. On Blogger Dashboard Click Layout.
2. Click Edit on Blog Posts Widget.
3. Change it to look like that image.
4. Click Save.

##### 2. Mega Menu

1. On Blogger Dashboard Click Template.
2. Click Edit HTML.
3. Press Crtl+F.
4. And search 'Edit Mega-Menu'
5. And find This Code:

Change | Please Change the links according to your need,For links Just replace the # with url and Change the Name of the link

##### 3. About Author

1. On Blogger Dashboard Click Template.
2. Click Edit HTML.
3. Press Crtl+F.
4. And search ' About Author Text'
5. And find This Code:

Change The Text According to your requirement

##### 4. Popular Post Carousel/What's Hot This Week

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var nopost = 10;
    </script>
    <script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=galposts"></script>

LABEL_NAME | Change it with the label name of posts to be shown.
numpostsq | Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

Go to this url Facebook Like Box

Facebook Page Url | Add Your FB Url in box
Color Scheme | Choose light color scheme

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var nopostb = 5;
    </script>
    <script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=blockposts"></script>

LABEL_NAME | Change it with the label name of posts to be shown.
nopostb | Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var nopostr = 5;
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&amp;callback=recentposts"></script>

nopostr | Number of posts to be shown. It must be lower or equal to the number of posts in your blog.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div id="random-posts">

    <script style="text/javascript">
     var numposts_gal = 4;
    </script>

    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=99"></script>
    </div>

numposts_gal | Number of posts to be shown.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div id="comments-container"></div>
    <script>
    var cm_config = {
    ct_id: "comments-container",
    max_result: 5
    };
    </script>

max_result | Number of recent comments to be shown.

##### 5.Top-Menu

1. On Blogger Dashboard Click Template.
2. Press ctrl + F.
3. try to find "Top-Menu"(Without quotes) .
4. You'll find the following code.

# | Change social links with your links.

##### 6. Grid Gallery

1. On Blogger Dashboard Click layout.
2. And Follow the instructions given the below:

##### 7. Sidebar Socials

1. On Blogger Dashboard Click layout.
2. And Follow the instructions given the below:

        <!Edit Your Social Icons here, You Just have to Change URLs with "#", In case You Want to Change Social icon, Just rename the li-->

    <ul class="follow-soc"><li><a class="fa fa-dribbble" href="#"></a></li>
    <li><a class="fa fa-facebook" href="#"></a></li>
    <li><a class="fa fa-instagram" href="#"></a></li>
    <li><a class="fa fa-pinterest" href="#"></a></li>
    <li><a class="fa fa-twitter" href="#"></a></li>
    </ul>

    <!--Still Facing Problem??, Contact Us for help-->

# | Change social links with your links.

##### 8. How to make tabbed widget

This is the simplest tabbed widget ever made, You just have to enter a small piece of code into your HTML/Javascript widget And place it right above the widgets which you want to get tabbed.

1. On Blogger Dashboard Click layout.
2. Add a HTML/Javascript widget in sidebar column:
3. NOTE: DO NOT GIVE ANY TITLE TO THIS WIDGET.
4. And Just Paste the code given below into your widget

      <style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb !important;
    }
    .tabber h2 {
     float: left;
     margin: 0 1px 0 0;
     font-size: 12px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px; /*--Pull tab down 1px--*/
     overflow: hidden;
     position: relative;
     background: #222;
    color:#fff;
     cursor:pointer;
    }
    html .tabber h2.active {
         background: #08c;
        /* border-bottom: 1px solid #fff; */
        color: #fff; /*--"Connect" active tab to its content--*/
    }
    .tabber .widget-content {
     padding: 10px;
     background: #fff;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none;
    }
    </style>

    <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3
     });
    });
    </script>

    <!-- to make sure the widget works, do not alter the code below -->
    <div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

# | Change social links with your links.

##### 9. Recent Post

1. On Blogger Dashboard Click layout.
2. Add a HTML/Javascript widget in sidebar column:
3. Now Paste the code given below into your widget

       <script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
    <script style="text/javascript">
    var posts_no = 5;
    var showpoststhumbs = true;
    var readmorelink = true;
    var showcommentslink = true;
    var posts_date = true;
    var post_summary = true;
    var summary_chars = 70;</script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    <noscript>Your browser does not support JavaScript!</noscript>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    <style type="text/css">
    img.recent-post-thumb {padding:2px;width:100x;height:100px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
    .recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
    ul.recent-posts-container li {position:relative;padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
    ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
    ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
    .recent-posts-container a { text-decoration:none; }
    .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5E7DAD;}
    .recent-posts-details {margin: 5px 0px 0px 92px; }
    .recent-posts-details a{ color: #777;}
    </style>

# | Change social links with your links.

##### Footer Social Links

you have to edit the social links manually.

#### Demo Slider

1. On Blogger Dashbord Click Template.
2. Click Edit HTML.
3. Click `Ctrl` + `F` and Search for the following Code in the bottom

    <ul class='contact-social'>
    <li><a href='#'><i class='fa fa-facebook'/> Facebook</a></li>
    <li><a href='#'><i class='fa fa-twitter'/> Twitter</a></li>
    <li><a href='#'><i class='fa fa-google-plus'/> Google+</a></li>
    <li><a href='#'><i class='fa fa-dribbble'/> Dribbble</a></li>
    <li><a href='#'><i class='fa fa-linkedin'/> Linkedin</a></li>
    <li><a href='#'><i class='fa fa-instagram'/> Instagram</a></li>
    </ul>

4. just replace the # with your social url Save template.
5. And delete the whole li which you don't want to use. Save template.

#### You can change the only color of the template using blogger template designer.

##### Go to Blogger Dashboard -> Template -> Customize and then advance

Change the color value here and link color can also be change

##### Go to jetseotools for to Generate Meta tegs, SEO Analysis, View Your Traffic And Many More Cool Features And Services

Click Here to Visit JET SEO TOOLS

#### Once Again, Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to contact me. Thanks so much!