Nakshatra Template

Many of my blog readers requested to publish the theme that I'm currently using in this blog or at least to announce its name. Although it is inspired from the ocean of templates over the internet, it is completely self-designed. The core of this theme was designed back in 2014; and from then it is consistently modified. For personal purpose, codes related to syntax highlighting, social content locking etc. are used in this theme, which are obviously unnecessary for any ordinary blog; even some snippets of this theme are hard-coded. So when I got the request, it took me some time to remove all unnecessary contents and make the entire theme dynamic. When it became finally ready to produce, it was again a period of hesitation for naming. Finally after some struggle, I came up with Nakshatra (means Star). This theme is rich in feature, fast in loading and awesome in appearance.

Preview

Features

1. Responsive: Helps your blog elements automatically adjustable with the user's devices.
2. SEO Ready: Get visitors from search engines easily by creating some good quality content.
3. Compatibility: With all major modern browsers
4. Widgets: Equipped with all common widgets like Pagination, E-mail subscription, Contact form, Automatic Read More, Related Posts Widget etc.
5. UI Elements: Equipped with commonly used UI elements like button, input, message box etc.

Installing the theme

1. Download this theme in your hard drive and Extract/Unzip it.
2. Log in Blogger dashboard and browse to that blog for you want to change it's theme.
3. Select Theme in left navigation menu and click on Backup/Restore.
4. Before uploading a new theme, backup your existing one, so that if you face any trouble at later stages, the backup file will help you to restore.
5. Click Choose file button and select the downloaded xml file from your PC.
6. Hit Upload button. The template should appear in your blog successfully.

Download

Downloaded times

Setting up the Stage

After successfully installing theme for blogger, it is time to customize its content (and appearance). Perform the following in the dashboard of the relevant blog.

Mobile Setup

Although this hardly makes any difference, it is recommended to select mobile theme to display on mobile devices. To do this, select Theme form left navigation menu, and click on gear icon next to mobile preview frame. On appearance of mobile theme selector window, choose mobile theme to display on mobile devices, select Custom theme in the drop down menu and hit Save.

Header Setup

Select Layout from left navigation menu, find Header gadget and click on Edit. On appearance of pop up window titled as Configure Header, fill every field carefully according to your blog (should have been done already). For header logo, first remove the existing one by clicking Remove Image, and then upload new image from your PC or web-URL. An image of at least 200x200 resolution is recommended for better appearance.

Navigation Menu Setup

In Layout section, find Navigation Menu gadget, and click on Edit. On appearance of Configure Link List window, edit existing menu items or insert new menu items. To edit existing one, click on Edit adjacent to it, enter new Name and URL and hit Save. To add new item in menu list, fill New Site Name and New Site URL and hit Add Link.

To add icon to your menu item, insert fontAwesome icon name without fa- within curly braces just before item name, e.g. {cogs} Widget.

Social Links

In Layout section of your dashboard, click Edit on Follow Me gadget. In the Configure Link List window, edit existing social links or add new social links. Social icons will appear automatically if your social brand exists in fontAwesome icon repository.

Social brand name should be inserted in lower case.

Color Theme (optional)

Select Theme in left navigation menu, and click on Customize. On loading of Blogger Theme Designer window, select Background from left menu and change theme color in Main color theme section. Additionally blogger theme designer suggests some relevant theme colors based on your current theme, from where you can pick a color if it suits your need.

Let the Play begin

You're all set! It's time to compose. You can start writing blog post in any mode you prefer; though a little bit knowledge of HTML (just the HTML) can make use of this theme at its best. Before moving on, it's worth taking a look in the UI element features.

Message Box

Available in five shades; default (color changes with theme), warning, danger, success and info. Use message class to display default dialog, and both message and message-{type} class to display any other particular message dialog.

<div class="message">Default Message</div>
<div class="message message-warning">Warning Message</div>
<div class="message message-danger">Danger Message</div>

Buttons

Similar to message box, it is also available in five categories; default (color changes with theme), warning, danger, success and info. Apply button class to display default button, and both button and button-{type} class to use any other particular button. This feature can be used with elements like div as well as a (anchor), button etc.

<div class="button">Default Message</div>
<a href="#" class="button button-success">Success Message</a>
<button class="button button-info">Info Message</button>

Inputs

This theme includes several predefined input styles like default, error, success and disabled. Add form-input class to your input element to produce default style. Along with that, include form-input-{type} class to display any particular style.

<input class="form-input" name="" placeholder="Default" type="text" value="Default" />
<input class="form-input form-input-error" name="" placeholder="Error" type="text" value="Error" />

Checkboxes

Wrap form checkbox input and label elements with form-checkbox class.

<div class="form-checkbox">
  <input id="checkbox1" name="checkboxes" type="checkbox" value="" checked />
  <label for="checkbox1">Unchecked</label>
</div>

<div class="form-checkbox">
  <input id="checkbox2" name="checkboxes" type="checkbox" value="" />
  <label for="checkbox2">Checked</label>
</div>

Radios

Similar to checkbox, place radio input and label elements inside form-radio class.

<div class="form-radio">
  <input id="radio1" name="radios" type="radio" value="" checked />
  <label for="radio1">Radio Off</label>
</div>

<div class="form-radio">
  <input id="radio2" name="radios" type="radio" value="">
  <label for="radio2">Radio On</label>
</div>

This theme is absolutely free and should not be sold by any blog or website. If you face any problem to set up this theme, let me know. Also you are not forced to, but if possible subscribe to Bloganalyzer as your respect to the hours of hard work for free. It helps to sustain my work and keep Bloganalyzer running.
If you found any bug, please do inform me. Also share this theme and comment your feeling.
Happy Blogging.