Welcome to Documentation!

Thanks for Buying

First of all, thank you for buying this template. To make your experience pleasant, we've added as much info as needed in this documentation. If you're stuck with anything, please refer to chat whatsapp.

Installation

Install the theme. The installation method is very easy.

Installation

  1. Go to Gmail and next to Content, click the Download button. On the dropdown menu, click on All files & documentation.
  2. Extract the zip file in your computer. Browse through the folder that starts with the name Content -. You will find the .zip file here.
  3. Login to Blogger dashbor and browse to Theme or Template > Edit HTML.
  4. Click on Download Full Template to Backup your previous template.

  5. Open .xml file using text editor like notepad, wordpad, notpad++ or something like that.

  6. In the text editor, press ctrl+a and then ctrl+c (ctrl+a to select all coding, ctrl+c to copy the selected coding)

  7. Now open HTML Editor on blogger dashboard and click "Edit HTML" button.

  8. Click anywhere in HTML Editor. Now press ctrl+a and then ctrl+v (ctrl+a to select all coding, ctrl+v to replace selected coding with copied template coding). Finally click "Save theme" button.

  9. Now you're done.
  10. All done. Now proceed to What to do next?

Import Demos

If it's a fresh site (or a test site) with no content, it's a good idea to import one of the demos with Full Content to get you started. You don't want to do it on a live production site as it will import several posts, pages, and images.

  1. Go to Blogger > Settings > Import content.

  2. Click to Import.

  3. Open template folder select, backup-demo.xml.

Tip If the blog already has some content, this method is not necessary!.

Setup Your Blog

Once you're done with theme installation, it's time to setup your blog. What to do next:

Header Section

There are several header layouts available by default that allow you to control whether you want them to be visible or hidden.

To select your header layout:

  1. Open dashbor Blogger > Layout.
  2. Go to your widget Header logo / Header menu / Header icon. Here you can select your desired header layout and preview it immediately.

To be retina friendly (to look sharp on devices like Macbook Retina, iPad), you should create your logo image in PNG format.

  1. Go to Blogger > Layout > Header logo.
  2. Click icon button.

  3. Configure header

    • Blog title your name or title blog.
    • Blog description your description or text blog.
    • Upload your logo with Input image URL or Upload image from computer.
    • Image placement chose > Have a description placed after the image.

  4. (Optional) You can set a different logo for the smaller one by enabling Shrink to fit.

    Note This logo will be displayed at half the width and height. The double dimensions are required as mobile screens are Retina/Hi-definition.

  5. Click Save.

Setup Header Menu

Setting up Navigation Menus works normally as it does for any Blogger Theme. If you're new to Blogspot, you can learn more about menus in this article (external).

Creating a New Menu

  1. Go to Layout > Header Menu > Menu Navigasi.
  2. Click icon
  3. Add A New Item :
    1. Site name > your text menu
    2. Site URL > your URL / Pages blog
  4. If you want to use this menu in a dropdown, in the "Text name" section, add the "_" sign, for example: _Dropdown Menu. Click Save.
    1. SubLink Level 1 Example: _Menu 1 Before the Title add 1 underscore
    2. SubLink Level 2 Example: __Menu 2 Before the Title add 2 underscore
  5. Click Save Menu and that is all.

Mega Menus

Template supports category mega menus that are capable of showing latest posts from a specific category.

Adding Mega Menus

  1. Go to Layout > Header Menu > Menu Navigasi and click icon
  2. Mega Menu Options:
    1. Shortcode: {getPosts} $label={Your Label}
    2. Shortcode Label: label or recent
  3. What are Label? Shortcode Example: {getPosts} $label={Marketing}
  4. Save the menu.

Sticky Header

Sticky header offers a way for the header to be either always visible (Normal) or visible based on when a user tries to scroll up (Smart). The header/topbar gets fixed as shown below. To configure it, follow the steps below.

  1. Go to Theme > CUSTOMISE > Advanced > Theme Options.
  2. Fixed Header :
    1. false is 0
    2. true is 1
  3. Click Save & Publish.

Header Menu Icons (Header Styles Only)

