Smart News Documentation by “Jacky Baby” v1.0

Smart News

Created: 11/18/2013
By: Jacky Baby
Email: ngohungduy@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. Installation
  2. Upload Sample contentoptional
  3. Layout Explain
  4. Upload Favico + Logo
  5. Drop down Menu
  6. Home Design
  7. Sidebar Widget
  8. Social
  9. Advance Editor
  10. Enable Mobile Template
  11. Enable Full Feed
  12. Enable Search Preference
  13. SEO Meta tags
  14. Page Navigation
  15. Author Box

  1. Installation - top

    2. Download the zipped theme pack to your local computer from themeforest and extract the ZIP file contents to a folder on your local computer.

    Open your purchase folder, you will see a folder with name SmartNews-template-xml. Open it, and find the Smartnews.xml file.

    Open the XML file with a text editor (Notepad ++ or something like that). Then select all text and copy (Ctrl+A, Ctrl+C in Window).

    Return to your blog dashboard, access your Template menu, click Edit HTML

    In Editor HTML window, Delete all old code and paste the new code that you copied from the release file into code field. Then, click Save template.

  2. Upload Sample content (optional) - top

    3. Only for testing blog if you want test this template before apply to your main blog.Please create a new blog to test it.

    Access your blog ,Navigation to Settings / Other. In Blog tools, click Import Blog.

    Click Choose File button. Find where the “demo-data.xml” file location.

    input captcha, check Automatically publish all imported posts and click Import Blog.

  3. Layout Explain - top

    4. After install the template, access your blog Layout you will see the Admin Layout like Image following:

    1. Favicon
    2. Header logo
    3. Header Ads
    4. Scrolling Box Widget
    5. Featured Post Width Slider Widget
    6. Horizontal Widget
    7. Vertical Widget (Left Col & right Col)
    8. Portfolio Widget
    9. Gallery Widget
    10. Combine Widget
    11. Blog post
    12. Sidebar (All Widget sidebar)
    13. Footer Widget (4 widget)
    14. Button Menu (Pageslist)

    Admin Layout

    Screenshot on Live site

    1 - Upload Favico

    Favicon (Favorites Icon) is the small picture (usually 16px x 16px in size) you see beside some some site's name in your browser's address bar. Having your own favicon with a nice graphical reminder of your site beside is a good way to get visitors attention. To add a custom favicon for their blogs going to the Layout section and by clicking on the Edit link on the "Favicon" element..

    A popup window will open where you can search for an image in your hard drive to replace the default favicon image. Click on "Browse" button and search for your favicon (it should have the .ico extension) - then click on "Save".

    2 - Upload Logo

    To add a Logo for their blogs going to the Layout section and by clicking on the Edit link on the "Header" element..

    A new window will appear and select the radio button of From your computer, and then Browse…then find where your logo is stored in your computer. For placement, select Instead of the title and description. End your settings with SAVE.


  4. Top Menu (Multi-Drop down Menu) - top

    5. Smart News Template supports multi-drop down menu that enables you to add more categories in your site. It helps in giving users the flexibility to get into the depth of your category.

    How To Add Links Top Navigation Menu.

    Go to "Template" --> "Edit HTML" of your blog.In your template search for 

    <div id='menu-dropdown'>
    . Now Scroll down to where you see below codes :

    <div id='menu-dropdown'>
<ul id='topmobilemenu'>
   <li><a expr:href='data:blog.homepageUrl'><span><i class='icon-home'/></span></a></li>
   <li class='has-sub'><a href='#'><span>News</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Business</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Fashion</span></a></li>
   <li class='last'><a href='#'><span>Lifestyle</span></a></li>
   <li class='last'><a href='#'><span>Tech</span></a></li>
   <li class='last'><a href='#'><span>Photo</span></a></li>
  <li class='last'><a href='/404'><span>404 Error</span></a></li>
