Blogger Theme Documentation & Full Installation Guide

Find all about this theme, customization offered & tips to truly enhance your business or personal web presence.

Last updated: 14th April 2016

Update: If however you could not find Store Configuration & Theme Configuration helper widget pre-installed with theme at your dashboard, it is most likely hidden away due to Blogger layout styles conflicts. To display these widget:-

• Go to Template HTML
• Scroll to bottom & you will reach below:-

<b:section class='plug-ins sr-only hidden' id='plug-ins' name='Settings &amp; Config (Activate Plug-ins Widget Below)' showaddelement='no'>

• Remove class by name "hidden" and Save Template.
• Now at dashboard layout the widget helpers will display for you to custom set your settings.

Important Blogger Theme Update - April 14 2016!
To allow the Theme Plug-ins gadget to register itself with your new theme setup, users are required to activate the HTML/Javascript gadget with the title Plugin or DoNotRemove Cart Plugins or Plug-ins Cart located at the bottom of theme Layout. Click Edit the said gadget & add some content to save it. View screenshot below for reference.

Nav top section

Edit/update text or add web icons easy using simple keyword or pre-defined HTML mark-up.

Nav Link Top Left

Uses Blogger native LinkList gadget to displays text links or texts link with icons (Font Awesome web ions supported) using pre-defined custom class mark-up.

To edit/update go to Layout > find Nav Top Section > click Edit link. Insert the text to display at New Link Name field & a valid URL to link to at New Site URL field.

Supports display over 150 web icons using Font Awesome easy HTML mark-ups. For example, add <i class="fa fa-facebook"></i> at New Site Name field & the theme displays a Facebook icon.

Heads Up!: Including HTML here will not render text as you Save your link at gadget.

Nav Link Top Right

Uses Blogger native LinkList gadget to display social media web icons (Font Awesome web icons supported). Only use pre-defined keyword text to activate the icons display.

To edit/update go to Layout > find Nav Top Section > click Edit link. Insert a social media keyword specific text in lower case at New Site Name field & a valid URL to link to at New Site URL field.

Examples to display social media icons at New Site Name field as below:-

• facebook - displays a facebook F web icon
• facebook-square - displays a Facebook squared icon
• twitter - displays a Twitter bird icon
• twitter-square - displays a Twitter square icon
• google-plus - displays a Google+ icon 
• google-plus-square - displays a squared Google+ icon
• instagram - displays Instagram icon
• youtube - displays Youtube icon
• youtube-square - displays a squared Youtube icon.
• whatsapp - displays Whatsapp icon
• wechat - displays Wechat icon

Header Section

Edit/update blog header logo text or upload image as blog logo. Add HTML to include image or banner styled ads.

Header Gadget

Edit/update theme text logo or upload an image to display as blog logo.

The descripion text entered here will display as supporting text for Logo Name when not using an uploaded image.

To upload an image click Upload Image link > find your image & select image to upload from your PC > choose Instead of Title & Description > click Save to save your custom setup. Click Preview Template or refresh your browser window to view your changes.

HTML/Javascript Gadget

Add in any HTML or text here to display at Header section.

Add a link with an uploaded image URL to display an image or insert your ads HTML markup to display your ads. Below is an example:-

<a href="http://url-to-link-to.com">
 <img src="http://url-to-an-uploaded-image.jpg" alt="Some image title" />
</a>

Click Save to save or update you custom edits.

Heads Up!: This section is hidden on smaller screen sizes to optimize blog page view & navigation.

Navigation Section

Displays a responsive drop down navigation links without knowing any coding or editing template codes.

Adding text and key-specific text to display a navigation link or create a dropdown link automatically at New Site Name field. Below are the conditions:-

• Adding a text in New Site Name field will display as top level navigation link.
• Add a text before or after a text link displays as a top level navigational link
• Add an underscore "_" (with no spaces) following text to start create a dropdown link.
• An underscored "_" (with no spaces) following text before/after an underscored link text will continue to group & display as a dropdown link.
• Add a text without underscore after an underscored text link will stop grouping dropdown links & displays as a top level navigational link.

Supports unlimited links. Usage of the up & down arrows to re-arrange/organize links.

Displayed collapsed on smaller screen sizes with button navigation for optimal user experience on mobile / smaller screen sizes.

Heads Up!: A common default browser behavior will occur when updating link placement during clicking the arrow link. To prevent this behavior press F12 & add in javascript handlers at browser console log to stop this "jumping" browser behavior.

