May 2019 - Expand Your Business

Expand Your Business

We are who can Expand Your Business at Global Level

Hot

Post Top Ad

Technext Magazine Blogger Template Documentation

May 31, 2019
Technext Magazine Blogger Template Documentation

Technext Magazine Blogger Template” Documentation by “Odd Themes” v1.0

Created: 17/04/2016
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. Upload Logo
  3. Configure Blog
  4. Setting up the Top Menu
  5. Like and Follow buttons on top
  6. Setting Share icons on top right
  7. Top Ad Banner
  8. Setting up the Main Menu
  9. Set up the top Slider
  10. Set up post grid on right side of top Slider
  11. Set up Posts Widgets on Homepage
  12. Latest Posts on sidebar
  13. Categories on sidebar
  14. Website Main Color Change
  15. Footer Ad Banner
  16. 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.

    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.

  2. Configure Blog- top

    3. Access your blog Layout > click Edit link on Blog widget



    Select and choose the options given in the image above.



  3. Setting up the Top Menu - top

    4. Top Menu is the menu on Top Left corner above the LOGO.

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

    1. On Blogger Dashbord Goto Layout
    2. Edit Pages Top HTML widget as shown below


      3. Check out the video:


    3. Like and Follow buttons on top- top

      4. Access your blog Layout > click Edit link on top-share-buttons widget

    Enter the following code in the content area of Top-share-buttons widget: 
    <div class="fb-like" data-href="https://facebook.com/oddthemes" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
<a href="https://twitter.com/oddthemes" class="twitter-follow-button" data-show-count="false"></a>

    Then change the links of Facebook and Twitter.

  4. Setting Share icons on top right- top

    5. Access your blog Layout > click Edit link on top-social-icons widget
    Enter the following code in the content area of top-social-icons widget: 

    <a class='social-fa' href='http://facebook.com/oddthemes' target='_blank'><i class='fa fa-facebook'/></i></a>
<a class='social-tw' href='http://twitter.com/oddthemes' target='_blank'><i class='fa fa-twitter'/></i></a>
<a class='social-in' href='http://instagram.com/#' target='_blank'><i class='fa fa-instagram'/></i></a>
<a class='social-pi' href='http://pinterest.com/oddthemes' target='_blank'><i class='fa fa-pinterest'/></i></a>
<a class='social-yo' href='#' target='_blank'><i class='fa fa-rss'/></i></a>

    Then change the links of Facebook and Twitter, etc.

  5. Top Ad Banner- top

    6. Access your blog Layout > click Edit link on Header 2widget


    Just enter your ad code there in the content area.

    There are two MENU's in this template, One at the top left and other one is the Main Menu which is in center just below the LOGO.

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

    1. On Blogger Dashbord Goto Layout
    2. Edit Main Menu Bar HTML widget as shown below
    3. Add the below Code in the content area:

      <ul class='topmenu1' id='masthead'>
  <li><a href='#'>Home</a></li>
  <li><a href='#'>Download</a>
  </li>
  <li><a href='#'>Social</a>
  </li>
  <li><a href='#'>Features</a>
    <ul>
      <li><a href='#'>Music</a></li>
      <li><a href='#'>Group</a></li>
      <li><a href='#'>Sub Menu 3</a>
          <ul>
            <li><a href='#'>Music</a></li>
            <li><a href='#'>Group</a></li>
            <li><a href='#'>Sub Menu 3</a></li>
            <li><a href='#'>Sub Menu 4</a></li>
          </ul>
      </li>

      <li><a href='#'>Sub Menu 4</a></li>
    </ul>
  </li>
  <li><a href='#'>Entertainment</a></li>
  <li><a href='#'>Travelling</a></li>
  <li><a href='#'>Contact</a></li>
</ul>
    4. Change # with yours URL link and text with your text.

  6. Setting up the Top Slider- top

    7. Access your blog Layout > click Edit link on Looped Slider widget

    You can enter the Label of the posts in the content area so that the posts of that Label gets to be shown in the Top Slider.

    Now enter single label as shown in the below image. Make sure you have entered the label correctly as Labels are case-sensitive.

  7. Set up post grid on right side of top Slider- top

    8. Access your blog Layout > click Edit link on BoxSlider widget

    You can enter the Label of the posts in the content area so that the posts of that Label gets to be shown in the Grids.

    Now enter single label as shown in the below image. Make sure you have entered the label correctly as Labels are case-sensitive.

  8. Set up Posts Widgets on Homepage- top

    9. Access your blog Layout > click Edit link on Boxwidget

    You can enter the Label of the posts in the content area so that the posts of that Label gets to be shown in the Posts Section.

    Now enter single label as shown in the below image. Make sure you have entered the label correctly as Labels are case-sensitive.


    Auto News on Sidebar
    Do same as above.

  9. Latest posts on sidebar- top

    10. Access your blog Layout > click Edit link on Sidebar widget

    In Configure window, input your Title and follow the image below:

  10. Categories on sidebar- top

    11. Access your blog Layout > click Edit link on Sidebar widget

    In Configure window, input your Title and follow the image below:

  11. Website Main Color Change- top

    12. Access your blog Template > click Customize as shown in below Image:

    Then goto Adjust Widths and select any color you want for the whole website.

  12. Footer Ad Banner- top

    13. Access your blog Layout > click Edit as shown in below Image:

    Then add your ad banner code in the content area.

    Now you are good to go.

  13. Credits To - top
    Special credits: God [ For Giving Me Strength ]

     

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

    Ceyron Louis At OddThemes.com

    Go To Table of Contents
Read More

Slash Blogger Template Documentation

