haitaynamkg

Tổng hợp kiến thức nhân loại
Nguyễn Văn Hải

Apriezt - Premium Responsive Magazine/News Blogger Template - có hướng dẫn

----------------------------------------------------------------------------------------------------


Phân loại : Templates - Plugin
Ứng dụng: Theme cho blog
Hệ thống : Blogger
Bản quyền : Free
Ngôn ngữ : English
Cập nhật : 30-01-2015
Kích thước : 5,9 Mb

Apriezt là 1 theme blogger cao cấp với bố trí đáp ứng hai phong cách đóng hộp hoặc full chiều rộng.

Thiết kế của nó đơn giản, sạch sẽ và hoàn hảo cho tạp chí tin tức hoặc các trang web danh mục đầu tư. Với sự kết hợp màu sắc hấp dẫn, ấn tượng và chuyên nghiệp với nhiều tính năng.

* Tải về giải nén, mở file index.html xem hướng dẫn chi tiết để làm theo từng bước và bạn đã sở hữu 1 mẫu blogger cao cấp mà không phải tốn chi phí rồi đấy.

Hướng dẫn:

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 Apriezt 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 clickSave button.

Installation

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

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, 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
  1. Right Header Widget Area(Ads 728x90)
  2. Auto 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)

Top Menu


Middle 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. Change # with yours URL link


  5. 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>
  6. Change # with yours URL link


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

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 670px x 280px 
  4. Click Save
  5. If You Whan Show 5 image, do this step 5 Time

  6. If You Whan change Slideshow speed or animation type go to Template
  7. Click Edit HTML and Scroll down and find this code:
    manualfeaturedPost();
    and change with (Default Javascript):
    manualfeaturedPost({
    height:"50%",
    loader:"pie",
    pagination:true,
    thumbnails:true
    });
    PropertyDescription
    paginationIf you want to show slideshow pagination
    thumbnailsIf you want to show slideshow Thumbnails
    loaderkind of loader style : "pie", "bar", "none"
    heightSlideshow height : "50%" mean if will resize 50% from slideshow with if you want make it fix to 300px just change with "300px"
  8. Then Click Save Template
If pagination set false Manual Featured Post will look like this:


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


[Title][featuredpost2][random][5]
To add Auto Featured Post widget follow this step

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)

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

    <div id="featpost"></div>
    <script type='text/javascript'>
    jQuery("#featpost").AutofeaturedPost({
    MaxPost:5
    });
    </script>
  5. Click Save
(Default) Complete Javascript to call Auto Featured Post like this code:
jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost({
blogURL: "",
MaxPost: 5,  
ImageSize: 600,
ShowDate: true,
ShowComment: true,
pagination: true,
thumbnails: true,
loader:"pie",
height:"50%",
Random: true,
tagName: false
});

Default javascript mean if you just insert code like this:
jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost();
Featured post result will same with default script.