Or while clicking the up or down arrow, press Alt at your keyboard (Windows) simultaneously. This will trigger a Save to PC pop over & continue to click the Cancel button.

Content Section

Where theme contents & powerful hidden features built with theme. Add/ remove/ rearrange/ edit Blogger gadgets to display according to theme layout.

Search by Label Section

A search section with a search bar displayed inside a slide down with search options links located below it. Let users gain quick access to your Blogger posts by Labels or categories that you wanted your users to go to.

Using Blogger Labels gadget, display your best Labels link to optimize user's choice during their search. Click Edit to edit the Label gadget & choose the appropriate Label to display below the search bar.

Blog Section

Featured Section

5 LinkList Blogger gadget has been pre-installed as helpers for Featured Sections at homepage. These gadgets have been pre-assigned with theme featured add on functions & you can find the details below.

Heads Up! For the other version, only 2 gadgets is assigned for Featured Section

To activate a Featured Section, go to any LinkList gadget at this area > click Edit link > add featured at New Site Name field & add value true at New Link URL field. Click Save & preview your theme changes.

By default this section will attempt to display 4 most recent published posts using your Blogger feed. Find, customize & update custom Featured Section display & the available parameters to personalize each section layout - without touching a single code!.

Blog Post Display

Use native Blog gadget settings to customize various Blogger post functionalities which includes:-

• The amount of posts to show at home page or index pages.
• The post page link text aka "Read More..."

Edit & customize Post Page Options settings which includes the following:-

• Activate/deactivate all comment system
• Edit text displayed as comment heading.
• Show/hide social sharing icons.
• Show/hide Label assigned to post.
• Edit text displayed at Label section.
• Activate/deactivate print this & email this feature.
• Activate Google Adsense in posts.
• Customize date format.
• Activate/deactivate Google location link & Google map preview.
• Activate/deactivate display of post author & link to Google+ profile page.
• Activate/deactivate reaction features.
• Edit text displayed at reaction section.

Pro Tip! To easily hide Label section, add text hide at Label text to hide the Label section instantly.

HTML/Javascript gadget

Displays at most recent published posts Section Headers & description which is default rendered by Blogger.

Add/edit gadget Title to display as section heading text & insert text as description for this section.

Heads Up!: This gadget will only display at home page. Removing this gadget will remove the custom mark-up used. To not display any text or heading text & still preserve the gadget location, leave this gadget Title empty and add <!-- --> at gadget body to allow it to Save.

Sidebar Section

Add/ remove/ edit/ re-arrange Blogger gadgets to personalize your blog gadget layout at sidebar.

Supports displays up to 3 gadget contents as a Tabbable Content with link. View details at Display Tab Contents below.

Supports to display the most recent & featured post by label using Blogger LinkList gadget. View custom gadget settings below.

Footer Section

Add/ remove/ edit/ re-arrange Blogger gadget to display at theme footer.

4 columns has been assigned to display at theme footer with 2 variation of column sizes for optimal gadget content display.

However these columns will collapse & stack on top of each other on smaller screen sizes,for optimal mobile display.

Supports displays up to 3 gadgets as a grouped Tabs Content with link. View details at Display Tabs Contents below.

Heads Up! This feature is not included on the other version.

Supports to display most recent & featured post by label using Blogger LinkList gadget. View details below.

Custom Gadgets & Theme Customization

Display Instagram Posts/Feed

This theme allows your blog to display up to 60 post images (terms & usages by Instagram) using a HTML/javascript gadget.

To display & activate Instagram feed built with theme, add any HTML/javascript gadget & include this custom tag below in gadget body.

<div id="instafeed"></div>

Add a title as gadget title & click Save to save your changes. re-arrange by drag & drop the gadget anywhere it can be placed in theme Layout. Save your Template Preview & continue ti preview your theme updates.

By default, the Instagram feed will attempt to display 6 most recent posts from a hashtag blogshop. To customize the display of your Instagram feed, go to Theme Configuration gadget > click Edit & add in the parameters & custom values to assign to your preferences as per schedule below.

Example #1: At Theme Configuration add parameter insta_tagName & add your hashtag name & click Save will automatically display your most recent posts using that specific hashtag.

Example #2: At Theme Configuration add parameter insta_limit & add your value 12 & click Save will automatically display 12 posts from your Instagram feed.