May 31, 2019
Slash Blogger Template Documentation
Slash Blogger Template
By Salman Farooqui
Email - salman0015@gmail.com
Thank you for purchasing this 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. Slash Blogger Template is a multipurpose template that can be used for many things like tech site, blog, news site and more.

We will learn to install this template in parts. First the header and then the three columns and footer. Then we will learn how to customize this template. But before that you have to first go to Template in your blog Dashboard and click on Backup/Restore Button on the top. Then click on Browse and locate your template xml under Template File folder in the Slash Template provided to you. You have been provided two template files, one with the adsense ad slot in the header and one template file without the ad slot in the header section. Choose the template file that best fits on your blog. Just upload the template and start following this tutorial on how to make it work on your blog.
Table Of Contents

(A) Header
(B) Column1
(C) Column2
(D) Column3
(E) Footer
(F) Other Setting
(G) Changing Colors (Template Designer)
(H) Sources and Credits



In Slash Blogger template the Header section need modification at two places - Ad Slot and Mega Menu


Responsive Adsense Ad Slot (optional)

Slash comes with two template files. One with a responsive header adsense slot on the right of blog title and one without it. To make use of responsive adsense ad slot, follow the below steps,
(1) Go to your Adsense Account
(2) Choose +New Ad Unit
(3) In The Ad Size Drop Down choose Responsive Ad Unit
(4) Copy the code you get
(5) Now, go to your blog Layout section and add the code you got from adsense to html widget on the top right corner of your screen.

It will automatically resize and serve a different dimension ad when you view on diffrent screen resolution.

Mega Menu

Slash Template is very feature rich and one of the best feature of this template is the Ajax powered responsive Mega Menu. It takes your blog label links and show 4 latest posts from them when the user hovers(mouseover) on that label link. The best thing about it is that it doesn't have to reload to show posts in different categories. Just take your mouse to the label link and it will fetch 4 latest posts from that label.
Click the Edit link in your Mega Menu Widget.

It will open up your Mega Menu Widget with a blank box.


You have to add the codes in it.

<ul class='w2bmenu' id='menu'>
        <li> <a href='/'>Home</a> </li>
        <li> <a href='#'>Social Media<span class='subdown'/></span></a>
                <ul>
<li><a href='http://slashtemplate.blogspot.com/search/label/facebook'>Facebook</a></li>
<li><a href='http://slashtemplate.blogspot.com/search/label/twitter'>Twitter</a></li>
<li><a href='http://slashtemplate.blogspot.com/search/label/youtube'>Youtube</a></li>               
</ul>
        </li>
        <li> <a href='#'>Gadgets<span class='subdown'/></span></a>
                <ul>
<li><a href='http://slashtemplate.blogspot.com/search/label/salman'>Design</a></li>
<li><a href='http://slashtemplate.blogspot.com/search/label/farooqui'>Templates</a></li>               
</ul>
        </li>
        <li> <a href='#'>Startups<span class='subdown'/></span></a>
                <ul>
<li><a href='http://slashtemplate.blogspot.com/search/label/games'>Games</a></li>
<li><a href='http://slashtemplate.blogspot.com/search/label/market'>Marketing</a></li>
<li><a href='http://slashdemo.blogspot.com/search/label/apps'>Apps</a></li>               
</ul>
        </li>
        <li> <a href='http://slashtemplate.blogspot.com/p/write-for-us.html'>Write For Us</a> </li>
</ul>



The code in green color is part of dropdown menu. The code in skyblue color doesn't have a drop down mega menu. It's just simple links. You can add any link to them not necessarily the label link. But for mega menu label links are required.
The code between <li> and </li> is what makes an item in a menu. Lets say we have

<li><a href='http://slashdemo.blogspot.com/search/label/something'>SomeText</a></li>

Here you just have to replace the red text with your full label link and yellow text with the title that appear for that link.
To add more drop down items in mega menu simply add more of the above line before or after the green code.
Save your widget after making the required changes.

If you are facing any problem in creating your mega menu, just hit me an email with the links and text you want. And i will send you the codes to add.

(B) Column1
Back To Top


Automated Featured Slider

Another cool widgets for your blog. Unlike other Slider where you have upload the image and update the text every time you want to change the slider content, this is automated. Just add a label of featured in your post and this slider will pick it up, display the image (the big and the small) , the post title and the snippet from your post. You don't need to edit anything here.

Lets say you created a post and you think it's important and should be featured. When you have finished writing your post, just add an extra label of featured among other labels that you give to your post. 5 latest posts that have featured label included in it will be shown on this featured slider.
If you don't want the label featured appear on your posts on your older posts that are no longer featured, you can simply remove it via your posts list. However, this is not required and won't affect anything.

(C) Column2
Back To Top

Post Lists By Category

Well mainted categories are always the most important aspect of any blog. This template have a very powerful category interface and that too with style and colors. Lets see what we have to edit to make these category lists on on your blog. Go to Layout will you see this.


Click on Edit link on the widget. It will open up this box.


You have to add the codes in content box for showing category lists. We have 3 diffrent kinds of category list.

Title with Thumbnail and Summary


Add this in the content box of the widget for showing this style of category list.

<div class='recentbylabels'>
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/technology?published&alt=json-in-script&callback=labelthumbs"></script>
</div>


Replace green color number with the number of posts you want to show for each category. In the above example 3 posts will be shown for Technology category.
You have to replace the red color text will the label name of the category.
For example, your full label url is - http://somme.blogspot.com/search/label/hotspot
Here hotspot is the label name.

If you want to add more category list to your blog, click on Add a Gadgets Link and it will open up a list of official widgets you can add.
Choose HTML/JavaScript Widget.


A new box will appear.



Add the category name in Title and any category code provided here in the content box. Make the required changes. You can add as many categories as you like. Have fun.

Title With Summary


For this kind of category list. Add the below code in HTML/Javascript widget.