</ul>
</div>

    Replace "#" with your Link address/url.

  5. Home Design (Recent Posts By Label) - top

    6. Smart News supports 7 Design Type for Home Label Widget.

    To show posts under a category in the Home,in you blog Layout admin,click on 'edit' link in Label widget,add the title you want to show into widget title ,and add the name of category into widget content

    Example: To show posts under a category in the Scrolling Box.

    click on 'edit' link in 'Scrolling Box' widget.

    A popup window will open where you can add the title you want to show into widget title ,and add the name of category into widget content.

    After that ,click Save

    In these pictures above ,I want to show posts in 'Fashion' category into Scrolling Box ,so I add category name 'Fashion' into widget content and add the title 'Scrolling Box' into widget title

    Do the same with other widgets . Click on 'edit' link in a widget ,add a category name into widget content and add the title you want to show in widget title . Recent posts in this category will be shown in where the widget you choose is

    Access your blog Layout and look right you will see all Sidebar widget in Sidebar Section.

    1 - How To Configure Categories Post widget:

    Click on 'edit' link in CATEGORIES POST widget,A popup window will open where you can add the title you want to show into widget title ,and add the name of category into widget content.

    In these pictures above ,I want to show posts in 'Technology' category into Categories Post Widget ,so I add category name 'Technology' into widget content and add the title 'Categories Post' into widget title

    2- How To Configure Recent Comments widget:

    In Sidebar section,Click on 'edit' link in Recent Comments widget.In Configure HTML/Javascript window, input number of Comments want to show into Content field then click Save.

    In these pictures above ,I want to show 5 Comments in Recent Comments Widget ,so I add  '5' into widget content.

  6. Social - top

    7. 1- How To Configure Social in Top Menu:

    How To Add Links Social .

    Go to "Template" --> "Edit HTML" of your blog.In your template search for 

    social-icons float-right
    .

    Now Scroll down to where you see below codes :

    <ul class='social-icons float-right'>
	<li class='facebook'><a href='http://facebook.com' target='_blank' title='Facebook'>   <i class='icon-facebook'/>   </a></li>				 
    <li class='twitter'><a href='https://twitter.com' target='_blank' title='Twitter'>     <i class='icon-twitter'/>     </a></li>
    <li class='gplus'><a href='https://plus.google.com' target='_blank' title='Google plus'>      <i class='icon-google-plus'/>       </a></li>
    <li class='youtube'><a href='http://www.youtube.com' target='_blank' title='Youtube'>     <i class='icon-youtube-play'/>    </a></li>
    <li class='dribbble'><a href='http://www.dribbble.com' target='_blank' title='Dribbble'>     <i class='icon-dribbble'/>    </a></li>
    <li class='rss'><a href='http://feeds.feedburner.com/' target='_blank' title='Rss Feed'>    <i class='icon-rss'/>    </a></li>
</ul>

    Replace with your Social Link address/url.

    2-How To Configure Social icons Widget in Sidebar:

    In Sidebar section,Click on 'edit' link in Social Icons widget.In Configure HTML/Javascript window, add the below code into Content field then click Save. 

    <div class='social-networks'>
<div class='social-icons-holder'>
<ul>
<li><a class='google' href='https://plus.google.com/'>google</a></li>
<li><a class='facebook' href='http://www.facebook.com/'>facebook</a></li>
<li><a class='twitter' href='http://twitter.com/'>twitter</a></li>
<li><a class='youtube' href='#'>youtube</a></li>
<li><a class='rss' href='http://feeds.feedburner.com/'>rss</a></li>
</ul>
</div>
  <div class='clear'/>
</div></div>

    Replace with your Social Link address/url.

  7. Advance Editor - top

    8. It's very simple to change advance settings of this template. Access to Layout tab, click Template Designer Link

    In Blogger Template Designer window, click Advanced tab, then click an element name that you want to customize and choose all settings you like. When finish, click Apply to Blog

  8. Enable Mobile Template - top

    9. Please make sure, you used Advance Editor to change all settings you want before do this step.

    As default, Blogger will use its own template for you blog on mobile. So if you want to use Smart News template on mobile devices, please enable it first.

    Access your Template menu and click on Setting button of Mobile template.
    In Choose mobile template window, check "No. Show desktop template on mobile devices." option, then click Save button.

  9. Enable Full Feed - top

    10. Smart News use json feed to display your posts on home page so you blog must be Full Rss.

    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.

    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.

  10. SEO Meta tags - top

    11. Go to "Template" --> "Edit HTML" of your blog. Now Scroll down to where you see below codes :. 

    <meta content='type your description here.' name='description'/>
<meta content='type your keyword here' name='keywords'/>

    Replace type your description here,type your keyword here as below.
    type your description here:Write your blog description
    type your keyword here:Write the keywords of your blog separated by comma..

    for Page Navigation work properly, You need Change the number of posts displayed on your blog is 7.

    To change the number of posts displayed on your blog, go to your Layout tab and click "Edit" on the blog post widget

    A window will then pop up with options to change your settings. The first option should be "Number of posts on main page" -- you adjust that number is 7 and click Save changes.

  11. Author Box - top

    12. Go to "Template" --> "Edit HTML" of your blog. Using Ctrl+F, search for 

    <div class='author-description'>
    .Now Scroll down to where you see below codes : : 

    <div class='author-description'>
Hi there! I am Hung Duy and I am a true enthusiast in the areas of SEO and web design.
In my personal life I spend time on photography, mountain climbing, snorkeling and dirt bike riding.
</div>

    Replace with your short Author bio.Click "Save template".

Go To Table of Contents