Not all headers support icons. To be sure, check the icon code that supports the theme below.

Support code icon:

  1. Facebook
  2. Twitter
  3. Whatsapp
  4. Support
  5. Feed
  6. Email
  7. Line
  8. Telegram
  9. Notifications

After selecting the icon to display, you must configure the icon with your URL link:

Configure Header Menu Icon

Menu icons need to be configured if you want to use header menu icons in the theme. This is a link to the URL you specified.

  1. Go to Layout > Header icon > Menu Icon.
  2. Click icon

  3. Configure link list:

    1. Add A New Item for new icon
    2. Site name In the text code icon section, see the list of supported codes
    3. Site URL The URL link you set.
  4. Click Save.

Seting Up Your Homepage

There are a few ways of setting up your home-page based on what you need:

  1. Simple Blog Home

    For all the simple blog homepages shown on our demo.

  2. Widgetized Homepage

    Our default Homepage is built using this method. It's for advanced users but offers several widget blocks you can use on homepage.

    3. NoteUse the HTML Widget method if you want to customize the appearance. All front page display settings are in the layout menu

    Method 1: Simple Blog Home

    All you need to do to use a simple blog homepage is to simply disable your homepage widget. Go to Layout > Show this widget > Off.

    Select Widget Layout

    This template comes with several list styles for the home page. You can see the style widget in our Demo. You can disable any widget styles that you don't want to appear on your home page.

    1. Go to Theme > CUSTOMISE > Gagdets.
    2. Under Gagdets, select the widget type you wish to use. On changing, you will be able to see the preview on the right side.
    3. You also have the option to enabe or disable the widget.
    4. Click Save & Publish.

    Method 2: Widgetized Homepage

    First, confirm the HTML type of widget you are adding. Then, set the layout and style of the widget homepage:

    1. Go to Layout > Widget type Featured.

    2. Add a Gagdets type HTML/JavaScript, click Widget

    3. There are 3 Featured post type models, which you can set:
      1. Custom type > grid
      2. Custom type > block
      3. Custom type > video

      Shortcode: {getPosts} $results={Number of Results} $label={Your Label} $type={Custom type}

    4. Click Save & Publish.
    5. Repeat to add more widgets.

    Note: You can add multiple model type widgets without limitations. You can also disable some widgets.

    Activate Widget Slider

    This theme comes with a slider widget that you select by following the steps below:

    1. Go to Layout > Widget type Slider > Featured Post Slider.
    2. Click
    3. You can configure the title widget, number of posts, and the method to display posts (according to views or most viewed)
    4. Click Save & Publish.

    Activate Grid Mode

    You can change the recent posts list view to grid mode.

    Home CTA

    1. Go to Theme > CUSTOMISE > Advanced > Theme Options.
    2. Grid Mode
      1. false is 0
      2. true is 1
    3. Save.

Setup Main Post

Access your blog Layout > and click in the Main Posts gadget.

Widget Settings:

  1. Number of posts on main page > Number of posts displayed on the home page.
  2. Post page link text > Write the title of the latest post.
  3. Author format > Writing from the author.
  4. Comment format > Comment type used. There are 3 types of Comment types available.
    1. Blogger Shortcode > $type={blogger}
    2. Disqus Shortcode > $type={disqus} $shortname={Your Shortname Disqus}
    3. Facebook Shortcode > $type={facebook} $lang={Language Code}

      Facebook Language Codes :

      • en_US
      • es_ES
      • ar_AR
      • id_ID
      • th_TH
      • vi_VN
      • pt_BR
      • fr_FR
      • ru_RU
      • de_DE
      • it_IT
  5. Click Save.

Adding Posts

Adding a new post work the same way as a default Blogger installation. For an extensive guide on adding posts, check this guide.

Post Settings

It is highly recommended to enable this setting in blogger.

  1. Go to Blogger > Settings > Posts

  2. Image lightbox > Disable
  3. Lazy load image > Enable
  4. WebP image serving > Enable

Featured Image Size

While the theme can function without featured images, it's highly recommended that you add a featured image to each post. This not only makes your site/blog more lively but also improves user experience.