<div class='recentbylabels'>
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = false;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/tech?published&alt=json-in-script&callback=labelthumbs"></script>
</div>

Replace green with number of posts and red with label name.

Title With Thumbnail


For this kind of category list you have to add the below code.

<div class='recentsbylabels'>
<script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/startup?published&alt=json-in-script&callback=labelingthumbs"></script>
</div>

Replace green with number of posts you want to show and red with label name.

(D) Column3
Back To Top

Well, you don't need to know anything about column3. It's the sidebar section. Just go to layout and add/remove widget from it.


However, if you want to show the social icons + feedburner email subscription box like i have on demo blog. Go to Layout > Click Edit on Connect Widget > In the content box add the following code.

<div class='connect'>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYEdJj2OTfgSMDVzUUANaUPyUyo8XRdRjMcF-d8unW4VMLpHDMeySBuCNe4hPNF8Bax2TX8-AvS1pNoWq3TuKDAfQuuhHtyNGkS5lQWCdqquagCmPFsW4TkoBelmqCliDYKc_9hPHJ5I/s1600/rss.png" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKu9xSWjFw95CaJD99TMFMyVpDhZzYUQSvvd3_ywYTlF3iub3-ef1TU2Z2AQvmqjdMF_DuSgT7dFIaGsaHcwfo9EPb64uZkfoIbZIsm4L1mKmEdWcAR5bmAx470nDFqgNQntE0tkH0yaY/s1600/twitter.png" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_WLy9J8FoGi4aubSajHESP6i8cCd8oRe8P-wxzkoMJFtSUOktiWCCuuARa_rXQ-7nY_S6gkHzdjQGnf6SCg7IsKvL_sayK4EBxWEtE25q1-E7HuFZC1LZ32pbhFItNxTq5UuhRC75ocE/s1600/email.png" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNfJeEsmUt5ssJT3N2kAX7-S2sgpBfFZ6D7zTMPZQxLjGMI6HxWswT-JBREMgSA7j3jRaPSMXSM6RrZg0aF3rkNwtmY5b-SqOIe16GFY4v4un9v5R3cDXGj8gN-QQdDY6xWawxYpgARWk/s1600/googleplus.png" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBMTiwlIDCNF5Lq7OCJKMGNc5MbeCVJ9dviJQjvKaQJFPtmc1St30x4fGIeDft66dLzIxnDnV5ta_PdKsPJCSEcQwEJAOkTGApLhaUI9o2lIYxlJlJPvGPI3oQus_LbtkDDNgPpG8dYhw/s1600/facebook.png" /></a>
</div>
<div class='emailform'>
Join over 500 Followers
</div>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtokickblogger', 'popupwindow', 'scrollbars=yes');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify" class="emailtop"><p><input name="email" class="emailtext" type="text" /></p><input name="uri" value="howtokickblogger" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" class="emailsub" type="submit" /></form>

Replace # with the repective social media links. For example, we have-
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKu9xSWjFw95CaJD99TMFMyVpDhZzYUQSvvd3_ywYTlF3iub3-ef1TU2Z2AQvmqjdMF_DuSgT7dFIaGsaHcwfo9EPb64uZkfoIbZIsm4L1mKmEdWcAR5bmAx470nDFqgNQntE0tkH0yaY/s1600/twitter.png" /></a>
Change it to
<a href="http://twitter.com/themeforest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKu9xSWjFw95CaJD99TMFMyVpDhZzYUQSvvd3_ywYTlF3iub3-ef1TU2Z2AQvmqjdMF_DuSgT7dFIaGsaHcwfo9EPb64uZkfoIbZIsm4L1mKmEdWcAR5bmAx470nDFqgNQntE0tkH0yaY/s1600/twitter.png" /></a>

The yellow color code is the code for a single social media icon. To have more social icons, simply keep adding it.

Replace the green color code with your feedburner feed name if you want to make use of feedburner email subscription option.


Back To Top

This blog includes a three column responsive footer. You can add/remove widgets in it from your blog's layout section.


If you want to show latest posts like i have in my demo blog. Here's the code for it.

<div class='recentbylabels'>
<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/?published&alt=json-in-script&callback=labelthumbs"></script>
</div>

Replace green color with the number of latest posts you want to show.


I have included some links on the footer of the blog which is needed and present on almost all the blogs. Go to Layout, open Footer Links widget

This box will appear.

You have to add codes in your box.

Add this code in your widget

<a href='/'>Home</a>
<a href='#'>About</a>
<a href='#'>Advertise</a>
<a href='#'>FAQs</a>
<a href='#'>Privacy Policy</a>

Change green color text with the title text of the links and # with their respective links. Add more of these lines to add more links.

(F) Other Settings
Back To Top

By default the date on your blog's label pages show full lenth date format which doesn't look very good. To change it go to Settings > Language and Formatting > Change Date Header Format from the dropdown menu. The image show what i used for my demo blog. For your blog, the choice is yours.



(G) Change Colors
Back To Top

You can easily change the colors present in slash blogger template by easily selecting the element and picking up a color from the color wheel. You can do this with the help of blogger's Template designer feature. This Template is designed to support this cool blogger feature.
To access Blogger Template Designer, go to your blog dashboard, then click on template, a new screen will come with your template preview image and a Customize link below it, click on customize and your Template Designer will open up. Now click on Advanced in your Template Designer and you will see the list of all the section that you can customize. Click on them to customize their color and fonts.


I did my best to create a nice color scheme in my template but you may need different colors.

(H) Sources And Credits
Back To Top

I've used the following resources in my template.


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. Mail Me salman0015@gmail.com No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Read More
Labels:

Maxxiz Responsive Blogger Template Documentation

