How To Install Maxxiz – Responsive Premium Blogger Template

Social

Tweet

Download This Theme

Getting started

Installation

1. Unzip the file you downloaded
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.

NB: Before Uploading This Template Mobile Blogger Template Must Enable to make Blogger Customize Work.

Default Setting

After installing the theme, this it the minimum 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 Settings.
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, Featured Post, Related Post, and News Ticker work fine

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

Layout Explain

1. Right Header Widget Area(Ads 468x60)
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 Dashboard Click Template
2. Click Edit HTML
3. 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>

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

* Change # with yours URL link

Setting Social Icon

To Edit Social Icon in this theme you can follow this step:

1. On Blogger Dashboard 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>

* Change # with yours Social URL link

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

Manual Slide Show (Using Image Widget) OR Auto Featured Post (Slide Show From JSON Feed)

Manual Slide Show

To Create Manual Slide Show follow this step

1. on Dashboard 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

1. NB : Recommended Image Size 517px x 250px
2. Click Save
3. 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 (Slide Show From JSON Feed)

To add Auto Featured Post widget follow this step

1. on Dashboard Blogger Click   Layout
2. On Auto Featured Post Area 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 Featured Post like this code:

jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost({
blogURL: "",
MaxPost: 5,
ImageSize: 650,			
Summarylength: 100,					
RandompostActive: true,			
pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif",
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
pBlank	Backup image if post don't have image store on blogspot or picasa web
tagName	If you want to show Featured Post by the Label. Example: to show featured post from Sports Label just write like thistagName:"Sports"

Post by Label (Slider, Horizontal and Vertical Post)

Slider Post

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

1. on Dashboard 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:5,
   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.

Vertical Post

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

1. on Dashboard 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.

Horizontal Post

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

1. on Dashboard 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.

Slider, Horizontal Post and Vertical Post use by one Javascript Script and You can see Default Code to Call this Plugin look like below

jQuery("#ID_Place_To_Load_Plugin").RecentPostbyTag({
blogURL: "",
MaxPost: 4,
FirstImageSize:"s220-p",
ImageSize: "s80-p",			
Summarylength: 100,
ShowDesc: false,
ShowDate: true,
ShowComment: true,
Random: false,
Slidespeed: 4,
MoreText: "View All About",
MoreNumPost: 6,					
postType: "v",		
pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif",
MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tagName: false
});

Property	Description
blogURL	Yours blog URL or you can leave it blank to load JSON where this script load.
MaxPost	Maximum number of article will be show
Summarylength	Number of summary characters to show.
ImageSize	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)
FirstImageSize	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)
ShowDesc	To Show All Description (Just Work on Horizontal and Vertical PostType). Default is false
ShowDate	To Show Date: Default is true
ShowComment	To show Comment: Default is true (Just Work on Horizontal and Vertical PostType).
Random	To Make Random Post: Default is false.
Slidespeed	Animation Speed if PostType is Slider Post .
postType	There are Three kind of PostType: "v" (vertical Post), "h" (horizontal Post) and "s" (Slider Post)
MoreText	More Button Text. Will show if postType is Vertical or Horizontal and TagName is setup
MoreNumPost	Number post will show if MoreText button Click. If yours theme use PageNavigation this Number must be same with postperpagenumber
pBlank	Backup image if post don't have image
MonthNames	Format months name
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 Dashboard 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, Page Navigation, Load More and View Mode

Summary

To change image size and Summary length follow this step.

1. On Blogger Dashboard Click  Template
2. Click Edit HTML
3. Scroll down and Find this Code 
   

   var configSummary = {
       thumbnailSize: "s140-p", // Define the post thumbnail size
       summaryLength: 300, // Define the summary length  
   	BackupImage: 'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif' // Backup image if post don't have image   
   };

   Property	Description
   thumbnailSize	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)
   summaryLength	Define the summary length
   BackupImage	URL Backup image if post don't have image

(Default) Complete Javascript to setup view mode like this code:

viewMode({
viewmodedefault:"list",
cookielist:"list",
cookiegrid:"grid"
});

Property	Description
viewmodedefault	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
cookielist	List mode Cookies name. This will store on browser to make if user click list mode button.
cookiegrid	Grid mode Cookies name. This will store on browser to make if user click Grid mode button.

Page Navigation

To edit Page Navigation, change Number Post Per Page and Number Show Page Number follow this step.

1. On Blogger Dashboard Click  Template
2. Click Edit HTML
3. Scroll down and Find this Code :
   
   

   pageNavi({
   postperpage:6,
   numshowpage:3,
   LatestText:"Latest Post"
   });

   Property	Description
   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
   LatestText	Latest Text. This will work if Page Number not 1

(Default) Complete Javascript to setup Page Navigation like this code

pageNavi({
postperpage:6,
numshowpage:3,
previous:"«",
next:"»",
LatestText:"Latest Post"
});

Property	Description
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
LatestText	Latest text/word. This will work if Page Number not 1
previous	previous text/word.
next	next text/word.

View Mode

To edit View Mode from Grid mode to List Mode follow this step.

