Flat News Documentation Table of Contents Installation Upload Blog DataOPTIONAL Add Social Links Upload Logo Work with Main Menu Work with Sub Menu Edit Break ...
Monday, March 17, 2014 at 6:38 PM

Table of Contents


Installation
Upload Blog DataOPTIONAL
Add Social Links
Upload Logo
Work with Main Menu
Work with Sub Menu
Edit Break
Work with home design
Use shortcodes
Advance Editor
Enable Mobile Template
Enable Your Blog to Anyone
Enable Full Feed
Enable Search Preference
Date Time Settings
Comment Picker
Warning


Installation 


Open your purchase folder, you will see a folder with name ***-template-xml. Open it, and find the newest version with name***-template-version-X-X.xml. 




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, select all old code and paste the new code that you copied from the release file into code field. Then, click Save template.


Upload Blog Data (optional) - 


This step is only for testing blog (if you want test this template before apply to your main blog). Don't apply this step to your main blog. 


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


 


Now, target to your blog data in your purchase folder / ***-demo-blog-data / blog-mm-dd-yyyy.xml 




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

Add Social Links - top


After install the template, access your blog Layout, and click Edit link on Social widget: 




In Configure Link List, input your social link in New Site URL and your description in New Site Name, then click Add Link.Repeat again until you input all your links, then click Save. 



Upload Logo- 


Access your blog Layout > click Edit link on Header widget 

In Configure Header window, input you Blog Title and Blog Description. If you want to upload your image logo, make sure checked Instead of title and description, then click Choose File and locate your logo file. And click Save button to finish.




Work with Main Menu - 


Access your blog Layout, you will see a section has grey background, that was labeled with big text "Main menu section". Under the label is the link "Add a Gadget", you will use this link to add Link List widgets (or Label widgets) into main menu, no limit number of widgets. 


As default, I had already added 2 widgets into main menu for you: 1 Link List widget (with name: Custom Links) and 1 Labelwidget (with name: Label Links). So in this guide, we will modify these widgest first. 


Click Edit link on Custom Links widget. 




In Configure Link List window, input your item link in New Site URL field, and item name in New Site Name field, then clickAdd Link. Example: New Site URL is "http://yourblogurl.com" and New Site Name is "Home". Do the same steps to add another links. Until added all links, click Save to apply. 




Back to your Layout, click Edit link on Label Links widget. 


In Configure Labels window, check Selected Labels and click edit. At Display section, check List. At Select labels to show section, click none link to deselect all labels, then check into the label names that you want to show on Main menu. 



Work with Sub Menu - top


Access your blog Layout, you will see a section has light yellow background, that was labeled with big text "Sub menu section". Under the label is the link "Add a Gadget", you will use this link to add Link List widgets (or Label widgets) intoSub menu, no limit number of widgets. 


As default, I had already added 2 widgets into sub menu for you: 1 Label widget (with title: Life Style) and 1 Link List widget (with title: Health). So in this guide, we will modify these widgets first. 




The related rule between main menu and sub menu is: 


The title of widget in sub menu must be similar with the name of a link (or label) in main menu. 


Example: I created a link with name "Home" in Main menu section. If I want it has a sub menu, I must add (or modify) a widget with title "Home" in Sub menu section. 


Now, we had 2 widgets in Sub menu section. Just click edit link on them, input data and modify their titles. 

Edit Break 


Click Edit link on BREAK widget (black background) and choose the labels you want to show on break section. 




You can also input another title for this widget. 



Work with home design 


Flat News supported you build your own home design. In you blog Layout admin, you will see a section has light yellow background that was labeled with name "Flexible Home Layout". You can add Label widgets to this section by click Add a Gadget link under the label. 




The structure of widget title will decide how the widget will display on home page. Structure of widget title must like below: 


Display_Name[Design_Type](Number_Item) 


Display_Name: the name you want to show on home page. 


Design_Type: is the design of widget will show on home page. We support 8 types: hot, three, dark, two, oneleft,oneright, slider and combine. All must be lowercase. 


Number_Item: this optional, default is 5 items will be displayed if you not use this parameter. 





As default, I already added 8 Label widgets with 8 diffrent types into Flexible Home Layout section. You must click Edit link of each, input title follow the above structure and choose ONLY ONE label that you want to show for that widget. 




Input title and choose a label, then click Save. Do the same for others. You can also drag & drop / add / remove widgets to build your own home design. 



Use shortcodes - 


Flat News support three shortcodes as below: 


Show recent posts: <div class="recent-posts"></div>



Show recent comments <div class="recent-comments"></div>



Show random posts <div class="random-posts"></div>



To use shorcodes, you can input them in content of any HTML widgets. As default, I had already added 3 HTML widgets for you in Layout.

Click Edit link of each. In Configure HTML/Javascript window, input your appropriate shortcode into Content field then click Save. 


To specific number of posts show in shortcodes, you can add "number" attribute, example: <div class="random-posts" number="3"></div> 


Advance Editor - top It's very simple to change advance settings of this template. Access to Template tab, click Customize button
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


Enable Mobile Template - top


After you apply mobile version for this template, Advance Editor will be disabled. This is official bug of Blogger. So, 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 Flat News 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 "No. Show desktop template on mobile devices." option, then click Savebutton.

Enable Your Blog to Anyone Flat News use json feed to display your posts on home page and shortcodes. 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.




Date Time Settings 


Access Layout. Click Edit link on Blog Posts gadget. 




In the Configure Blog Posts window, you will see a field with value “at” (under “Post By” setting). Please change date of this field and your post date will be nice looking.



Comment Picker 


Flatnew supported 3 comment systems: default threaded comment of Blogger, Facebook comment and Disqus comment. You can choose to use only one comment system or combine two of them together. 


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 Post page link text field. We support 3 names: default, facebook, disqus. You can combine two of them by separate their names by "-". Example, combine default with facebook comment system like the demo blog, you can input default-facebook. After input, click Saveto enjoy. 




If you pick disqus comment system, you must input disqus short name for it. To do that, edit DISQUS SHORTNAME widget in you blog Layout. 


After DISQUS SHORTNAME widget appeared, input your Disqus shortname to Content field and click Save. 


Where you can get Disqus shortname. Access your Disqus Admin and choose Settings 




Then scroll down to Site Indetify, you will see the shortname there. 



Warning - top


Blogger has some official bugs, so I just let you know to avoid them. One of them are when you click Save arrangement inPages menu, the page list will auto change to Don't show status. That's why please never click Save arrangement button. 




In case you clicked, you can choose Top tabs from Show pages as list, and click Save arrangement again. 












Tags:

Popular Posts