May 31, 2019
Maxxiz Responsive Blogger Template Documentation
Share by Themes24x7.com

Maxxiz Blogger Documentation

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!
Contact Form
Changelog
Credits
Author: satankmkr
Demo : Maxxiz Demo Page
Created: 2013-08-06
Modified: 2013-12-20
Current Version: 1.3
Documentation Version 1.3

Getting started

I assume you have a blogger account, so let's get started!

Enable Mobile Template

YOU MUST DO THIS STEP FIRST, BEFORE INSTALL THE TEMPLATE TO HELP TEMPLATE EDITOR CAN WORK PROPERLY
As default, Blogger will use its own template for you blog on mobile. So if you want to use Maxxiz template on mobile devices, please enable it first.
Access your Template menu and click on Gear button of Mobile template.
In Choose mobile template window, check "Yes. Show mobile template on mobile devices.", then click drop down at Choose mobile template option, choose Custom, then click Save button.

Installation

You can do it by follow this step:
  1. Unzip the “Maxxiz-theme.zip” file.
  2. On Blogger Dashboard Click Template.
  3. Click Backup/Restore button (Top Right).
  4. Click Choose File button. Find where the “Maxxiz-theme.xml” file location.
  5. Then Click Upload.

Default Setting

After installing the theme, this it the minimun setting to make all widget works fine in this themes.

Embedded Comment

This to make comment area like the Demo and make Emoticon show
  1. On Blogger Dashboard Click Setting.
  2. Click Posts and Comments
  3. in Comment Location Choose Embedded
  4. Then Click Save settings.

Blog Feed

This to make recent comment, Search Result, Auto Featured Post, and Post by Label work fine
  1. On Blogger Dashboard Click Setting.
  2. Click Other
  3. in Site Feed Allow Blog Feed Choose Full Or Short
  4. Then Click Save settings.
NB:
1. If yours post have image uploaded on blogspot you can choose SHORT. but if yours post just have image from third party image hosting you must choose Full
2. Blogger feed must be not redirect to other feed site like Feedburner
3. Your's blog or website not Private

Layout Explain

  1. Right Header Widget Area(Ads 728x90)
  2. Featured Post Area
  3. Top Sidebar Area
  4. Middle Sidebar Area
    a. Popular Post
    b. Recent Comment
    c. Archive Widget
  5. Bottom Sidebar Area
  6. Label Post Widget Area
  7. Footer Widget Area
  8. Manual Featured Post Area (work with Image Widget)
  9. Left Sidebar Area

Setting up the menu






To Edit Menu in this theme you can follow this step:
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. (Top Menu) Scroll down and Find this Code :

    <ul class='sf-menu' id='topmenunav'>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>More</a>
    <ul>
      <li><a href='#'>Menu 1</a></li>
      <li><a href='#'>Menu 2</a></li>
      <li><a href='#'>Menu 3</a></li>
      <li><a href='#'>Menu 4</a></li>
    </ul>
  </li>
  <li><a href='#'>Menu</a></li>
</ul>
  4. (Middle Menu) Scroll down and Find this Code :

    <ul class='sf-menu' id='menunav'>
  <li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Archive</a></li>
  <li><a href='#'>Comments</a></li>
  <li><a href='#'>With Sub Menu</a>
    <ul>
      <li><a href='#'>Sub Menu</a></li>
      <li><a href='#'>Sub Sub Menu</a>
        <ul>
          <li><a href='#'>Sub Menu</a></li>
          <li><a href='#'>Sub Menu</a></li>
          <li><a href='#'>Sub Menu</a></li>
          <li><a href='#'>Sub Menu</a></li>
        </ul>
      </li>
      <li><a href='#'>Sub Menu</a></li>
      <li><a href='#'>Sub Menu</a></li>
    </ul>
  </li>
  <li><a href='#'>Error 404</a></li>
</ul>
  5. Change # with yours URL link

Setting Social Icon



To Edit Social Icon in this theme you can follow this step:
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    <ul class='sociico' id='icon-socialmn'>
  <li class='sotw'><a href='#' target='_blank'>twitter</a></li>
  <li class='sofb'><a href='#' target='_blank'>facebook</a></li>
  <li class='sogo'><a href='#' target='_blank'>google</a></li>
  <li class='sorss'><a href='#' target='_blank'>rss</a></li>
  <li class='solinkn'><a href='#' target='_blank'>linkedin</a></li>
  <li class='sodrib'><a href='#' target='_blank'>dribbble</a></li>
  <li class='sopint'><a href='#' target='_blank'>pinterest</a></li>
</ul>
  4. Change # with yours Social URL link

Creating Content Featured Post, Label Post, Slider Label Post and Error Page

Manual Slide Show (Using Image Widget)

Manual Slide Show

To Create Manual Slide Show follow this step
  1. on Dashbord Blogger Click Layout
  2. On Manual Slideshow Widget Area Click Add a Gadget
  3. Choose Image Widget




    1. Fill With Image Title
    2. Image Description
    3. Link When Image or Title Click
    4. Search Yours Image
    5. Uncheck shrink to fit


    NB : Recommended Image Size 517px x 250px
  5. Click Save
  6. If You Whan Show 5 image, do this step 5 times (Image Widget must be not more than 5 times because if more than 5 times Slideshow CSS must be change to make it looks good)

Auto Featured Post (Random, Recent, Random by Label or Recent by Label)


[Title][featuredpost][random][5]


New Method (Using SHORTCODE)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels widget
  4. Copy this Code: 

    [Title][featuredpost][random][5]



  5. Click Save

Old Method (Using Javascript)

To add Featured Post widget follow this step
  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code:

    <div id="featpost"></div>
<script type='text/javascript'>
jQuery("#featpost").AutofeaturedPost({
MaxPost:5
});
</script>
  5. Click Save
