Home

Temabanua

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:
  • Add your logo and configure your header.
  • Setup Main Post.
  • Follow Adding Posts section to add a few posts.
  • Learn how to setup your homepage.
  • Setup your sidebar and add widgets.
  • Activate and configure your footer.
  • Customize fonts & colors, if you want to.
  • Read other sections on the right side of this documentation.
  • Got questions? Refer to Frequently Asked Questions.

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 link / Header widget. Here you can select your desired header layout and preview it immediately.

Header Logo Setup

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
  4. (Optional) You can set a different logo for the smaller one by enabling Shrink to fit.
  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. to Layout > Menu - Main Menu > Menu List.
  2. Click icon 
  3. Add A New Item :
  4. Site name > your text menu
  5. Site URL > your URL / Label post
  6. Click Save Menu and that is all.

Dropdown Menus

The dropdown menu will only appear on 1600px / 1200px screens and will not appear on mobile screen parts of the page

LinkList Gagdet

  1. Go to Layout > Menu - Main Menu > Featured and click icon 
  2. Add A New Item :
  3. Site name > your text menu
  4. Site URL > your URL / Label post
  5. Click Save Menu and that is all.

Header Menu Widget (Header Right Only)

You can display a search widget, link menu and URL button.

Configure Header Menu Right

Determine some of the links you want.
  1. Go to Layout > Header Widget.
  2. Click icon 
  3. Configure widget:
    • Add A New Item for new URL
    • Site name Your text
    • Site URL The URL link you set.
      4. Click Save.

Fixed Menu (Only Smartphone)

This link menu will only appear on the 640px / 768px portion of the mobile screen. To configure it, follow the steps below.
  1. Go to Layout > Menu Mobile (Fixed) > Menu Mobile.
  2. Add A New Item :
  3. Site name > your text menu
  4. Site URL > your URL / Label post
  5. Click Save & Publish.

Seting Up Your Homepage

There are a few ways of setting up your home-page based on what you need:
  1. Default Homepage > For all the simple blog homepages shown on our demo.
  2. Widgetized Label Homepage > Our default Homepage is built using this method. It's for advanced users but offers several widget post you can use on homepage.

Method 1: Default Homepage

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 Label 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 > Page Content.
  2. Add a Gagdets type HTML/JavaScript, click Widget
  3. Use the post labels on your blog :

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

Widget Slider Populart Post

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

  1. Go to Layout > Page Body > Populart Post Widget.
  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.

Widget Image Slider

You can set and add banner images for post page promotions.

  1. Go to Layout > Image Caraousel > Add a Gagdet > Images.
  2. Setting :
  • Title is Your title Widget
  • Caption is Your text description
  • Link is Your URL post
  • Image is Your image, Upload or Input URL (Recommended : Size 1600px X 1000px

Setup Main Post

Access your blog Layout > and click in the Blog Posts gagdet 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 description in post.
  3. Author format > Writing from the author.
  4. Label text format > Recent post title in the post.
  5. 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}
    4. 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

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
  5. Add Image Thumbnail

Add Image Thumbnail

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: 260x360 minimum (width x height).

Post Video Format

There are 2 ways to create a video format post, please choose one below.

Add Video External

You have to copy the code below to be able to display the video.
<iframe class='lazyload' data-src="YOUR_URL_VIDEO" src="YOUR_URL_VIDEO" title="Video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
Copied!

Add Video Youtube

  • Select a Youtube video and click the Share button > Embed. Copy the youtube embed code. See example image below:
  • have to copy the code below to be able to display the video.
<div class='video' data-embed='CODE_EMBED_YOUTOBE'></div>
  • Correct code example >
<div class='video' data embed='AmTUaFdTETc'></div>

Add Button Download Link


Write the button text you want. then click enter link and Add your URL. See example image below :

Add Information


If you want to add video information, for example: Format / HD / Episode and others.

You can set post location.

Publish your Post. 

Adding Pages

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

Adding Google Maps to Contact Page

To add Google Maps:
  1. Go to Layout > Widget Menu Mobile.
  2. Widget Menu Mobile is the main left menu mobile. 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.

Footer Setup

This template comes with a footer that is divided into two parts, Upper Footer and Lower Footer.

Footer Info

The top footer consists of the website information Widget Area. To set widgets:
  1. Go to Layout > Footer Info
  2. Setting :
  3. Text Gagdet > Information about your website.
  4. Button footer > URL of your media and other.

Footer Menu Link

Go to Layout > Widget Footer Link
Edit or Add the links you want to display

Footer Attribute

Lower footer is best used for simple copyright message and has a back to top functionality.

  1. Go to Layout > Footer Attribute.
  2. Open your widget Copyright and Enter the copyright message.
  3. Open your widget Temabanua and Enter the copyright title and URL.
  4. Save & Publish.

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

Copyright & Credits

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

Resources Used

  • Bootstrap
  • jQuery
  • Material Icon.