To set the featured image, use the Blogger normal method.

Recommended Image Size

Image size (dimensions) will depend on what type of layout you're using throughout your Blogger or per individual post basis. This image will not only be used on the post, but also on the category listing pages.

  • Compatible with all layouts and default slider: 1170x515 minimum (width x height).
  • If you don't use Full Width layout: 750x500 minimum.

Note Template uses Blogger standard cropping and resizing method.

Choose Your Post Format

Post formats allow you to display your posts differently. For example, a video format post will display a featured image from a YouTube video. and, audio posts can feature embeds from Soundcloud.

Video Embed Youtube

  1. Select a Youtube video and click the Share button. Copy the youtube embed code.

  2. Paste the video embed code from YouTube in the blogger post column.

Note Change your blogger post mode to HTML view mode, not Compose view.

Open SoundCloud. Search for music you want to share in a blog post.

  1. To add audio from a SoundCloud post, click the Share button

  2. Click Embed. Copy code, see below

  3. Paste code embed in blogger post.

Note Change your blogger post mode to HTML view mode, not Compose view.

Post Style Options

If you follow all the steps below carefully, you will have no difficulty using our shortcodes. and you don't have to deal with HTML code.

Post Layout

You can set multiple post displays.

  • Shortcodes : {fullwidth} You are using the full size image option without a sidebar for this post.
  • Shortcodes : {leftsidebar} The sidebar is on the left for this post.

How to Use?

Add the shortcode at the end of the content, Then select the shortcode and add the Bold style.

Example :

Post Buttons Style

If you carefully follow all the steps below, you should have no difficulty using our shortcodes.

  1. Shortcode: {getButton} $text={Button Text} $icon={Icon Name} $color={Hex Color}

    Available Icons: cart \ eye \ download \ info \ link

  2. Click button Insert Link
  3. Example:

  4. Note : button information

    Shortcode: {getButton} $text={Button Text} $icon={Icon Name} $info={Info Text}

Note Icon, Color and Info are optional attributes.

Post Alert Boxes

Write whatever you want and add the shortcode, Then select all the desired text including the shortcode and add the Quote Text style.

  1. Shortcodes:
    • {alertPrimary}
    • {alertSecondary}
    • {alertSuccess}
    • {alertInfo}
    • {alertWarning}
    • {alertError}
    • {codeBox}

  2. Example:

Post Table of Content

To create a post using a table of contents, make sure the article you write has a title heading.

  1. Shortcode: {getToc} $title={Table of Contents}

  2. Example:

Note After adding a Shortcode apply the Bold style.

Adding Pages

Creating pages is a simple process just like a default Blogger. If you're unsure, learn more about pages.

Add a Contact Page

Setting up a contact page requires you to create a shortcode {contactform}.

Add the shortcode in the desired area, Then select the shortcode and add the Bold style.

Example:

Adding Google Maps to Contact Page