NB: MaxPost should be not more than 5 Post (because if more than 5 post Slideshow CSS must be change to make it looks good) (Default) Complete Javascript to call Auto Featured Post like this code: 
jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost({
blogURL: "",
MaxPost: 5,
ImageSize: 650,   
Summarylength: 100,     
RandompostActive: true,   
tagName: false
});

Property Description
blogURL Yours blog URL or you can leave it blank to load where this script load.
MaxPost Maximum number artikel will show on Featured Post
Summarylength Number of summary characters to show.
ImageSize Post Image size (in pixel)
RandompostActive default true. It's will show article ramdomly. If want to show Recent Post just change to false
tagName If you want to show Featured Post by the Label. Example: to show featured post from Sports Label just write like this tagName:"Sports"

SLIDER POST


Carousel Slider
To add Post by Label (Carousel Slider Post) widget follow this step

New Method (Using Short Code)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels
  4. Copy this Code: 

    [Widget_Title][carouselslide][recent][9]



  5. Click Save

OLD Method (Using Javascript)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code:

    <div id="webdespost"></div>
<script type='text/javascript'>
jQuery("#webdespost").RecentPostbyTag({
postType:"s",
MaxPost:9,
ImageSize:"s200-p",
tagName:"Web Design"
});
</script>
  5. Click Save
  6. Note: In tagName is name of the Post Label that will show. on this sample is "Web Design" mean will display artikel from Web Design label. If you want add new/next Slider Post you must change div id. Ex:

    <div id="secondsliderpost"></div>
<script type='text/javascript'>
jQuery("#secondsliderpost").RecentPostbyTag({
postType:"s",
MaxPost:10,
ImageSize:"s200-p",
tagName:"Other Label"
});
</script>

VERTICAL POST

To add Post by Label (Vertical Post) widget follow this step

New Method (Using Short Code)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels
  4. Copy this Code: 

    [Widget_title][vertical][recent][5]
    if you want animated Vertical Post shortcode look like this: 
    [Widget_title][vertical][animated][7]



  5. Click Save

OLD Method (Using Javascript)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code:

    <div id="musicpost"></div>
<script type='text/javascript'>
jQuery("#musicpost").RecentPostbyTag({
postType:"v",
MaxPost:4,
tagName:"Music"
});
</script>
  5. Click Save
  6. Note: In tagName is name of the Post Label that will show. on this sample is "Music" mean will display artikel from Music label.
    If you want add new/next Vertical Post you must change div id. Ex:

    <div id="secondverticalpost"></div>
<script type='text/javascript'>
jQuery("#secondverticalpost").RecentPostbyTag({
postType:"v",
MaxPost:5,
tagName:"Other Label"
});
</script>

Horizontal Post

To add Post by Label (Horizontal Post) widget follow this step

New Method (Using Short Code)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels
  4. Copy this Code: 

    [Widget_title][horizontal][recent][5]
    if you want animated Horizontal Post shortcode look like this: 
    [Widget_title][horizontal][animated][7]



  5. Click Save

OLD Method (Using Javascript)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code:

    <div id="sportpost"></div>
<script type='text/javascript'>
jQuery("#sportpost").RecentPostbyTag({
postType:"h",
MaxPost:4,
tagName:"Motion Design"
});
</script>
  5. Click Save
  6. Note: In tagName is name of the Post Label that will show. on this sample is "Motion Design" mean will display artikel from Motion Design label.
    If you want add new/next Horizontal Post you must change div id. Ex:

    <div id="secondverticalpost"></div>
<script type='text/javascript'>
jQuery("#secondhorizontalpost").RecentPostbyTag({
postType:"h",
MaxPost:5,
tagName:"Other Label"
});
</script>

Combine Post

To add Post by Label (Combine Post) widget follow this step

New Method (Using Short Code)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels
  4. Copy this Code: 

    [Widget_title][combine][recent][5]



  5. Click Save

OLD Method (Using Javascript)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code:

    <div id="combinepost1"></div>
<script type='text/javascript'>
jQuery("#combinepost1").RecentPostbyTag({
postType:"c",
MaxPost:5,
tagName:"Motion Design"
});
</script>
  5. Click Save
  6. Note: In tagName is name of the Post Label that will show. on this sample is "Motion Design" mean will display artikel from Motion Design label.
    If you want add new/next Combine Post you must change div id. Ex:

    <div id="combinepost2"></div>
<script type='text/javascript'>
jQuery("#combinepost2").RecentPostbyTag({
postType:"c",
MaxPost:5,
tagName:"Other Label"
});
</script>

Gallery Post 1

To add Post by Label (Gallery Post 1) widget follow this step

New Method (Using Short Code)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels
  4. Copy this Code: 

    [Widget_title][gallery1][recent][10]



  5. Click Save

OLD Method (Using Javascript)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code:

    <div id="gallerypost1"></div>
<script type='text/javascript'>
jQuery("#gallerypost1").RecentPostbyTag({
postType:"g1",
MaxPost:13,
tagName:"Motion Design"
});
</script>
  5. Click Save
  6. Note: In tagName is name of the Post Label that will show. on this sample is "Motion Design" mean will display artikel from Motion Design label.
    If you want add new/next Combine Post you must change div id. Ex:

    <div id="gallerypost2"></div>
<script type='text/javascript'>
jQuery("#gallerypost2").RecentPostbyTag({
postType:"g1",
MaxPost:13,
tagName:"Other Label"
});
</script>

Gallery Post 2

To add Post by Label (Gallery Post 2) widget follow this step

New Method (Using Short Code)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels
  4. Copy this Code: 

    [Widget_title][gallery2][recent][10]



  5. Click Save

