Social

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 “Adamz-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.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:
  1. On Blogger Dashboard Click Template
  2. Click Edit HTML
  3. 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>
  <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

  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'>
    featuredPostSlide({
    idcontaint:"#featpost",
    MaxPost:5
    });
    </script>
  5. 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
  1. on Dashboard Blogger Click   Layout
  2. On Manual Slideshow Widget Area Click Add a Gadget
  3. Choose Image Widget.


NB : Recommended Image Size 750px x 350px

  1. Click Save
  2. If You Whan Show 5 image, do this step 5 Time
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 and Load More

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: 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   
    };
    PropertyDescription
    thumbnailSizeDefine the post thumbnail size
    summaryLengthDefine the summary length
    BackupImageURL 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.


  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :
    loadMorePost ({
    thumbnailSize:200,
    summaryLength:300
    });
    PropertyDescription
    thumbnailSizeDefine the post thumbnail size
    summaryLengthDefine the summary length
    MoreTextLoad 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"
});
PropertyDescription
thumbnailSizeDefine the post thumbnail size
summaryLengthDefine the summary length
MoreTextLoad more text to display: default: "Load more posts"
BackupImageBackup 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.


  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. 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
  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'>
    RecentComments();
    </script>
  5. 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:"http://4.bp.blogspot.com/-AEWksK942OE/UFiyLzXJhiI/AAAAAAAAFKE/jBegaGPClxI/s70/user-anonymous-icon.png",
MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
maxfeeds:50,
adminBlog:""
});
PropertyDescription
blogURLYours blog URL or you can leave it blank to load where this script load.
numCommentsmaximum number of recent comment
charactersNumber of summary characters to show. if set 0, will not show summary
id_containrcID 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"
avatarSizeImage thumbnail size/avatar size
loadingClassClass went the recent comment loading.
ShowimageShow or hide the avatar. Value : true or false
defaultAvatarBackup image if comment author don't have avatar image
MonthNamesFormat month name
maxfeedsMaximum feed to load
adminBlogControl 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
});
PropertyDescription
blogURLYours blog URL or you can leave it blank to load where this script load.
srcBlankBackup image if post don't have image
findTextSentence if founded post by the keyword
NotfindTextText if no post founded
ShowthumbShow or hide the post thumbnail. Value : true or false
LoadingTextText to show went searching
summaryLengthLength of summary characters
scrthumbSizeSize 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:
PropertyDescription
emoRangeWhere the emoticon will show/work
putEmoAboveWhere the emoticon sample will place
topTextSentence below the emoticon sample
emoMessageSentence below the emoticon sample and alert box
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 :
    NewsTicker();

    (Default) Complete Javascript to call JSON Search Result like this code:
    NewsTicker({
    blogURL:"",
    MaxPost:4,
    Speed:0.1,
    titleText:"Latest News"       
    });
  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
Speed
Speed each artikel efect
titleText
News Ticker Title Text
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
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.
Review

Post a Comment Blogger

Don't Comment irrelevant It will be deleted!

 
Top