Heads up! Not all custom functions available on freemium version.
Custom Gadget Location		Theme Configuration Gadget
Reference in Template HTML		<b:includable id='js-instagram'> ... </b:includable>
Parameter Insert at New Link Name Field insta_*	Values / Type of Value Insert at New Site URL field	Description	Default
insta_debug	true or false	For debugging purposes. View all plug-in parameters at browser console log if set to true.	false
insta_get	pre-defined	The parameter used to retrieve images from Instagram. tagged Images with a specific tag. Use insta_tagName to specify the tag. locationId Images from a location. Use insta_locationId to specify the location (currently not supported but extendable ) popular Images from a popular page user Images with a user. Use userId to specify the user. More info here. (currently not supported but extendable)	tagged
insta_tagName	text/string/number/integer	The tag (or hashtag) used to retrieve images at Instagram. Heads Up!: Leave "#" when inserting the tag value.	blogshop
insta_sortBy	number/integer	How images displayed from Instagram. none As they come from Instagram. most-recent (default) Newest to oldest. least-recent Oldest to newest. most-liked Highest # of likes to lowest. least-liked Lowest # likes to highest. most-commented Highest # of comments to lowest. least-commented Lowest # of comments to highest. random Random order.	most-recent
insta_limit	number/integer	The amount of images to display.	6
insta_resolution	thumbnail low_resolution standard_resolution	thumbnail Displays images at 128px X 128px images size. low_resolution Displays images at 256px X 256px images size. standard_resolution Displays images at 512px X 512px images size.	thumbnail
insta_clientId	string	A registered client Id provided by Instagram using a registered Instagram Developer API's. Register, create & get your Instagram API ID at Instagram's website.	blogrcart Public Instagram Id
insta_template	HTML	A custom templating in HTML to display Instagram images retrieved.
insta_image_lg	number/integer	The amount of images displayed in a row on larger screen sizes.> 768px	3
insta_image_sm	number/integer	The amount of images displayed in a row on smaller screen sizes < 767px	2

Heads Up!: On newly created Instagram accounts & custom hashtags, we have user reports which allows up to 2 hours before displaying your new Instagram feed. Please be patience! The amount of time also depends on Instagram next user / internal search update.

Too many settings? All of this parameters are available in this template with its description. Refer template HTML location to access.

Display Tabs Contents with Gadgets

This theme comes built in with Blogger gadget Tabs Content helpers by grouping up to 3 gadgets at Sidebar or Footer section.

By default the first 3 gadgets at Sidebar has been assigned to display as a Tabs Content which is:-

• Popular Post gadget
• Recent Articles - using LinkList gadget (find customization at section below)
• Recent Comments - using LinkList gadget (find customization at section below)

All grouped tabs gadget contents will display as a show/hide content while the gadget title will display as the tabs link to initiate the show/hide of contents.

Any 3 native Blogger gadgets can display as a Tabs Content just as long as the first gadget is hooked to this theme custom helpers. Details of customization as schedule below.

Instructions to Group & Assign a Custom Tabs Content

Heads Up! This is only required if you wanted to create another Tabs Content by grouping another set of your gadgets.

Find the first gadget ID (assigned by Blogger) by going to Layout > click to open the selected gadget > at the pop over browser toolbar > view & copy the gadget ID as per screenshot below > Save the ID for reference at your favorite editor > click Cancel to deactivate pop over.

Still in Layout > click Theme Plug-ins gadget & enter the theme helper functions with your gadget ID as below:-

<script>
$(function(){

  $.displayGadgetsAsTabs(" #YOUR-GADGET-ID ");

});
</script>

Click Save to update theme & preview your changes.

Heads Up!: The function naming & the ID used is capital case sensitive.

How it Works?

By entering the built-in function assigned to display a tabbed content, the above codes tells your theme on which gadget (& gadgets) to attempt to create a tabbed content.

The theme will start by including the assigned gadget (as above entered) & works its way to grab the next 2 gadgets to display as the remaining 2nd & 3rd remaining tabbed contents.

The 4th & next gadgets after this sequence will be ignored.

If no gadget was found after the assigned gadget ID, it will be ignored.

Easily group / arrange / re-arrange any Blogger gadget to display as a tabbed content. You can remove / update the gadget to display as a tabbed content by moving (drag & drop) any other gadget next to the assigned gadget ID as above.

Create more tabbed contents by using the same method as above.