To add Google Maps:

  1. Go to Google Maps.
  2. Find the desired location and in the left pane, click Link icon (it's to the right side of "My places" button, next to print icon).
  3. Click customize and preview embedded map. Set settings as desired and the copy the HTML code.
  4. Edit your page and go to HTML view editor. Paste your code and Publish.

Sidebars and Widgets

This template comes with some custom widgets but also styles Blogger's default widgets.

Additional Custom Widgets

Widget - Posts List
Show either latest posts or popular posts from your blog.
Widget - Recent Comment
Show the latest comments on your posts.
Widget - Advertisement
Add a banner to your sidebar.
Widget - Subscription
A widget to add mailchimp subscription form.

How to use widgets

  1. Go to Layout > Sidebar.
  2. Sidebar is the main right sidebar. where you would like to place your widget, by clicking Add a Gagdet.
  3. Drag & drop the widget you wish to use, in the expanded area below the box (Main Sidebar for example).
  4. Fill in the information necessary and click Save.

Subscribe Widget - Mailchimp

Access your blog Layout and click on the Add a Gadget > HTML/JavaScript in the Sidebar section.

  1. Shortcode: {getMailchimp} $title={Gadget Title} $caption={Gadget Text}
  2. Gadget Attributes: The $title={} and $caption={} attributes are optional.

  3. Example:

How to Get The Mailchimp Subscribe Form URL?

You can get the link easily by following the steps below.

  1. Create a free account on Mailchimp – Create Now

  2. After creating your account go to Audience > Signup forms > Form builder.

  3. Create and customize your form according to your needs.

  4. Copy and access the Signup form URL.

  5. After the page loads, Copy the final Subscribe Form URL into your browser’s address bar.

  6. Click save

The Right Sidebar

Template right sidebar uses the Main Sidebar widget area. Any widgets you drag/drop in this widget area will be displayed in the right sidebar.

Recent Post by Label

If you want to display a post widget, there are 3 display types that you can specify.

  1. Access your blog Layout and click on the Add a Gadget > HTML/JavaScript in the Sidebar section.
  2. Shortcode: {getPosts} $results={Number of Postal Numbers} $label={Your Label} $style={Number of Style Numbers}

  3. Example:

  4. Click save

Comments Widget - Latest Comments

If you want to display a list of comments on your blog. Make sure your blog post has several comments.

  1. Access your blog Layout and click on the Add a Gadget > HTML/JavaScript in the Sidebar section.
  2. Shortcode: {getPosts} $results={Numbers of Comments} $type={comments}

  3. Example:

  4. Click save.

Facebook Widget

If you want to display the Facebook page widget :

  1. Go to Layout > HTML/JavaScript > Facebook.

  2. Example:

  3. Change URL https://www.facebook.com/temabanua.
  4. Click save

Color, Style & Typography

Color / style and typography settings are located in Theme Settings.

Color & Style

Customizing the Colors & Backgrounds

  1. Go to Theme > CUSTOMIZE > Main colour theme.
  2. Usually you may wish to only change Main Theme Color from General. This will effect several crucial areas of the theme and acts more like a skin.
  3. If the Main Color changes are not enough, adjust other colors as you please.
  4. Save & Publish.

Typography

For typography, we use Google Web Fonts. It's usually best to leave the typography at default, but typography elements have suggested font families or fonts as alternatives.

  1. Go to Theme > CUSTOMIZE > Advanced.
  2. Select a font you like as the Primary Font, Heading Font etc.
  3. Experiment to get the best effect - the preview is updated instantly on the right.
  4. Save & Publish.

Translation & Internationalization

This template comes with files that include all languages from blogger. To use it:

  1. Go to Settings > Blog language.
  2. Select the template language you want.

Advanced Customizations

If you are looking for layout customizations beyond the Style & Typography settings built into the theme, it's important to judge the nature of customization.

If the layout change is simple, this can most likely be achieved using Custom CSS. However, for something where it is not possible to use one of these, it is recommended to enter the theme HTML.

Custom CSS

  1. Go to Theme > CUSTOMIZE > Advanced > Add CSS

  2. Click save & publish

Note It is recommended that you already understand what CSS functions are

Frequently Asked Questions

  • How do I want to display my profile?

    (a) Using profile blogger

    The original feature of Blogger blogs was called author profiles. This allows you to create name and profile quotes for readers to see.

    » Learn about profile blogger.

    (b) Author Box

    The widget receives the blogger profile informations automatically, As long as your profile is marked as public. The icons are displayed if there are links in the introduction.

    1. Go to Settings > General > User profile.

    2. Find for Additional Information > Introduction and add your description with HTML links.

    3. To be able to use URL links use icons. See list of supported icons.
    4. Save.

    Note The "Introduction" is required for the author box to be displayed! But the links are not required.

  • How do I want to display ads?
    1. Go to Layout > Advertisment.

    2. This advertising widget only appears on the article posting page.

    3. Click save.
  • My featured post doesn't appear on the homepage.

    If you already have posts when activating the theme, you will need to refer again to the Blog feed section and select Full.

    • Go to Settings > Site Feed > Allow blog feed > Full

Copyright & Credits

This guide is only intended for blogger template users from temabanua.

Resources Used