if you want to change it. ex: Show featured with maximal 8 from label Movies, don't show date and comment, and post not Random (Recent). Yours script will look like this:
jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost({
MaxPost: 8,
ShowDate: false,
ShowComment: false,
Random: false,
tagName: "Movies"
});
PropertyDescription
blogURLYours blog URL or you can leave it blank to load where this script load.
MaxPostMaximum number artikel will show on Featured Post
ImageSizePost Image size (in pixel)
ShowDateIf you want to show post date (true or false)
ShowCommentIf you want to show Comment number (true or false)
paginationIf you want to show slideshow pagination
thumbnailsIf you want to show slideshow Thumbnails
loaderkind of loader style : "pie", "bar", "none"
heightSlideshow height : "50%" mean if will resize 50% from slideshow with if you want make it fix to 300px just change with "300px"
Randomdefault true. It's will show article ramdomly. If want to show Recent Post just change to false
tagNameIf you want to show Featured Post by the Label. Example: to show featured post from Sports Label just write like this tagName:"Sports"
If pagination set false Auto Featured or Shortcode widget Style "featuredpost2" will look like this:

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][slider1][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="carouselpost1"></div>
    <script type='text/javascript'>
    jQuery("#carouselpost1").RecentPostbyTag({
    MaxPost:9,
    ImageSize:"s180-p",
    postType:"s",
    tagName:"Your_TagName"
    });
    </script>
  5. Click Save
  6. Note: If you want add new/next Carousel Slider Post you must change div id and jQuery id must be same with new div id


Slideshow
To add Post by Label (Slideshow 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][slider2][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="postslideshow1"></div>
    <script type='text/javascript'>
    jQuery("#postslideshow1").RecentPostbyTag({
    MaxPost:5,
    ImageSize:"s600",
    postType:"s",
    sliderType:"f",
    tagName:"Your_TagName"
    });
    </script>
  5. Click Save
  6. Note: If you want add new/next Slideshow Slider Post you must change div id and jQuery id must be same with new div id

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="verticalpost1"></div>
    <script type='text/javascript'>
    jQuery("#verticalpost1").RecentPostbyTag({
    MaxPost:6,
    tagName:"Your_TagName",
    postType: "v"
    });
    </script>
    if you want animated Vertical Post javascript code like this:
    <div id="verticalpost2"></div>
    <script type='text/javascript'>
    jQuery("#verticalpost2").RecentPostbyTag({
    MaxPost:6,
    tagName:"Your_TagName",
    postType: "v",
    animated:true
    });
    </script>
  5. Click Save
  6. Note: If you want add new/next Vertical Post you must change div id and jQuery id must be same with new div id

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="horizontalpost1"></div>
    <script type='text/javascript'>
    jQuery("#horizontalpost1").RecentPostbyTag({
    MaxPost:6,
    tagName:"Web Design",
    postType: "h"
    });
    </script>
    if you want animated Horizontal Post javascript code like this:
    <div id="horizontalpost2"></div>
    <script type='text/javascript'>
    jQuery("#horizontalpost2").RecentPostbyTag({
    MaxPost:7,
    tagName:"Your_TagName",
    postType: "h",
    animated:true
    });
    </script>
  5. Click Save
  6. Note: If you want add new/next Horizontal Post you must change div id and jQuery id must be same with new div id

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({
    MaxPost:5,
    tagName:"Your_TagName",
    postType: "c"
    });
    </script>
  5. Click Save
  6. Note: If you want add new/next Combine Post you must change div id and jQuery id must be same with new div id

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="gallery1post1"></div>
    <script type='text/javascript'>
    jQuery("#gallery1post1").RecentPostbyTag({
    MaxPost:13,
    tagName:"Your_TagName",
    postType: "g1"
    });
    </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

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="verticalslider1"></div>
    <script type='text/javascript'>
    jQuery("#verticalslider1").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

(Default) Complete Javascript to call Post by Label (Slider (Carousel & Slideshow), Horizontal, Combine, Gallery and Vertical Post) like this code:
jQuery("#ID_Place_To_Load_Plugin").RecentPostbyTag({
blogURL: "",
ShowDesc: false,
ShowDate: true,
ShowComment: true,
Random: false,
AjaxLoad: true,
animation:"slide",
postType: "v", 
sliderType: "c",  
tagName: false
});
PropertyDescription
blogURLYours blog URL or you can leave it blank to load where this script load.
ShowDescIf you want to show or hide post description (work in vertical and horizontal) (true or false)
ShowDateIf you want to show or hide date true to show or false to hide
ShowCommentIf you want to show or hide comment number true to show or false to hide
RandomIf you want to generate random post true to random or false to recent. if you set true AjaxLoad will not work (same like AjaxLoad set false).
AjaxLoadIf you'r want More Button will load more from next page and add after last post. If you set false page will redirect if More Button clicked
postTypeThere are Three kind of PostType: "v" (vertical Post), "h" (horizontal Post) , "c" (Combine Post), "g1" (Gallery Post 1), "g2" (Gallery Post 2), "ht" (Hot Post) and "s" (Slider Post)
animatedmake it have animation effect (for Vertical and Horizontal Post)
sliderTypemake it show carousel slide show or Slide show : "c" (Carousel Slider), "f" (full Slideshow Slider) and "v" (full Vertical Slider)
tagNameIf you want to show Post by the Label. Example: to show post from Sports Label just write like this tagName:"Sports"

Random Post

To add Random 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 class="aprieztrandom"></div>
  5. Click Save
  6. Note: If you want change number post display and load from specific labels/tags code will look like this

    <div class="aprieztrandom" data-number="5" data-tag=""></div>

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
NB: summary and Load more image use Official Blogspot Thumbnail. It mean the image must upload to blogspot for make it show on home page.

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     
        defaultView:'grid', // Default view Mode
        postPerPage:6, // Number post every Page
        numshowpage:3  
    };
    PropertyDescription
    thumbnailSizeImage 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)
    summaryLengthDefine the summary length
    defaultViewThis 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
    postPerPageNumber Post Will show if next Page Number Click. Note must be same with "Show at most" on Blogger Setting
    numshowpageNumber Page Number will Show

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="apriezrcomment"></div>
  5. Click Save
  6. If you want change number recent comment and hide author comment code will look like this

    <div class="apriezrcomment" 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/AVvXsEjtF24I9iqNHXuKG2VgVIxxbhgBABHaad4UyiYtmuuQnGHwS0qGHGVXNxQsnxY1K0a4Mho-KrxlFei0qH7mQjEDQFcMsrghpEyJDwJ5PG8AmGEa4H5ndcwcve-HbR10pfoGkUaruTRx0jtH/s70/user-anonymous-icon.png",