Use Blogger Template Designer to assign a custom text, border & background color for the tabbed content.

Displaying Recent Articles/Feed

A Recent Article helper has been installed with theme. Using any LinkList gadget an assigning the gadget ID could easily hook the add on functions with the selected gadget.

By default a LinkList gadget has been pre-assigned to display recent articles located at Sidebar section under the Recent Articles title.

To display & activate Recent Articles gadget,  click Edit to open the gadget & add recent_articles at New Site Name field & add value of true at New Site Link field.

Add a title as gadget title & click Save to save your changes. re-arrange by drag & drop the gadget anywhere it can be placed in theme Layout. Save your Template Preview & continue ti preview your theme updates.

Default values has been assigned for the Recent Articles gadget. The assigned parameters is also using the paraeters used at Featured Section.

Example #1: At the assigned Recent Article LinkList gadget add parameter max_display & add your value 20 & click Save . This will automatically display 20 recent published articles. Importnat to always consider on the max_feed settings as required by the plug-in.

Example #2: At the Assigned Recent Articles LinkList gadget add parameter show_title & add your value false & click Save . This will automatically hide the post titles.

Display Recent Comments/Feed

A Recent Comment helper has been installed with theme. Using any LinkList gadget an assigning the gadget ID could easily hook the add on functions with the selected gadget.

By default a LinkList gadget has been pre-assigned to display recent comments located at Sidebar section under the Recent Comments title.

To display & activate Recent Comments gadget,  click Edit to open the gadget & add recent_comments at New Site Name field & add value of true at New Site Link field.

Add a title as gadget title & click Save to save your changes. re-arrange by drag & drop the gadget anywhere it can be placed in theme Layout. Save your Template Preview & continue ti preview your theme updates.

Default values has been assigned for the Recent Comments. Find the assigned parameters in schedule below to add in your custom values.

Example #1: At the assigned Recent Comments LinkList gadget add parameter max_display & add your value 3 & click Save . This will automatically display 3 comments by author.

Example #2: At the Assigned Recent Comments LinkList gadget add parameter comments_show_image & add your value false & click Save will automatically hide the comment author images.

Heads up! Not all custom functions available on freemium version.
Custom Gadget Location		LinkList Configuration Gadget
Reference in Template HTML		<b:includable id='js-feed-comments'> ... </b:includable>
Parameter Insert at New Site Name field comments_*	Values / Type of Value Insert at New Site Link field	Description	Default
max_display	integer/number	The number of comments to display.	4
max_feed	integer/number	The amount of comments to retrieve from Blogger servers. Heads Up!: More comments to display means more bytes to download & will deter theme performance. Use wisely.	5
comments_show_author	true or false	Displays the comment author image if found. If none is found, a default grafavatr image is alloctaed. This image url can be customised atcomments_image_gravatar settings below.	true
comments_author_text	text/string	The text displayed after the comment author name.	commented
comments_show_content	true or false	Displays the comments content. Heads Up!: For performance reasons, this plug-in is currently retrieving comments snippets (53 chars) by Blogger servers.	true
comments_content_text	text/string/HTML	The text or HTML displayed before the comment content. \ If HTML chars used, the plug-in attempts to render HTML chars.	<br/> &mdash;
comments_show_image	true or false	Displays the comment author image.	true
comments_image_gravatar	URL	A default image displayed if a comment author image is not found or used.	http:// www.gravatar.com/ avatar/?d=mm
comments_image_size	number/integer	The size of the comment author image to retrieve in pixels.	48
comments_show_date	true or false	Displays the date the comment was published.	true
comments_date_format	pre-defined	Displays the date format if comments_show_date is set to true. ddmmyy Day month year mmddyy Month Day Year	ddmmyy
comments_date_short	true or false	Trims the published comments date months format to 3 words	true
comments_random_order	true or false	Displays the comments retrieved in random order.	false
comments_debug	true or false	For debugging purposes. View current & available setting retrieved from plug-in at your browser console log.	false
comments_destroy	true or false	Terminates the plug-in functions while still preserving your initial settings saved at the gadget.	false

Heads Up!: By default this gadget is specifically styled to Sidebar & Footer section in theme. However, it is possible to render this plug-in at Blog Section but some CSS styles must be added.

Too many settings? All of this parameters are available in this template with its description. Refer template HTML location to access.

Homepage Featured Section

Add featured sections using native Blogger LinkList gadget to display posts by recent published, by particular Label/category, by specific author with individual layout display.

