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 Syahira-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='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 target='_blank' class='fbx' href='#' title='Facebook'>facebook</a></li>
  <li><a target='_blank' class='twix' href='#' title='Twitter'>twitter</a></li>
  <li><a target='_blank' class='goex' href='#' title='Google+'>Google+</a></li>
  <li><a target='_blank' class='linx' href='#' title='Linkedin'>Linkedin</a></li>
  <li><a target='_blank' class='pinx' href='#' title='Pinterest'>Pinterest</a></li>
  <li><a target='_blank' class='drix' href='#' title='Dribble'>Dribble</a></li>
  <li><a target='_blank' class='vmex' href='#' title='Vimeo'>Vimeo</a></li>
  <li><a target='_blank' class='rssx' href='#' title='RSS'>RSS</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: 4,
ImageSize: 650,   
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.
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 this tag Name:"Sports"




Post by Label (Slider, 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 tag Name is name of the Post Label that will show. on this sample is "Web Design" mean will display article 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 article 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:"Sports"
    });
    </script>
  5. Click Save
  6. Note: In tag Name is name of the Post Label that will show. on this sample is "Motion Design" mean will display article 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,     
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 post ramdom: Default is false
postType
There are Three kind of PostType: "v" (vertical Post), "h" (horizontal Post) and "s" (Slider Post)
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
Scroll down and Find this Code 

var configSummary = {
    thumbnailSize: "s200-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   
};

PropertyDescription
thumbnailSizeImage 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)
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:"s200-p",
    summaryLength:300,
    MoreText:"Load more posts"
    });
    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
View Mode (Home Page)

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:"grid",
    cookielist:"list",
    cookiegrid:"grid"
    });
(Default) Complete Javascript to setup view mode like this code:
viewMode({
viewmodedefault:"list",
cookielist:"list",
cookiegrid:"grid"
});

PropertyDescription
viewmodedefaultThis 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
cookielistList mode Cookies name. This will store on browser to make if user click list mode button.
cookiegridGrid mode Cookies name. This will store on browser to make if user click Grid mode button.
(Default) Complete Javascript to setup Load More Post like this code:

loadMorePost({
thumbnailSize:"s200-p",
summaryLength:300,
MoreText:"Load more posts",
viewmodedefault:"grid",
cookielist:"list",
cookiegrid:"grid",
BackupImage:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif"
});
PropertyDescription
thumbnailSizeImage 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)
summaryLengthDefine the summary length
MoreTextLoad more text to display: default: "Load more posts"
viewmodedefaultThis 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)
cookielistList mode Cookies name. This will store on browser to make if user click list mode button. (make it same name with view mode javascript)
cookiegridGrid mode Cookies name. This will store on browser to make if user click Grid mode button. (make it same name with view mode javascript)
BackupImageBackup image if post don't have image.

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 :

viewMode();
loadMorePost({
  thumbnailSize:"s200-p",
  summaryLength:300  
});
and this code:
viewMode({
  viewmodedefault:'list',
  cookielist:'list1',
  cookiegrid:'grid1'
});
loadMorePost({
  viewmodedefault:'list',
  cookielist:'list1',
  cookiegrid:'grid1',
  thumbnailSize:"s200-p",
  summaryLength:300
});
Change All With This Code:
viewMode();
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


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



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
avatarSizeImage thumbnail size/avatar size
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
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:200,
ShowDate:true,
relatedTitle:"Related Posts",
recentTitle:"Recent Posts",
readMoretext:"[...]",
rlpBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif"
});
PropertyDescription
blogURLYours blog URL or you can leave it blank to load where this script load.
maxPostsMaximum number of article will be show (if Related Post)
maxTagsMaximum Tag/Label will load
maxPostsPerTagMaximum post each tag/label will be show (maximum recent post if article don't have tag/label)
rlt_summaryLength of summary characters
rlt_thumbSize of thumbnail image, size in pixel
relatedTitleTitle if article have related post
recentTitleTitle if article don't have related post (will be load recent post)
readMoretextRead More Text
rlpBlankBackup image if post don't have image

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
Main Color
This Will Change Header background color, Content Area Background Color, Footer Background Color and Header and Footer Border Color
Header Area
This will change Blog Title Font Type, Blog Description font type, Blog Title Color and Blog Description Color
Menu Color
This will change Menu text color, Top boreder Color, Sub Menu Background Color and Sub Sub Menu background color
Post And Sidebar Area
This will Change Background Color, Border Color, Header Text Color and Button, Date, Featured Post Detail Background Color
Footer Area
This will change Text Color, Border Color, and Heading Text Color
Button and Featured
This will change Button and Featured Detail Post (Featured Post Description) text color
Text Color
This will change main text color
Link Color
This will change link color
Link Hover Color
This will change Hover link color (when mouse hover/mouse on a link)
Visited Link Color
This will change visited link color (if that link already visited)
Sidebar Text Color
This will change Sidebar Text Color
Text Font
This will change main area font type
Heading Font
This will change all heading font type




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

Post a Comment Blogger

Don't Comment irrelevant It will be deleted!

 
Top