maxfeeds:40,
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
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:"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
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...",
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 when searching
summaryLengthLength of summary characters
scrthumbSizeSize of thumbnail image, size in pixel
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({
    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
topTextSentence below the emoticon sample
emoMessageSentence below the emoticon sample and alert box

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 :

    NewsTicker();

    (Default) Complete Javascript to call JSON Search Result like this code:
    NewsTicker({
    blogURL: "",
    MaxPost: 8,
    tagName: false
    });
  4. If you want to change it. You can see complete default Script below:
PropertyDescription
blogURLYours blog URL or you can leave it blank to load where this script load
MaxPostMaximum number artikel will show on News Ticker
tagNameIf you want to show News Ticker by the Label. Example: to show post from Sports Label just write like this tagName:"Sports"
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,
ShowComment:true,
ShowDate:true,
DateFloat:false,
ShowDesc:true,
readMoretext:"Read more »",
rlt_thumb:70   
});
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)
ShowCommentShow or Hide Comment Number. option true or false
ShowDateShow or hide Date. option true or false
DateFloatIf you want make the date like Recent Post by Tag Date model.
ShowDescShow or hide post description. option true or false
rlt_thumbSize of thumbnail image, size in pixel
readMoretextRead More Text
Apriezt supported 3 comment systems: default threaded comment of BloggerFacebook 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: bloggerfacebookdisqus. 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'>aprieztmkrdezign</div>
  4. Change aprieztmkrdezign 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.


Enable Your Blog to Anyone

Apriezt 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.


To make Tabs Content Like that image. short code look like this:
<div class="aprieztabs">
  <div data-tab="Tab-1">Your Content Here</div>
  <div data-tab="Tab-2">Your Content Here</div>
  <div data-tab="Tab-3">Your Content Here</div>
  <div data-tab="Tab-4">Your Content Here</div>
</div>