This plug-in was developed to maintain your blog performance while having the options to control how posts are displayed & providing the best solution when displaying content on various screens or platforms.

By default 5 LinkList gadgets have been assigned to display the Featured Section at home page & custom styles can be added according each Featured Section for personalisation.

To activate, at any of the assigned LinkList gadget, add a parameter of featured & add a value of true . Add a title for this Featured Section & click Save to save your gadget settings.

By default, the featured section will display 4 most recent posts. Use the assigned parameter & add in your custom values shown at below schedule to customize each Featured Section.

Example Featured Section with display posts by label settings.

Pro Tip: Be creative! Use title_chars , summary_chars, image_height to control individually your Featured Section display. Always make a very best impression for your first time visitors.

Heads up! Not all custom functions available on freemium version.
Custom Gadget Location		LinkList Configuration Gadget (Featured Section)
Reference in Template HTML		<b:includable id='js-feed'> ... </b:includable>
Parameter Insert at New Link Name Field insta_*	Values / Type of Value Insert at New Site URL field	Description	Default
max_display	integer/number	The amount of posts to display for a Featured Section	4
max_feed	integer/number	The amount of posts to retrieve for a Featured Section from Blogger feed. Heads Up!: More posts retrieved means more bytes to download & will deter theme/blog performance. Use wisely.	20
display_author	text/string	Filters an author specific published post. Text entered here equivalent to the author displayed name attached to the blog post. Conditions. If the amount of post feed to retrieve does not have the author assigned to it no post will be displayed. Post retrieved from max_feed amount will be shown if the author name exists. Values entered here is not case sensitive.
show_title	integer/number	Displays the post title.	true
title_chars	true or false	The amount of characters for post title to display.	90
title_top	true or false	If set to true displays post titles above post image. Note: Post author, date & comment text will also shifted above post image.	false
show_image	true or false	Displays the post image.	true
image_thumbnail	URL	If set to true uses squared images cropped by Blogger servers for theme/blog performance purposes. Set to false to retrieve post images with no cropping.	true
image_size	number/integer	The image size retrieved from Blogger servers in pixels. Heads Up!: Larger images means larger file size to download & display at your page. Use wisely.	480
image_bg	true or false	Displays the post image on an element as background image. Image displayed centered & covers the <div> element it is assigned too. Use CSS background-image to override the initial styling for personalisation. Below are the defaults:- .feed-image { background-size: cover; background-position: center; background-repeat: no-repeat; } Is set to false the image will render using an <img> tag with the container <div> as its parent element.	true
image_height	number/integer	A CSS image height size in pixels added dynamically to control image height. If background image at image_bg is set to true, this height controls the <div> element height	320
image_default	URL	A url to an uploaded image if a post image is not found.	http://4.bp.blogspot.com/ -MowVHfLkoZU/ VhgIRyPbIoI/ AAAAAAAATtE/ qHST4Q2YCCc/s1600/ placeholder-image.jpg
show_summary	true or false	Displays the post summary.	true
summary_chars	integer/number	The amount of characters to display for post summary.	160
show_meta	true or false	Displays the supporting meta post information.. If set to false does not display author, date & comments.	true
featured_label	text/string	Add in the Label of choice to display for a giving section. Text entered here is capital case sensitive.
show_date	true or false	Displays the post published date.	true
date_format	pre-defined	How the date format will display. ddmmyy Days Month Year mmddyy Month Days Year yyddmm Year Days Month yymmdd Year Month Days	ddmmyy
date_numeric	true or false	Displays the post date using numeric If set to false, the date will be using Month with 3 letter shot form.	true
date_text	text/string referred to/as a HTML element	Displays the icons used before the post date text.	<i clas="fa fa-calendar"></i>
date_spacer	text/string	The element used as separators at numeric date format	/
show_author	true or false	Displays the post author name.	true
author_image	true or false	Displays the post author image if set to true	false
author_icon	text/string referred to/as a HTML element	Displays the icon before the post author name.	false
show_comments	true or false	Displays the comment text	true
comments_icon	text/string referred to/as a HTML element	The icon displayed before the comment text displayed. Use Font Awesome markup to include custom icons of choice.	<i class="fa fa-comments"></i>
comments_text	text/string	The text displayed if comments have been published for a given post.	comments
comments_none_text	text/string	The text displayed if no comments have been published for a given post,	No comments yet.
random_order	true or false	Displays a post in an random order based on the max_feed amount of posts retrieved.	false
wrap_element	text/string referred to/as a HTML element	A DOM element object name to cretae as parent wrapper for a retrieved post.	div
youtube_image	pre-defined	The video image thumbnail size to retrieve form Youtube if a video embed in a blog post. If an image exits before a Youtube video in a published blog post, that image will be assigned as the post image. Available format to retrieve:- default qdefault sddefault maxresdefault	sddefault
youtube_image_type	image format/ extension	A predefined Youtube video image type.	jpg