1. On Blogger Dashboard Click  Template
2. Click Edit HTML
3. Scroll down and Find this Code :
   

   viewMode();

   (Default) Complete Javascript to setup view mode like this code

   viewMode({
   viewmodedefault:"list"
   });

   Property	Description
   viewmodedefault	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

Load More Post

If You want to change Page Navigation with Load More Text follow this step.

1. On Blogger Dashboard Click  Template
2. Click Edit HTML
3. Scroll down and Find this Code
   
   

   pageNavi({
   postperpage:6,
   numshowpage:3,
   LatestText:"Latest Post"
   });

   and change with
   
   

   loadMorePost ({
   thumbnailSize:"s140-p",
   summaryLength:300,
   MoreText:"Load more posts"
   });

   Property	Description
   thumbnailSize	Define the post thumbnail size
   summaryLength	Define the summary length
   MoreText	Load more text to display: default: "Load more posts"

   image size and summary length on summary script and Load more script must have same value

(Default) Complete Javascript to setup Load More Post like this code

loadMorePost({
thumbnailSize:"s140-p",
summaryLength:300,
MoreText:"Load more posts",
viewmodedefault:"list",
cookielist:"list",
cookiegrid:"grid",
BackupImage:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif"
});

Property	Description
thumbnailSize	Define the post thumbnail size
summaryLength	Define the summary length
MoreText	Load more text to display: default: "Load more posts"
BackupImage	Backup image if post don't have image store on blogspot or picasa web.

Property	Description
thumbnailSize	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)
summaryLength	Define the summary length
MoreText	Load more text to display: default: "Load more posts"
viewmodedefault	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 (make it same setting with view mode javascript)
cookielist	List mode Cookies name. This will store on browser to make if user click list mode button. (make it same name with view mode javascript)
cookiegrid	Grid mode Cookies name. This will store on browser to make if user click Grid mode button. (make it same name with view mode javascript)
BackupImage	Backup image if post don't have image.

Recent Comments

To add recent comments widget follow this step

1. on Dashboard 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/AVvXsEiF3YjlzU4wD57nKF_TTsH_cEysVAndmAgRM0pM8NkMUlPi35yguAngbZiBi5BQZsfDmGA5gIatLmTVLq4hO87OkH8eRdGRM9uCOxJelW0mXUu5rnedWcr4pkkvkAphxDlRVaUeV9ZzsBIo/s70/user-anonymous-icon.png",
MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
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
MonthNames	Format month name
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:"Your Blog Name"

JSON Search Result

To edit JSON Search Result Text you can follow this step

1. On Blogger Dashboard 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:"",
srcBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
findText:"Search results for keyword",
NotfindText:"No result!",
Showthumb:true,
LoadingText:"Searching...",
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
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 Dashboard 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 related post you can follow this step

1. On Blogger Dashboard 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,
relatedTitle:"Related Posts",
recentTitle:"Recent Posts",
readMoretext:"[...]",
rlpBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif"
});

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_summary	Length of summary characters
rlt_thumb	Size of thumbnail image, size in pixel
relatedTitle	Title if article have related post
recentTitle	Title if article don't have related post (will be load recent post)
readMoretext	Read More Text
rlpBlank	Backup image if post don't have image

News Ticker

To edit News Ticker Text you can follow this step

1. On Blogger Dashboard 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 JSON Search Result like this code
   
   
   

   NewsTicker({
   blogURL:"",
   MaxPost:8,
   titleText:"Latest News",
   MonthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
   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
titleText	News Ticker Title Text
MonthNames	Month Name Format
tagName	If you want to show News Ticker by the Label. Example: to show post from Sports Label just write like this tagName:"Sports"

Theme Customize

It's Easy to customize this themes. 

1. Just Go to Blogger Dashboard 
2. On Blogger Dashboard Click  Template
3. Click Customize 
4. 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
Body Color	This Will Change Body Background Color
Main Color	This Will Change Primary color (Color 1), Secondary Color (Color II), Third Color (Color III) and Fourth Color (Color IV)
Page Text	This will change Main/Body Font Type, Heading font type, and Text Color
Links	This will change Link color, Hover link Color and visited link color
Header	This will change Blog title font type, Blog description font type, Blog Title Color, and Blog description Color
Navigation 1	This will Change Top Gradient Background Color, Bottom Gradient Background Color, Inset shadow color and Outset shadow Color
Navigation 2	This will change Sub Menu Color, Sub Sub Menu Color Color, and Menu Text Color
Search Input	This will change Search input border color and Search Input text Color
Content Area	This will change Content Area background color
Posting Area	This will change Blog Post Title Color, Blog Post Hover Title Color, Top gradient Read More Button and Bottom gradient Read More Button
Sidebar Area	This will change Text color, Sidebar Widget Heading Background Color, and Sidebar Widget Heading Text color
Footer Area	This will change footer text color, footer heading 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, hover top gradient background color, hover bottom gradient background and active button background color
Image and Comment	This will change image/comment/readmore border color, background color, footer image border color and footer image background color.
Featured Widget	This will change featured widget background color, shadow color, fetured button text color
Featured Widget Button	This will change 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, bottom background color, and date text color
Input	This will change Input top gradient background color, bottom gradient background color, text color and border color

If you still feel any problem do not hesitate to contact us.