How To Install Adamz Responsive Premium Blogger Template

Social

Download This Theme

Getting started

Installation

Unzip the file you downloaded
On Blogger Dashboard Click Template.
Click Backup/Restore button (Top Right)
Click Choose File button. Find where the “Adamz-theme.xml” file location.
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

On Blogger Dashboard Click Settings.
Click Posts and Comments
In Comment Location Choose Embedded
Then Click Save settings.

Blog Feed

This to make recent comment, Search Result, Featured Post, Related Post, and News Ticker work fine

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

Layout Explain

1.Right Header Widget Area(Ads 468x60)

2.Manual Slideshow Area (Add Image Widget)

3.Auto Featured Post Area

4.Top Sidebar Area

5.Middle Sidebar Area

a. Popular Post

b. Recent Comment

c. Archive Widget

6.Bottom Sidebar Area

7.Footer Widget Area

Setting up the menu

To Edit Menu in this theme you can follow this step:

On Blogger Dashboard Click Template
Click Edit HTML
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:

On Blogger Dashboard Click Template
Click Edit HTML
Scroll down and Find this Code

<ul>
  <li><a class='fbx' href='#' title='Facebook'>facebook</a></li>
  <li><a class='twix' href='#' title='Twitter'>twitter</a></li>
  <li><a class='goex' href='#' title='Google+'>Google+</a></li>
  <li><a class='linx' href='#' title='Linkedin'>Linkedin</a></li>
  <li><a class='pinx' href='#' title='Pinterest'>Pinterest</a></li>
  <li><a class='drix' href='#' title='Dribble'>Dribble</a></li>
  <li><a class='vmex' href='#' title='Vimeo'>Vimeo</a></li>
  <li><a class='rssx' href='#' title='RSS'>RSS</a></li>
</ul>

* Change # with yours Social URL link

Creating Content Featured Post and Error Page

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

To add Auto Featured Post widget follow this step

on Dashboard Blogger Click Layout
On Auto Featured Post Area Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="featpost"></div>
<script type='text/javascript'>
featuredPostSlide({
idcontaint:"#featpost",
MaxPost:5
});
</script>

Click Save

(Default) Complete Javascript to call Featured Post like this code:

featuredPostSlide({
blogURL: "",
MaxPost: 4,
idcontaint: "",   
ImageSize: 500,   
Summarylength: 150,     
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.
idcontaint	ID of div where the Featured Post will be display must add this #, Example: if want to show in <div id="featpost"></div> write like this "#featpost"
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"

Manual Slide Show (Using Image Widget)

Manual Slide Show

To Create Manual Slide Show follow this step

on Dashboard Blogger Click Layout
On Manual Slideshow Widget Area Click Add a Gadget
Choose Image Widget.

NB : Recommended Image Size 750px x 350px

Click Save
If You Whan Show 5 image, do this step 5 Time

Error Page

To change text on Error Page follow this step

On Blogger Dashboard Click Template
Click Edit HTML

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>

Change which your's Language

Widgets Configuration

Summary and Load More

Summary

To change image size and Summary length follow this step.

On Blogger Dashboard Click Template
Click Edit HTML

Scroll down and Find this Code :

var configSummary = {
    thumbnailSize: 200, // 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	Define the post thumbnail size
summaryLength	Define the summary length
BackupImage	URL Backup image if post don't have image.

Load More Post (Home Page)

To edit Load More Text, change image size and Summary length follow this step.

On Blogger Dashboard Click Template
Click Edit HTML
Scroll down and Find this Code :
```
loadMorePost ({
thumbnailSize:200,
summaryLength:300
});
```
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:200,
summaryLength:300,
MoreText:"Load more posts",
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.

PageNavi

To change Load More Post ajax With Page Navigation follow this step.

On Blogger Dashboard Click Template
Click Edit HTML

Scroll down and Find this Code :

loadMorePost ({
thumbnailSize:200,
summaryLength:300
});

Replace with

PageNavi ({
pageCount:6,
displayPageNum:3
});

Property	Description
pageCount	The number of posts per page
displayPageNum	Number of page buttons that appear

Recent Comments

To add recent comments widget follow this step

on Dashboard Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="rcentcomnets"></div>
<script type='text/javascript'>
RecentComments();
</script>

Click Save

(Default) Complete Javascript to call Recent Comments like this code:

RecentComments({
blogURL:"",
numComments:4,
characters:100,
id_containrc:"#rcentcomnets",
avatarSize:50,
loadingClass:"loadingxx",
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
id_containrc	ID of div where the recent comment will be display must add this #, Example: if want to show in <div id="rcentcomnets"></div> write like this "#rcentcomnets"
avatarSize	Image thumbnail size/avatar size
loadingClass	Class went the recent comment loading.
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

On Blogger Dashboard Click Template
Click Edit HTML

Scroll down and Find this Code :

searchxx({summaryLength:100, scrthumbSize:50});

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.

On Blogger Dashboard Click Template
Click Edit HTML

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."
});

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

News Ticker

To edit News Ticker Text you can follow this step

On Blogger Dashboard Click Template
Click Edit HTML

Scroll down and Find this Code :

NewsTicker();

(Default) Complete Javascript to call JSON Search Result like this code:

NewsTicker({
blogURL:"",
MaxPost:4,
Speed:0.1,
titleText:"Latest News"       
});

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
Speed	Speed each artikel efect
titleText	News Ticker Title Text

Theme Customize

It's Easy to customize this themes.

Just Go to Blogger Dashboard
On Blogger Dashboard Click Template
Click Customize
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
Header	This to Configuration Blog Title and Description Font Type and Color
Main Color	This to Configuration Main color like Content Area Color, Menu Color, Button Color
Post and Widget Color	This to Configuration Widget Color like Widget Background Color, Border Color, Sidebar Heading Background Color, and Sidebar Text Heading Color
PageNavi and Readmore Button	This to Configuration PageNavi Button and Readmore Button like Background color, Border Color and Shadow Color
Navigation	This to Configuration Text Menu Color and Credit Border Top Color
Page Background Color	This to Configuration main body background
Text Color	This to Configuration main text color
Link Color	This to Configuration link color
Link Hover Color	This to Configuration link color when mousein on the link
Sidebar Text Color	This to Configuration sidebar text color
Visited Link Color	This to Configuration color link when it did visited
Text Font	This to Configuration main font type
Post Area Heading Font	This to Configuration Main area Heading font type
Sidebar and Footer Heading Font	This to Configuration Sidebar and Footer Heading font type

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

How To Install Adamz Responsive Premium Blogger Template

Social

Manual Slide Show

Summary

Load More Post (Home Page)

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

Share to:

Next

Newer Post

Previous

Older Post

Post a Comment Blogger Facebook