In addition here are some pre installed custom styling that can be added for a Featured Section. Add the assigned parameter with the selected value.

Too many settings? All of this parameters are available in this template with its description. Refer template HTML location to access.

Heads up! Not all custom functions available on freemium version.
Custom Gadget Location		LinkList Configuration Gadget (Featured Section)
Parameter Insert at New Link Name Field	Values / Type of Value Insert at New Site URL field	Description
layout_class	feat-large-first	A CSS specific class name to handle a Featured Section post display. This class name will be added dynamically to the Featured Section it is assigned to. This setting will attempt to display the first images 66% of container width while the remaining images fills in the remaining area.
	feat-list-style	A CSS specific class name to handle a Featured Section post display. This class name will be added dynamically to the Featured Section it is assigned to. This setting will attempt to build a list still display with smaller post image size to the right while the post content will tuck nicely within the parent container element.
	feat-list-style feat-list-style-right	A CSS specific class name to handle a Featured Section post display. This class name will be added dynamically to the Featured Section it is assigned to. Opposite of list-style, displays post images on the right hand side.
	feat-2-col	A CSS specific class name to handle a Featured Section post display. This class names will be added dynamically to the Featured Section it is assigned to. Displays the posts side by side in 2 columns.
	feat-3-col	A CSS specific class name to handle a Featured Section post display. This class name will be added dynamically to the Featured Section it is assigned to. Displays the posts side by side in 3 columns. The title/font is reduced in height & size.
	feat-4-col	A CSS specific class name to handle a Featured Section post display. This class name will be added dynamically to the Featured Section it is assigned to. Displays the posts side by side in 4 columns. The title/fonts is reduced in height & size.
	feat-5-col	A CSS specific class name to handle a Featured Section post display. This class name will be added dynamically to the Featured Section it is assigned to. Displays the posts side by side in 5 columns. The title/fonts is reduced in height & size.
	feat-6-col	A CSS specific class name to handle a Featured Section post display. This class name will be added dynamically to the Featured Section it is assigned to. Displays the posts side by side in 6 columns. The title/fonts is reduced in height & size.
The HTML that is displaying a Featured Section will render as follows. Use the assigned class name to assign/style according to your preferences.
<div class="widget LinkList" id="LinksListID">  <!-- Blogger gadget specific -->   <div class="widget-content CUSTOM-CLASS-NAME">  <!-- Blogger gadget specific -->     <!-- posts from feed -->     <!-- first feed -->     <div class="feed">       <div class="feed-inner">         <a href="LINK-TO-POST">           <div class="feed-image"/>         </a>         <div class="feed-caption">           <h3 class="feed-title">THE POST TITLE</h3>           <p class="feed-meta">             <span><author></span>             <span><post date></span>             <span><comments></span>           </p>           <p class="feed-caption">               The post description...           </p>         </div>       </div>     </div>     <!-- end first post feed -->     <!-- second post feed -->     <div class="feed">       <div class="feed-inner">         <a href="LINK-TO-POST">           <div class="feed-image"/>         </a>         <div class="feed-caption">           <h3 class="feed-title">THE POST TITLE</h3>           <p class="feed-meta">             <span><author></span>             <span><post date></span>             <span><comments></span>           </p>           <p class="feed-caption">           The post description...           </p>         </div>       </div>     </div>     <!-- end second post feed -->   </div> <!-- end gadget-content --> </div> <!-- end gadget -->


Heads Up!: Add in your custom class name here and include the reference class name  at your custom CSS styles easily. You the designer! Find an example to use & apply specific CSS styles in theme.

Applying multiple pre-set class names at layout_class will override the pre set styling assigned. Use as instructed.

Example Featured Section displays posts by Author settings.

Example Featured Section displays posts using list-style settings.

Related Post Section

Displays a collection of published posts related to the posts displayed using the last Label the post is assigned to.