OLD Method (Using Javascript)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code: 

    <div id="gallery2post1"></div>
<script type='text/javascript'>
jQuery("#gallery2post1").RecentPostbyTag({
MaxPost:12,
tagName:"Your_TagName",
postType: "g2"
});
</script>
  5. Click Save
  6. Note: If you want add new/next Gallery Post 2 you must change div id and jQuery id must be same with new div id

Simple Recent/Random Post (No image)

To add Post by Label (Simple Recent Post (No image)) widget follow this step

New Method (Using Short Code)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels
  4. Copy this Code: 

    [Widget_title][noimage][recent][5]



  5. Click Save

OLD Method (Using Javascript)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code: 

    <div id="simplenoimagepost1"></div>
<script type='text/javascript'>
jQuery("#simplenoimagepost1").RecentPostbyTag({
MaxPost:5,
tagName:"Your_TagName",
ShowImage:false
});
</script>
  5. Click Save
  6. Note: If you want add new/next Simple Recent Post (No image) you must change div id and jQuery id must be same with new div id

VerticalSlider Post

To add Post by Label (Vertical Slider) widget follow this step

New Method (Using Short Code)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels
  4. Copy this Code: 

    [Widget_title][verticalslide][recent][5]



  5. Click Save

OLD Method (Using Javascript)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code: 

    <div id="verticalslider1"></div>
<script type='text/javascript'>
jQuery("#verticalslider1").RecentPostbyTag({
MaxPost:5,
ImageSize:"w400",
postType:"s",
sliderType:"v",
tagName:"Your_TagName"
});
</script>
  5. Click Save
  6. Note: If you want add new/next Simple Recent Post (No image) you must change div id and jQuery id must be same with new div id

Hot Post

To add Post by Label (Hot Post) widget follow this step

New Method (Using Short Code)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels
  4. Copy this Code: 

    [Widget_title][hot][recent][3]



  5. Click Save

OLD Method (Using Javascript)

  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code: 

    <div id="hotpost1"></div>
<script type='text/javascript'>
jQuery("#hotpost1").RecentPostbyTag({
MaxPost:3,
postType:"ht",
tagName:"Your_TagName"
});
</script>
  5. Click Save
  6. Note: If you want add new/next Simple Recent Post (No image) you must change div id and jQuery id must be same with new div id

Simple Recent/Random Post

To add Post by Label (Simple Recent Post) widget follow this step
  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose Labels
  4. Copy this Code: 

    [Widget_title][simple][recent][5]



  5. Click Save
Slider, Horizontal Post, Combine Post, Gallery Post and Vertical Post use by one Javascript Script and You can see Default Code to Call this Plugin look like below: Default javascript mean if you just write code like this jQuery("#ID_Place_To_Load_Plugin").RecentPostbyTag(); configuration will look like below: 
jQuery("#ID_Place_To_Load_Plugin").RecentPostbyTag({
blogURL: "",
ShowDesc: false,
ShowDate: true,
ShowComment: true,
Random: false,
AjaxLoad: true,
postType: "v",
sliderType: "c",
tagName: false
});
Property Description
blogURL Yours blog URL or you can leave it blank to load JSON where this script load.
ShowDesc To Show All Description (Just Work on Horizontal, Combine and Vertical PostType). Default is false
ShowDate To Show Date: Default is true
ShowComment To show Comment: Default is true (Just Work on Horizontal, Combine and Vertical PostType).
Random To Make Random Post: Default is false.
AjaxLoad If More Button text click and AjaxLoad true post will load and place after last post. if false will redirect to other page.
postType There are fifth kinds of PostType: "v" (vertical Post), "h" (horizontal Post), "c" (Combine Post), "g" (Gallery Post) and "s" (Slider Post)
sliderType There are two kinds of sliderType: "c" (Caraousel on Slider Post), "f" (Slideshow on Featured Post)
tagName If you want to show Post by the Label. Example: to show post from Sports Label just write like this tagName:"Sports"

Error Page



To change text on Error Page follow this step
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    <div class='error-custom'>

<h2>404 Not Found</h2>
<p class='error-body'>We&#39;re sorry but we could not find the page you are looking for.<br/>
This may happen if you have entered site url incorrectly or this page doesn&#39;t exist anymore.</p>

<p>You can try searching page again or go back to home</p>

<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>

</div>
  4. Change which your's Language

Widgets Configuration

Summary and View Mode

Summary

To change image size and Summary length and other summary configuration follow this step.
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code : 

    var configSummary = {
    thumbnailSize: 'w350', // Define the post thumbnail size
    summaryLength: 250, // Define the summary length 
 defaultNavi:'PageNavi', // Default page Navigation   
    defaultView:'list', // Default view Mode
 postPerPage:6, // Number post every Page
 numshowpage:3  
};
    Property Description
    thumbnailSize Image Format use Picasa/Blogspot image format:
    To make square image (180x180) Image Format use like this "s180-c" or "s180-p". image will be crop to make it square.
    Blogspot Image format also look like this : "s180" (if image landscape width will 180px. If image Portrait height will 180px), "w180" (image width will 180px) or "h180" (image height will 180px)
    summaryLength Define the summary length
    defaultNavi This will setup Page Navigation: you can choose "PageNavi" to show Ajax Page Navigation or "Load More" to show Ajax Load More
    defaultView This will setup view mode: you can choose "grid" to show your's post on grid mode or "list" to show your's post on list mode
    postPerPage Number Post Will show if next Page Number Click. Note must be same with "Show at most" on Blogger Setting
    numshowpage Number Page Number will Show

Recent Comments


Blogger Recent Comments
To add recent comments widget follow this step
New Method Using ShortCode
  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code: 

    <div class="maxxizrcomment"></div>
  5. Click Save
  6. If you want change number recent comment and hide author comment code will look like this

    <div class="maxxizrcomment" data-number="6" data-author="author_name" ></div>