If you want some label name not show in Label view follow this step:
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    <script class='jshilang' type='text/javascript'>
    labelnyacx();
    </script>
    and this code:
  4. Change like this:
    <script class='jshilang' type='text/javascript'>
    labelnyacx({
    labelNotShow:"Your Label1, Your Label2, Your Label3"
    });
    </script>
  5. Your Label1, Your Label2, Your Label3 will not show on label view.

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:5000,
    NewsTickerText:"Latest News",
    RandomTitle:"Random Posts",
    RecentTitle:"Recent Posts",
    RelatedTitle:"Related Posts",
    RelatedStyle:"carousel",
    CommentMode:"blogger"
};
PropertyDescription
MaxPostDefault Maximum Post (Recent Post by Tag,RelatedPost,AutoFeaturePost)
MoreTextDefine Load More Text if Recent Post
monthNameMonth Name format (Recent Post by Tag, Recent Comment, AutoFeatured Post, Related Post, News Ticker)
viewMoreTextDefine More Text (Recent Post by Tag and JSON Search)
BackupImageBackup image if post don't have image
summaryLengthDefault Summary Length (Recent Post by Tag, Related Post, JSON Search,AutoFeaturePost)
FirstImageSizeDefault 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)
ImageSizeDefault 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)
slideshowSpeedDefault Slideshow Speed in milisecond (Featured Post)
NewsTickerTextNews Ticker Heading Title
RandomTitleDefine Random Post Title (if Random Post widget don't have title)
RecentTitleDefine Recent Post Title
RelatedTitleDefine Related Post Title
RelatedStyleRelated Post Style: "carousel" or "normal"
CommentModeDefault Comment mode

Change Background Image

NB : Blogger Customize will work if Blogger Mobile Template Enabled before upload this Theme
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

Advanced Editor

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


PropertyDescription
Main ColorBody background color, Header Area background color, Outer Area background color and Footer Area background color
BackgroundsPrimary Background Color
LinksThis will change link hover color and visited link color
Page TextThis will change Body Font type and color, Heading font type and color
HeaderThis will change Blog Title Font type and color, Blog description font type and color
Top NavigationThis will change Top navigation background color, Top navigation text color, Top navigation Sub Menu color, and top navigation sub sub menu
Middle Navigation 1This will change middle navigation text color, Sub Menu color and Sub sub menu color
Middle Navigation 2This will change top gradrient color, middle gradrient color, bottom gradrient color, and search input text color
Content AreaThis will change Content area background color and title, date, social icon hover background
ButtonsThis will change button top gradrient color, middle gradrient color, bottom gradrient color and border color
Buttons HoverThis will change button top gradrient color, middle gradrient color, bottom gradrient color and border color
Widget AreaThis will change widget heading title color, widget background color, widget border color, and sidebar text color
Footer AreaThis will change footer text color, footer widget heading color, footer link hover color
Footer Area 2This will change footer image background color, border color, and credit background color

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.
Chào mừng và rất vui các bạn đến với blog chia sẻ mình!

Tham quan du ngoạn từ Nam chí Bắc:

An Giang || Bà Rịa - Vũng Tàu || Bắc Giang || Bắc Kạn || Bạc Liêu || Bắc Ninh || Bến Tre || Bình Dương || Bình Định || Bình Phước || Bình Thuận || Cà Mau || Cao Bằng || Cần Thơ || Đà Nẵng || Đắk Lắk || Đắk Nông || Điện Biên || Đồng Nai || Đồng Tháp || Hà Giang || Hà Nam || Hà Tĩnh || Hải Dương || Hậu Giang || Hòa Bình || Hưng Yên || Khánh Hòa || Kiên Giang || Kon Tum || Lai Châu || Lâm Đồng || Lạng Sơn || Lào Cai || Long An || Về Miền Tây || Nam Định || Nghệ An || Ninh Bình || Ninh Thuận || Phú Thọ || Quảng Bình || Quảng Nam || Quảng Ngãi || Quảng Ninh || Quảng Trị || Sóc Trăng || Sơn La || Về Tây Nguyên || Tây Ninh || Thái Bình || Thái Nguyên || Thanh Hóa || Thừa Thiên Huế || Thành phố Hồ Chí Minh || Thủ Đô Hà Nội || Tiền Giang || Trà Vinh || Tuyên Quang || Vĩnh Long || Vĩnh Phúc || Yên Bái

|| || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || ||

Bộ sưu tập ảnh hot:

|| || || || || || || || || || || || || || || || || ||
Like bài viết nếu bạn thấy hay và có ích :
Những gì mình biết, hãy chia sẻ cho mọi người cùng biết nhé! Xin mời bạn bình chọn!

Bạn đã xem chưa

0 nhận xét | Viết lời bình

Copyright © 2014 Haitaynamkg Knowledge Humanity