This plug-in was developed to maintain your blog performance while having the options to control how the related posts displayed. Providing the best solution when displaying content on various screens or platforms.

By default a collection of related posts will display automatically if a post is assigned with a Label via blogger post editor. The related section also by default will display 4 random posts. attached to the last label the post was assigned to.

Use the assigned parameter & add in your custom values shown at below schedule to customize how the related post will display.

Heads up! Not all custom functions available on freemium version.
Custom Gadget Location		Theme Configuration Gadget
Reference in Template HTML		<b:includable id='js-related'> ... </b:includable>
Parameter Insert at New Link Name Field related_*	Values / Type of Value Insert at New Site URL field	Description	Default
related_max_results	integer/number	The amount of posts to display for a Related Section	4
related_show_title	integer/number	The amount of posts to retrieve for the Related Section from Blogger feed. Heads Up!: More posts retrieved means more bytes to download & will deter theme/blog performance. Use wisely.	20
related_title_top	true or false	Displays the related post titles above the image.	false
related_title_chars	integer/number	The amount of characters the post title	35
related_show_image	true or false	Displays the image.	90
related_show_thumbnail	true or false	If set to true uses squared images cropped by Blogger servers for theme/blog performance purposes. Set to false to retrieve post images with no cropping.	false
related_default_image	true or false	Default image displayed if a post image is not found.	http://4.bp.blogspot.com/ -MowVHfLkoZU/ VhgIRyPbIoI/ AAAAAAAATtE/ qHST4Q2YCCc/s1600/ placeholder-image.jpg
related_image_size	URL	The size of image retrieved from Blogger feed.	320
related_image_height	number/integer	A CSS image height size in pixels added dynamically to control image height. If background image at image_bg is set to true, this height controls the <div> element height	180
related_image_bg	true or false	Displays the post image on an element as background image. Image displayed centered & covers the <div> element it is assigned too. Use CSS background-image to override the initial styling for personalisation. Below are the defaults:- .related-image { background-size: cover; background-position: center; background-repeat: no-repeat; } If set to false the post image will render using an <img> tag with the container <div> as its parent element.	true
related_show_author	true or false	Displays the post author.	true
related_author_label	text/ string/ HTMl	Displays as the author label. Use HTML to assign fonts	<i class="fa fa-user"/>
related_show_heading_title	true or false	Displays the Related Section heading title.	true
related_heading_title	text/ string	The amount of characters to display for post summary.	Related Articles
related_layout_class	text/ string referred to/ as a CSS class name	A custom class name added to each related post element to easily assign custom CSS styles. This theme already has assigned several class names to use rel-2-col Displays related posts in 2 columns side by side at 50% of parent container width. rel-3-col Displays related posts in 3 columns side by side at 33.33333% of parent container width. rel-4-col Displays related posts in 2 columns side by side at 25% of parent container width. rel-5-col Displays related posts in 5 columns side by side at 20% of parent container width. rel-6-col Displays related posts in 6 columns side by side at 16.66666% of parent container width.	rel-4-col
related_parent_class	text/string	A custom class name added to related post parent element to easily assign custom CSS styles.	row-eq-height
related_config_debug	true or false	For debugging purposes. Displays all available settings at browser console.log	false

Too many settings? All of this parameters are available in this template with its description. Refer template HTML location to access.

Ticker Posts

A CSS3 only scolling animated news ticker displays a collection of published posts on all pages except a blog post page.

This plug-in was developed to maintain your blog performance while having the options to control how the ticker posts is displayed. Providing the best solution when displaying content on various screens or platforms.

To activate, Find at Layout > find the LinkList gadget assigned to at Ticker Section, add a parameter of ticker & add a value of true . Add a title for this Ticker Section & click Save to save your gadget settings.

By default, the Ticker Section will display 4 most recent posts. Customize each post details by using the same parameters available at Featured Section.

Customize the ticker scroll animation timings using only CSS! Below is an example to customize by overriding the scrolling speed at Template HTML > Customize > Advance > At Add CSS box.

.ticker-section .widget-content {
  -moz-animation-duration:35s;
  -webkit-animation-duration:35s;
  -o-animation-duration:35s;
  animation-duration:35s;
}

Add in an appropriate integer in seconds replacing the animation-duration timings,

If you require to display more posts, if the posts does not display at your ticker section, add below CSS to expand the ticker container element:-