OLD Method Using Javascript
  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code:

    <div id="rcentcomnets"></div>
<script type='text/javascript'>
jQuery("#rcentcomnets").RecentComments();
</script>
  5. Click Save
(Default) Complete Javascript to call Recent Comments like this code: 
jQuery("#ID_Place_To_Load_Plugin").RecentComments({
blogURL:"",
numComments:4,
characters:100,
avatarSize:50,
Showimage:true,
defaultAvatar:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCAuyWki3DVc5tnf3noKYxs4bqwiV8UQQEQx6sSamWKj-4bNxzRuq9fvV3lPKHwQlglUrurA6VzVaUGNiDvyO-COqMe-oyPoBQKLK7LNDfFHcwTf6dAX5Rg2tsk-8BEltIWuoOsEjDNz9K/s70/user-anonymous-icon.png",
maxfeeds:50,
adminBlog:""
});
Property Description
blogURL Yours blog URL or you can leave it blank to load where this script load.
numComments maximum number of recent comment
characters Number of summary characters to show. if set 0, will not show summary
avatarSize Image thumbnail size/avatar size
Showimage Show or hide the avatar. Value : true or false
defaultAvatar Backup image if comment author don't have avatar image
maxfeeds Maximum feed to load
adminBlog Control to show or hide author/admin comment. ex: if you don't want to show your comment, simply just write yours blogger name like this adminBlog:"satank MKR"


Disqus Recent Comments
To add recent comments widget follow this step
  1. on Dashbord Blogger Click Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code: 

    <div id="dsq-recentcoment" class="dsq-widget">
<script type="text/javascript" src="http://yours_DISQUS_Shortname.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=150&hide_mods=0"></script>
</div>
  5. Click Save

JSON Search Result

To edit JSON Search Result Text you can follow this step
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    searchxx({summaryLength:100, scrthumbSize:50});
  4. If you want to change it. You can see complete default Script below:
(Default) Complete Javascript to call JSON Search Result like this code: 
searchxx({
blogURL:"",
findText:"Search results for keyword",
NotfindText:"No result!",
Showthumb:true,
LoadingText:"Searching...",
MaxPost:10,
summaryLength:100, 
scrthumbSize:50
});
Property Description
blogURL Yours blog URL or you can leave it blank to load where this script load.
srcBlank Backup image if post don't have image
findText Sentence if founded post by the keyword
NotfindText Text if no post founded
Showthumb Show or hide the post thumbnail. Value : true or false
LoadingText Text to show went searching
MaxPost Maximum number of article will be search
summaryLength Length of summary characters
scrthumbSize Size of thumbnail image, size in pixel

Emoticon

To edit Emoticon Text you can follow this step
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    emoticonx({
emoRange:".comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
});
  4. If you want to change it. You can see complete default Script below:
Property Description
emoRange Where the emoticon will show/work
putEmoAbove Where the emoticon sample will place
topText Sentence below the emoticon sample
emoMessage Sentence below the emoticon sample and alert box

Related Post

To edit Emoticon Text you can follow this step
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    relatedPostsWidget();
  4. If you want to change it. You can see complete default Script below:
