MAGONE - Blogger Indonesia
MagOne 4.2.0 Gold Version - Premium Magazine Blogger Template Documentation
A) Getting Started UPDATED
Step 1 - Enable Mobile Template
You must
Enable responsive feature
before
installing template for your site. This step will help your site be allowed to use "Template Designer" tool of Blogger.
Step 2 - Get Template Code
Extract your download package from ThemeForest, then open file "magone-template-code.xml"
with any text editor and copy all code from this file.
Important Step 3 - Change Template Options HAVE NEW OPTIONS, PLEASE CHECK
Paste the code from step (2) to
SpotSettings
tool to change template options as you want.
Step 4 - Translate Template
Paste the result code from step (3) to
SpotLingo
tool to translate to your language if you need to.
Final Step - Install Template
Use the finally code from above steps and follow Way 1 in
Installing Blogger Template Code Tutorial
Important - Update Template
To keep all your changes on widget layout each time you update template, please using
Widget Merger
tool to merge your current template code with the new version code before install for your website.
Optional - Template Demo Data
In case you want to import demo data for you testing website, you can get demo data from
SpotDummy
tool.
B) Article Widgets
1. Introduction
Article widgets are simple Label widgets of Blogger, but have special parameters in their title.
Example: if you add a Label widget to your site and its title contains "$type=slider", the widget will become a slider.
Want to show recent posts?:
If you selected all labels or don't select any label, an article widget will show recent posts at default.
2. List of Article Widgets
At beginning, the template already had all above article widgets in "HOME ONLY CONTENT" section.
You can delete them if you don't want to use, or move them to any where you want.
You can also add other ones or edit one of them to select the labels that you want it to show.
For more information about widget parameters, please check next section.
C) Widget Parameters UPDATED
1. Show / hide widgets from certain pages
You can add parameters: $show or $hide for any widgets.
Those parameters are usually being used to show / hide a widget from specific pages.
Example: if you add $show=home into title of a widget, that widget will only show on home page.
Or if use $hide=post then the widget will show in all pages except posts.
You can also show / hide widget for a specific URL.
Example: $show=/search/label/FASHION will make the widget showing only in FASHION label page.
This feature is usually used to make flexible layout for separate areas in your site,
example: showing specific images or decoration for certain label.
Please check below list for name of pages of Blogger:
- home: for your home page
- label: for all your label pages
- search: for all your search pages
- archive: for all your date - time archive pages
- index: for home, label, search and archive pages
- page: for all static pages. You can also input static or static_page, all are OK.
- post: for all post / article pages. You can also input article or item or single, they are the same.
- 404: for 404 page. You can also input error or error_page, all are similar.
- mobile: for mobile pages. You can also input phone, all are similar.
You can also combine two or more show / hide conditions, separate by "-" (minus), except you set show / hide for certain URL.
Example: $show=label-post
2. Common Parameters for All Article Widgets UPDATED
Check below list for parameters that you can use for any Article Widget:
- $type: Type of article widget. Check available values in below list:
- ticker
- grid
- list
- slider
- sticky
- complex
- carousel
- three
- two
- one
- blogging
- left
- right
-
$count: maximum number of posts will show.
Input $c or $cnt are also OK.
Example: $count=4 or $c=4
** NOTE: Shorten Parameters Name: Because max Blogger widget title length is 99 characters. So if you use a lot parameters in title and make it longer than 99 characters, Blogger will not allow you saving. To solve this, you can use shorter name of parameter.
Example: with parameter $count, instead of using $count, you can use $c.
This is similar with other parameters, just user their shorten names if they provided. -
$viewall: show/hide view all button.
Input $va is also OK.
Example: input $viewall=none or $va=0 will disable "View All" link.
** NOTE: Boolean Values: false, hide, none, no, 0 values are the same. true, show, enable, yes, 1 values are similar.
Example: so input $viewall=none or $viewall=0 or $viewall=no or $viewall=false or $viewall=hide are the sames.
This rule was applied for any other boolean parameters. -
$title
UPDATED: show/hide item title.
Input $t is also OK.
Example: $title=none.
If you want to show title out of thumbnail, input
$title=out-of-thumbnail or
$title=out-of-thumb or just simple
$t=oot
** NOTE: The value out-of-thumbnail only available for layouts which are displaying title inside item thumbnail image. - $author: show/hide author name. Input $au or $a are also OK.
- $comment: show/hide comment count. Input $com or $cm are also OK.
- $date: show/hide date time. Input $d is also OK.
- $meta: show/hide all meta information (author, comment, date). Input $mt or $m are also OK.
- $snippet: show/hide snippet (excerpt). If value is a number, the snippet will be shorten for certain number of characters (can not lower than 10). Input $s or $sn or $snip are also OK.
- $readmore: show/hide readmore link. Input $rdm or $rm are also OK.
- $cate: show/hide label links. Input $cat or $ct or $category or $categories or $label or $labels or $lab or $la or $l are also OK. You can also input an integer value for this parameter to force widget not showing number of labels more than that.
- $height: number pixels for height of images in widget. If value is 0 or auto, images in widget will show as its natural height, not be cropped. Input $h is also OK.
- $pages: show/hide pagination buttons. Input $page or $pag or $pgn or $p or $pg or $pagination or $navigation or $nav or $nv are also OK. Default is hide.
- $icon: show/hide post format icon (standard, audio, video, image). Input $i or $ic or $ico are also OK. Default value is hide
- $color: change main color of article widget. Value for this parameter can be name (red, green, ...), hex (#FF9900) or rgba (rgba(255, 100, 0, 0.5). Input $cl or $col or $clr or $co are also OK.
- $tbg: change background color of article widget thumbnails. Input $tb or $thumb_bg are also OK. Default value is "none". Special, you can input value "rainbow" for this parameter to display random background color for thumbnails.
- $source: change the source that article widget will get content from. Example: if you want to load recent comment, you will input $source=recent-comments. Or if you want to load random posts, you will input $source=random or $source=random-posts Input $src or $sr are also OK. Defaut value of parameter is "recent-posts".
- $space: enable / disable spacing between items in an article widget. Input $spc or $spa or spacing are also OK.
- $host: domain name of other Blogger sites which will be loaded posts from. If you not input this parameter, the widget will load posts from your site. Input $hst or $ho are also OK.
- $topic: this parameter only affect if you inputeed $host parameter. Select a topic (label) name of third party site that you want to load posts from. The name is case-sensitive and escaped all special and unicode characters. Input $tp or $to or $top or $tpc are also OK.
3. Specific Parameters for Slider and Carousel Widgets
Have some parameters only affect for slider and carousel widgets. Please check below list:
- $columns: maximum number of columns will show. Input $cols or $clm or $cls are also OK.
- $buttons: show/hide Next - Previous buttons. Input $btn or $b are also OK.
- $dots: show/hide navigation dots. Input $do is also OK.
- $speed: number milliseconds of auto-play speed. Input $sp is also OK.
4. Misc Parameters for Follow By Email Widgets
- $desc: description content for follow by email widgets. Input $description or $ds or $dsc are also OK.
D) Menu, Quotes, Social, Tabs and Shortcodes
1. Menu, Quotes, Social Icons
Template is using
Underscore Menu,
Simple Social Icons, and
Quote Image
systems of Blogger. Just follow the documentation of these systems for more information.
2. Social Counter
Add a Link List widget,
and input $type=social_counter in widget title to transform it to a social counter widget.
When adding or editing social counter widget, please remember input into New Site Name field folow below format:
fontawesome-brand-icon-code|number-of-counter|counter-type-text|counter-button-text|
Example: if you want to show Facebook with 20493
Likes and action button is Like, you will input facebook|20493|Likes|Like.
Check below image for more information
After inputting, press Add link button and press Save.
You can find FontAwesome Brand Codes Here.
3. Tab Widgets
Consecutive widgets with parameters $type=tab in their title will become
a group of tabs. You can combine tab with other types. Example, you want show a list article widget in a tab group, you will input
$type=list-tab in its title.
4. Shortcodes
Shortcodes are the abbreviate codes that you insert into your post content to show certain things.
Template supports below shortcodes:
- [lock]...your content ...[/lock]: lock a content, and readers need to share your post to unlock this content.
- [contact]: show contact form.
- [next]: split a long post into pages (usually be called "Page Break").
- [post_ads]: insert ads into your post content at any where you want. The content of ads will be fetched from Inner Post Ads widget. So you must access Layout and input your code into Inner Post Ads widget before using this shortcode .
- [full_width]: the post / page will display as full width (no sidebar).
- [sidebar_left]: the post / page will display with sidebar on the left hand.
- [sidebar_right]: the post / page will display with sidebar on the right hand.
E) Customize Widget Title Style
You can customize widget title style by using some below tips (all things must be inputed before every parameter):
1. Add Icons
Just input /fontawesome-code/ in your widget title to display icon.
Here is list of FontAwesome Codes
For example, if you input your title: /fa-clock-o/ WEEK TRENDING, it will display as below:
2. Wrap Title with Box
This is only affecting with Article Widgets. You can wrap title with a color box with [ and ].
Example, if you input [STAFF PICK], it will become:
3. Underline Title
This is only affecting with Article Widgets. You can display a bottom line of title if you insert _ (underscore)
at the end of title (but before every parameter). Example: STAFF PICK_ will become
4. Highlight Head
This is only affecting with Article Widgets. You can display a samll box at beginning of title if you insert |
at starting of title. Example, |STAFF PICK will become
5. Combine
You can also combine all above together to make a new style for title.
Example: |STAFF PICK_ or [STAFF PICK]_
F) Posts / Articles Smart Content
1. Decorating Main Title
Every Heading tag (h2) with strike through inside will be used to replace the main title of post.
2. Add Subtitle
Every Subheading tag (h3) with strike through inside will be used as the subtitle of post.
3. Set Feature Image
Every image with title contains [feature] text will become feature image, or the first image of post will become feature image.
4. Set Drop-cap
If you select "Largest" font size and Strikethrough for a letter, it will become drop-cap.
You can also use editor tool to select text color, font family, bold, ... for drop cap letter.
5. Add Buttons
Any links start with [ and end with ] in link text will become a button.
Example: a link with text [Preview ##eye##] will become a button with an icon at the end
("eye" is icon code, full list of icon codes here).
You can also use editor tool to change text color, background, font family, font size, bold, italic, underline, strikethrough... for button.
6. Add Message Box
Insert a bullet list, and input [message] for first level. And then press ENTER key, and then TAB key to start new level of list.
At this level, input your title.
Now, press ENTER and then TAB again to start new level under of this level, then input your box content.
You can also set background, text color, font size, font weight and all other text decoration for both title and content.
7. Add Horizontal Tab Box
Insert a bullet list, and input [tab] for first level.
To input first tab, press ENTER and then press TAB key to start new level of list.
At this level, input your title for first tab.
Now, press ENTER and then TAB again to start new level under of this level, then input your first tab content.
To input next tabs, press ENTER, and then press SHIFT+TAB to reward back to one level (the title level),
and then input a new tab. Continue to input other tabs.
8. Add Vertical Tab Box
Insert a bullet list, and input [vtab] for first level.
To input first tab, press ENTER and then press TAB key to start new level of list.
At this level, input your title for first tab.
Now, press ENTER and then TAB again to start new level under of this level, then input your first tab content.
To input next tabs, press ENTER, and then press SHIFT+TAB to reward back to one level (the title level),
and then input a new tab. Continue to input other tabs.
9. Add Accordion (Toggle) Box
Insert a bullet list, and input [accordion] for first level.
To input first accordion, press ENTER and then press TAB key to start new level of list.
At this level, input your title for first accordion.
Now, press ENTER and then TAB again to start new level under of this level, then input your first accordion content.
To input next accordion, press ENTER, and then press SHIFT+TAB to reward back to one level (the title level),
and then input a new accordion. Continue to input other accordions.
10. Split Texts as Columns
Insert a bullet list, and input [col] for first level.
To input first column, press ENTER and then press TAB key to start new level of list.
At this level, input your content for first column. Press ENTER to continue input content for other columns.
11. Add Code (Pre) Box
Every block quote with [ at the beginning and ] at the end will become a code box
G) Header Layout
1. Default Header Layout
If you don't change any Header Settings, the template will display default header layout.
In this layout, logo image height will always be fixed at 30px.
If you add an HTML widget in Top Page section, the default layout will be shown as below:
2. Auto Logo Height Header Layout
If you opted in Auto Height Logo setting,
template will support unlimited logo size and your header layout will be displayed as below:
If you add an HTML widget in Top Page section, the default layout will be shown as below:
3. Auto Logo Height and Top Bar Header Layout
If you opted in both Auto Height Logo and Move Social and Search Icons to Top of Page settings,
template will support unlimited logo size and your header layout will be displayed as below:
If you add an HTML widget in Top Page section, the default layout will be shown as below:
H) Demo Layout Structures
1. New York Times
1.1 - Change style:
Access Template / Customize /- In Advance / Site / Font, change the site font to Paytone One
- In Background change Main color theme to #000000 (black)
1.2 - Change Header Layout:
Use SpotSettings and change header layout to Auto Logo Height and Top Bar Header Layout (read Header Layout - 3 in this documentation)1.3 - Widget Layout:
Add widgets to sections following the below guide:-
Add to section Header Wide
- HTML widget to display your ads code
-
Add to section Home Content Only
- Label widget with title: $type=one$count=1
- Label widget with title: Open News$type=blogging$cate=2$count=7$va=0
- Label widget with title: More News$type=list$au=0$va=0$count=12
- Label widget with title: $type=three$author=hide$comment=hide$rm=hide$count=3
-
Add to section Footer Wide
- Label widget with title: Times Features$type=slider$snippet=hide$cate=0$h=500$va=0$rm=0
- Label widget with title: Inside NYTimes$type=carousel$sn=0$cols=4$va=0$count=12
2. Flatnews
2.1 - Change style:
Access Template / Customize /- In Advance / Site / Font, change the site font to Oswald
- In Background change Main color theme to #d12F2F (black)
2.2 - Change header layout:
Use SpotSettings and change header layout to Auto Logo Height and Top Bar Header Layout (read Header Layout - 3 in this documentation)2.3 - Widget layout:
-
Add to section Header Wide
- Label widget with title: $type=ticker$count=12$cols=4$cate=0
-
Add to section Home Content Only
- Label widget with title: [HOT NEWS]$type=sticky$rm=0$va=0$count=4$va=0
- Label widget with title: [SCIENCE]$type=blogging$cate=2$count=3$va=0
- Label widget with title: [BUSINESS]$type=three$c=3$author=hide$comment=hide$rm=hide$va=0
- Label widget with title: [HEALTH]$type=complex$count=4$va=0
- Label widget with title: [TECHNOLOGY]$type=left$va=0$count=3
- Label widget with title: [FASHION]$type=right$va=0$count=3
- Label widget with title: [SPORT]$type=slider$snippet=hide$cate=0
- Label widget with title: [EDUCATION]$type=complex$count=4$va=0
3. Tech Geekers
-
Add to section Header Wide
- Label widget with title: $type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home
-
Add to section Home Content Only
- Label widget with title: STICKY POSTS$type=sticky$count=4$rm=0
- Label widget with title: LEFT$type=left$va=0$count=3
- Label widget with title: RIGHT$type=right$va=0$count=3
- Label widget with title: SCROLLING BOX$type=carousel$cols=3$cate=0$date=1
- Label widget with title: COMPLEX BOX$type=complex$count=4
- Label widget with title: THREE GRID$type=three$tbg=rainbow$count=9$space=0$m=0$sn=0$rm=0$ico=1$cate=0
- Label widget with title: RECENT BLOGGING$type=blogging$count=7$page=true$va=0
4. Elegant Pack
-
Add to section Header Wide
- Label widget with title: $type=ticker$cols=4
- Label widget with title: $type=slider$meta=0$snip=0$rm=0
-
Add to section Home Content Only
- Label widget with title: TWO COLUMNS$type=two$count=8
- HTML widget to display your ads
- Label widget with title: THE LATEST$type=one$count=6$page=true$va=0$height=auto
5. Stylish Zine
-
Add to section Header Wide
- Label widget with title: $type=grid$count=3$m=0$sn=0$rm=0$show=home
- Label widget with title: FASHION AND ART$type=three$m=0$rm=0$h=400$c=3$show=home
- HTML widget to display your ads
- Label widget with title: $type=slider$count=3$rm=0$show=home
-
Add to section Home Content Only
- Label widget with title: FASHION REVIEW$type=grid$rm=0$sn=0$count=2$va=0
- HTML widget to display your ads
- Label widget with title: LEFT$type=left$va=0$count=3
- Label widget with title: RIGHT$type=right$va=0$count=3
- Label widget with title: THE LATEST$type=two$count=10$page=true$va=0
6. Minimal Times
-
Add to section Header Wide
- Label widget with title: $type=carousel$cols=3$show=home
- HTML widget to display your ads
-
Add to section Home Content Only
- Label widget with title: $type=two$count=2$va=0
- HTML widget to display your ads
- Label widget with title: LEFT$type=left$va=0$count=3
- Label widget with title: RIGHT$type=right$va=0$count=3
- Label widget with title: LATEST ARTICLES$type=blogging$count=10$page=true$va=0
7. Affiliate Marketers
-
Add to section Header Wide
- HTML widget to display your ads
-
Add to section Home Content Only
- Label widget with title: $type=slider$count=4$m=0$sn=0$rm=0
- HTML widget to display your ads
- Label widget with title: LATEST MMO REVIEWS$type=blogging$count=13$page=true$va=0
8. Diary Notes
-
Add to section Home Content Only
- Label widget with title: $type=slider$rm=0$sn=0$count=5$va=0
- Label widget with title: NEW ARTICLES$type=one$count=6$page=1
-
Add to section Footer Wide
- Label widget with title: $type=carousel$sn=0$cols=4$va=0$count=12
9. Absolute Writers
-
Add to section Header Wide
- Label widget with title: $type=grid$count=3$meta=0$sn=0$rm=0
- Label widget with title: RECOMMEND NOTES$type=three$count=3
- Label widget with title: STAFF PICK$type=three$count=3
-
Add to section Home Content Only
- HTML widget to display your ads
- Label widget with title: LATEST ARTICLES$type=blogging$page=1$count=14
10. Financial List
-
Add to section Home Content Only
- Label widget with title: $type=complex$count=8
- Label widget with title: FINANCIAL TRENDING$type=list$au=0
- Label widget with title: STOCK PREDICTION$type=list$au=0
- Label widget with title: EXPERT ADVISES $type=list
- Label widget with title: ALL REPORTS$type=list$au=0$count=20$page=1
11. Random Grid
-
Using SpotSettings to remove sidebar for home page and
adding to section Header Wide
- Label widget with title: $type=carousel$count=9$cols=3$cate=0$show=home
- Label widget with title: TRENDING$type=grid$count=19$cate=0$sn=0$rm=0$meta=0$icon=1$show=home
12. Working Block
-
Using SpotSettings to remove sidebar for home page and
adding to section Header Wide
- 3 label widgets with title: $type=three$count=3$h=300$show=home
- Label widget with title: $type=carousel$count=12$cols=4
13. Showcase Palette
-
Using SpotSettings to remove sidebar for home page and
adding to section Header Wide
- 3 label widgets with title: $type=slider$count=6$s=0$rm=0
- Label widget with title: $type=three$count=9$h=250$space=0$icon=1$m=0$sn=0$rm=0
14. Fluid Stack
-
Using SpotSettings to remove sidebar for home page and
adding to section Header Wide
- 3 label widgets with title: $type=grid$count=4$tbg=rainbow$sn=0$rm=0$m=0
- Label widget with title: OTHER WORKS$type=two$count=17$sn=0$rm=0$h=0$m=0$tbg=rainbow$space=0
I) Misc features NEW
1. Random Post Link NEW
Any link contains #random-post text in URL will be understood at Random Post nagivation link.
If you click any link like that, the template will find and go to a random post of your site.
J) Other Basic Knowledges
You can read below tutorials for more basic knowledges about Blogger:
Other useful Blogger resources:
Published Daftar Blog