.ticker-section .widget-content {
  width:600%; /* example ticker container element displaying 6 posts */
  height:50px; /* customize ticker container  height */
}

Change the container width size to display more posts or customize the container height if you require to show more post details ie display the caption.

Heads Up!: Since that this ticker functionality is using CSS3, we have tested the functionality on the most recent modern browsers which includes default mobile browsers & works as expected.

Activating & Deactivating Comments

Using existing Blogger comments functions to activate or deactivate comments in post pages.

Disqus Comments

In order to activate your Disqus comment system, register & open a free account at Disqus & fill in your blog preferences as required. Once verified, you can use your custom disqus_shortname and activate Disqus comments with this theme.

Go to Theme Configuration > Add parameter disqus_shortname & add your disqus shortname value > click Save to save your settings.

Automatically once you refresh you blog pages with comments, clicking the Disqus tab link will display your Disqus comments system account attached to your blog.

Google+ Comments

Google+ comments is also associated with Blogger comments - instead users are able to comment using Google+ features. This commenet is automatically attached/referenced to the Blog preferences & profile.

All Comments

To activate or deactivate entirely all comment system at Layout > find Blog Post gadget > click Edit > untick the comments label > click Save & preview your changes.

To deactivate all comment system on a particular blog post page, at your blogger editor > go to editor sidebar > expand Options > and untick Allow comments > click Save or Update your post page. Note that this feature exists if you have allowed comments throughout your blog.

404 Error Page Not Found

Customize 404 page not found error handling page which comes with search engine handlers for optimal user/search engine experience when a page is missing or does not exists at your blog.

Using Blogger default alert messages with custom styles, add below code to customize how your 404 page not found page would display. At Dashboard > Settings > Search Preference > under Errors and redirections section > click the Custom Page Not Found link > enter below mark-ups:-

<div class="text-center">
  <h1>
    <i class="fa fa-warning"></i>
      Ooops... <span class="small">We have a problem!</span>
  </h1>
  <p class="lead">
     The file could not be found! Let us guide you back <a href="/">[ Home ]</a>
  </p>
</div>

Edit the text in between element tags it is assigned to. Use Bootstrap3 class naming convention, assign how your text will display. Here are examples News Ones typography

Use Blogger Template Designer under Advance > Status Message * link to select your preferred text or background colours.

Theme Background Image

Upload image from PC using Blogger Template Designer features change theme background using an image.

Changing theme background & using an image is made easy using Blogger Template Designer feature.

Go to Template > click Customize button > find Background Link > on the right hand side, click the small triangle > choose Upload Image to upload an image from your PC.

You have several options to place ( or spread) your background image. Select according to your preferences.

This theme is also activated with a transparent background image by selecting pre-set image under the Transparent category.

Upload & add theme background using an image.

Custom Cookie Alerts

Required for website's or blog's to display for all users located in European Countries, customize text displayed as website's cookie usage alerts

Customize the text displayed for the cookie usage alerts by goinf to Theme Configuration gadget > add a parameter of cookieText at New Site Name field & add in your custom cookie alert text at New Site Link field.

This will display your own text alerts upon users first visit at your blog. Once the user has acknowledge the alert, by clicking the cancel/cross button, it saves a cookie reference to you blog at their web browser.

Find below more options for the simple cookie plug-in.

Custom Gadget Location		Theme Configuration Gadget
Reference in Template HTML		<b:includable id='js-cookie'> ... </b:includable>
Parameter Insert at New Link Name Field cookie*	Values / Type of Value Insert at New Site URL field	Description	Default
cookieText	integer/number	The amount of posts to display for a Related Section	4
cookieName	text/ string	A unique cookie name to be saved at users browsers when the alert text is disabled.	themeCookieConsent
cookieValue	text/ string	A unique value to save as reference with the unquie cookie name at cookieName settings.	true
cookieExpires	text/ string	The cookie expiry date. By default the expiry date is 1 week.	6048e2
cookiePath	URL	The URL to your blog. By default it is set to your domain URL	/
cookieRemove	true or false	To remove the cookie stored at your own browser for testing purposes..	false
cookiePlaceAfter	true or false	Setting the cookie alert text before or after the assign element refernce by its classname at the theme page. The assigned element for this theme is located at $.setCookie('.page-element-classname')}; function activator. By default the cookie alert is attached to the .footer-wrapper element	false

Displaying the custom cookie text as required by EU countries