(Default) Complete Javascript to call Related Post like this code: 
relatedPostsWidget({
blogURL:"",
maxPosts:5,
maxTags:5,
maxPostsPerTag:5,
rlt_summary:100,
rlt_thumb:50,
readMoretext:"[...]",
});
Property Description
blogURL Yours blog URL or you can leave it blank to load where this script load.
maxPosts Maximum number of article will be show (if Related Post)
maxTags Maximum Tag/Label will load
maxPostsPerTag Maximum post each tag/label will be show (maximum recent post if article don't have tag/label)
rlt_thumb Size of thumbnail image, size in pixel
readMoretext Read More Text

News Ticker


To edit News Ticker Text you can follow this step
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    <script type='text/javascript'>
//<![CDATA[
NewsTicker({MaxPost:8});
//]]>
</script>

    (Default) Complete Javascript to call News Ticker like this code:
    NewsTicker({
blogURL:"",
MaxPost:8,
tagName: false
});
  4. If you want to change it. You can see complete default Script below:
Property Description
blogURL Yours blog URL or you can leave it blank to load where this script load
MaxPost Maximum number artikel will show on News Ticker
tagName If you want to show News Ticker by the Label. Example: to show post from Sports Label just write like this tagName:"Sports"

Comment Setup

Maxxiz supported 3 comment systems: default threaded comment of Blogger, Facebook comment and Disqus comment. You can choose to use one comment system or combine two of them together by changing settings in Blog widget.
To pick comment systems, access Layout. Click Edit link on Blog Posts gadget.

In the Configure Blog Posts window, you will pick comment systems by input their names in comment text field. Template supported 3 names: blogger, facebook, disqus. You can combine two of them by separate their names by "-". Example, combine blogger with facebook comment system like the demo blog, you can input blogger-facebook. After input, click Save to enjoy.

Facebook Comment need Apps ID and Admin Id. To know how to get App ID and Admin Id you can search on Google or How To Get App ID. And you can follow this step to change my Facebook App ID and Admin ID.
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    <meta content='218168578325095' property='fb:app_id'/>
<meta content='100002549773049' property='fb:admins'/>
    and this code:
    <div id='facebook-comment-appid' style='display:none'>218168578325095</div>
  4. Change 218168578325095 with yours Facebook App ID. and 100002549773049 with yours Admin ID.
  5. Facebook Admin ID use to moderate facebook comments.
If you pick disqus comment system, you must input Disqus short name for it. To do that, follow this step.
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    <div id='disqus-shortname' style='display:none'>maxxizmkrdezign</div>
  4. Change maxxizmkrdezign with yours Disqus shortname.
    5. Where you can get Disqus shortname? Access your Disqus Admin and choose Settings

    Then scroll down to Site Identify, you will see the shortname there.

Other Config

Enable Your Blog to Anyone

Maxxiz use json feed to display your posts on home page. So you blog must be publised to everyone. Private blogs can not use this template.
To enable your blog to anyone, access Settings menu and choose Basic settings. Then click Edit of Blog Readers option.

In Blog Readers radio options, choose Anybody and click Save changes.

Enable Full Feed

Access Settings menu and choose Other settings. Click drop-down list at Allow Blog Feed option, then choose Full. After that, click Save settings button at the top right corner.

Enable Search Preference

To improve your blog SEO, please enable Blogger Search Preferences. Access your Settings menu, choose Search preferences tab and click Edit link on Meta tags section

Next, check Yes option, then type your Blog Description into the text field and click Save changes.

Default Configuration

var Alldefaultconfig = {
    MaxPost:5,
 MoreText: "Load more posts",
    monthName: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
 viewMoreText: "View More About",
 BackupImage: 'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif', 
 summaryLength:150, 
 FirstImageSize:"w350",
 ImageSize:"w100", 
 slideshowSpeed:5,
 NewsTickerText:"Latest News",
 RandomTitle:"Random Posts",
 RecentTitle:"Recent Posts",
 RelatedTitle:"Related Posts",
    RelatedStyle:"carousel",
 CommentMode:"blogger"
};
Property Description
MaxPost Default Maximum Post (Recent Post by Tag,RelatedPost,AutoFeaturePost)
MoreText Define Load More Text if Recent Post
monthName Month Name format (Recent Post by Tag, Recent Comment, AutoFeatured Post, Related Post, News Ticker)
viewMoreText Define More Text (Recent Post by Tag and JSON Search)
BackupImage Backup image if post don't have image
summaryLength Default Summary Length (Recent Post by Tag, Related Post, JSON Search,AutoFeaturePost)
FirstImageSize Default First Image Size in Recent Post by Tag (blogger/blogspot format).Image Format use Picasa/Blogspot image format:
To make square image (200x200) Image Format use like this "s200-c" or "s200-p". image will be crop to make it square.
Blogspot Image format also look like this : "s200" (if image landscape width will 200px. If image Portrait height will 200px), "w200" (image width will 200px) or "h200" (image height will 200px)
ImageSize Default Image Size in Recent Post by Tag (blogger/blogspot format). Image Format use Picasa/Blogspot image format:
To make square image (200x200) Image Format use like this "s200-c" or "s200-p". image will be crop to make it square.
Blogspot Image format also look like this : "s200" (if image landscape width will 200px. If image Portrait height will 200px), "w200" (image width will 200px) or "h200" (image height will 200px)
slideshowSpeed Default Slide speed(Caraousel slide and Vertical slide)
NewsTickerText News Ticker Heading Title
RandomTitle Define Random Post Title (if Random Post widget don't have title)
RecentTitle Define Recent Post Title
RelatedTitle Define Related Post Title
RelatedStyle Related Post Style: "carousel" or "normal"
CommentMode Default Comment mode
MobileRedirect If you want redirect mobile version to desktop version: true or false

Theme Customizer

It's Easy to customize this themes. Just Go to Blogger Dashbord and Click Template then Click Customize and Click Advanced
NB : Blogger Customize will work if Blogger Mobile Template Enabled before upload this Theme
After customize yours template you can disable Blogger Mobile Template but it will make Blogger Customize not work



Property Description
Main Color This Will Change Body color, Main Area Color, Footer Area and Credit Area (footer widget title)
Backgrounds This will change Primary color
Links This will change Hover link Color and visited link color
Page Text This will change Main/Body Font Type, Heading font type, Text Color and Article Title Color
Header This will change Blog title font type, Blog description font type, and Blog description Color
Top Navigation This will Change Top Navigation Background Color, Navigation Hover Color, and Time Background
Middle Navigation This will change Top gradient Color, Bottom Gradient Color, Sub Menu Color, Sub Sub Menu Color Color
Content Area This will change Content Area background color, Widget Title Top gradient Color ,Widget title bottom gradient color, and Widget header text color
Buttons This will change all button color, Top gradient, Middle gradient and bottom gradient
Buttons Hover This will change all hover button color, Top gradient, Middle gradient and bottom gradient
Search Input This will change Search input border color, Search Input text Color and Search Result widget area color
Search Input 2 This will change Search input top gradient color and Search Input bottom gradient color
Widget Area This will change Widget area background color, border color, and Sidebar text color
Footer Area This will change footer text color, border color, image background color and footer hover link color
Page Navigation Button This will change Page navigation text color, border color, top gradient background color and bottom gradient background color
Page Navigation Button 2 This will change page navigation hover button border color, and active button background color
Featured Widget This will change fetured button text color, featured widget button top gradient background color, bottom gradient background color and dots background color
Comment Widget This will change comment date top background color and bottom background color
Input This will change Input top gradient background color, bottom gradient background color, text color and border color
Other This will change content button color, and Inset Shadow Color

Change Background Image

It's Easy to customize this themes. Just Go to Blogger Dashbord and Click Template then Click Customize and Click Background


Click Background Image and choose image what you want or upload from yours computer

RTL Support

Because this theme support upload Background Image and this option make auto RTL Language change not work and to make it support RTL language must be change little CSS code. Follow this Step
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
    and change with:
    <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="right" value="right"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="left" value="left"/>
Thats Code just change default and value for startSide from left change to right and for endSide from right change to left
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. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
© satankmkr 2013
Read More
Labels:

Post Top Ad

Author Details