Nevanto is a modern, magazine-inspired Blogger template built for readable articles, clear navigation, and a flexible editorial homepage. Its dark header, warm cream accents, and lively lime-green details provide character without distracting from the stories themselves. This guide explains the setup and controls implemented in Nevanto v1.0.

Unlike a static landing-page theme, Nevanto works with Blogger’s native posts, labels, popular posts and gadgets. You can choose a list or grid homepage, configure drop-down navigation, and use an article layout with author details, sharing, related posts and deferred native comments. Most day-to-day edits happen in Layout or Theme → Customize.

1. Before You Start

• A Google account with access to the intended Blogger blog.
• A compatible Nevanto XML theme file extracted from the downloaded archive.
• Your previous theme backup and a record of any important custom gadgets or scripts.
• Several published articles with descriptive titles, labels, and featured images to test the layout.

2. Install Nevanto on Blogger

1. Sign in to Blogger and select the correct blog.
2. Open Theme; from the current theme menu choose Backup and keep the XML file.
3. If the Nevanto package is a ZIP, extract it first and locate the .xml theme file.
4. From Theme, open the theme menu and choose Restore, then upload the Nevanto XML file.
5. After Blogger applies the theme, open the homepage and a sample article. Check the header, post cards, sidebar and footer.
6. Open Layout and inspect the installed widgets before making changes.

3. Find Your Way Around Blogger Layout

Nevanto retains Blogger’s widget system. A section may contain an editable gadget, while other entries are reserved for the template’s internal behavior. Avoid removing locked or hidden widgets as part of routine cleanup.

4. Theme Designer: Layout and Colors

In Theme → Customize, Nevanto exposes defined Blogger theme variables. The switches below are implemented as two-state length variables (0px and 1px) in the XML; their presentation depends on Blogger’s customization interface.

Additional variables cover title, meta, text and border colors; search and submenu styling; mobile menu; footer and footer bar; button colors; widget title size; and article heading/body sizes. Make one change at a time, save, and review desktop and mobile.

5. Set the Logo and Header

1. Open Layout → Header Logo and edit the image gadget.
2. Use a legible transparent PNG or another image format suitable for logos, or use a text title if preferred.
3. Save and review both desktop and mobile, including the slide-out mobile panel.
4. Use Theme → Customize to adjust the header colors or height if needed.

The XML caps desktop logo height at 40px; its mobile logo rule targets an approximately 100px-wide display, so a sharp source file matters. Fixed Menu does not mean a permanently pinned header: Nevanto includes scroll-aware show/hide styling for the fixed state.

6. Build the Main Menu and Nested Dropdowns

Edit Layout → Header Menu. The menu parser uses underscores at the beginning of the link name to identify hierarchical levels. The sequence of items matters: place children directly after their parent, and keep the widget’s sorting set to Don’t sort.

Home                /
Features            #
_Featured Posts     /search/label/Featured
_Post Layouts       #
__Full Width        /p/full-width.html
__Left Sidebar      /p/left-sidebar.html

The names above are format examples. Replace destinations with your own existing URLs. Avoid empty navigation items unless intentionally used as menu parents. Desktop dropdowns are hover driven; mobile users expand nested links through dedicated submenu controls.

7. Configure the Secondary Header Bar

Open Layout → Header Bar to edit the category link list directly beneath the primary header. Use clear label destinations such as /search/label/Technology. On narrow screens the bar scrolls horizontally, rather than forcing each category onto a second line. Its warm background is configured independently from the dark header.

8. Understand the Mobile Menu

At viewports around 980px and below, Nevanto replaces the desktop menu with a hamburger control and a sliding navigation panel. The panel supports nested menu expansion, a close control, and footer-style links. Test top-level links and nested links on a real phone; do not assume desktop hover behavior maps directly to touch.

9. Latest Posts: List vs Grid

The homepage uses Blogger’s native published-post feed. Newer posts generally appear first according to Blogger publishing order, with individual cards showing title, featured image, available author/date metadata, and optional excerpts. The XML explicitly generates excerpts of up to 130 characters and applies visual clamping in the card styling.

1. Open Theme → Customize.
2. Find the Blog Posts → Grid Style option.
3. Set your preferred mode, save, and check the homepage.
4. Open Settings to review Blogger’s maximum posts shown on the main page; this is separate from the card styling.

10. Load More Pagination

Nevanto uses a Load More control for additional posts. It uses Blogger’s older-page URL and a script-driven content loading flow rather than automatic infinite scrolling. When no more items are available, the template can show a no-results state. If the button fails, test whether the next Blogger page is reachable and whether custom scripts are blocked.

11. Sidebar, Popular Posts and Labels

The sidebar may contain Blogger’s native Popular Posts gadget, styled with a larger cover card for the first entry and numbered entries for the remainder. Ranking comes from Blogger’s Popular Posts source—it is not a manually chosen featured article. Adjust its time range and item count through the widget editor, where Blogger provides those options.

Nevanto supports Labels in list and cloud presentations. List mode places counts beside names; cloud mode forms a two-column grid with circular count badges. Add labels to posts first, then configure the Labels gadget and enable counts if you want them displayed.

12. Single Article Layout and Search Description

An article page can show breadcrumbs, a prominent title, author portrait and date, social sharing, body content, labels, author biography, related posts, navigation, comments and advertising slots. The highlighted Search Description panel directly below the heading is specific to this implementation.

1. Edit a post in Blogger.
2. Under Post settings → Search Description, write a distinct, useful summary for that individual article.
3. Update or publish the post, then view it.
4. When the article-specific description is missing or not meaningfully distinct from the blog description, Nevanto is intended to omit the visible description panel.

13. Sharing, Related Posts and Navigation

Article sharing includes visible buttons and an expanded share modal with a copy-link control. XML markup includes Facebook, X, WhatsApp, email and further share destinations such as Pinterest, LinkedIn, Reddit, VK, Tumblr and Telegram. These share the current article; social profile links in the footer serve a different purpose.

The Related Posts HTML gadget is under Layout → Related Posts, with its default title You might like. Its content contains the verified result-count shortcode below. The script selects posts using post-related information and can return no results when relevant public entries are unavailable.

$results={3}

1. Open Layout → Related Posts.
2. Edit the gadget title if you want different wording.
3. Keep the shortcode format and change only the result number if necessary, for example $results={4}.
4. Save and test an article with a few published posts sharing related labels.

The Post Navigation option in Customize controls previous/next article links. Their availability depends on neighboring published posts.

14. Native Blogger Comments with Deferred Loading

Nevanto has a Post a Comment / comment-count button that delays the comment area until a reader requests it. Clicking it loads the underlying native Blogger comments and form into the page; this is more than simply concealing a preloaded block. The browser may still request supporting comment resources after activation.

1. Open Blogger → Settings → Comments and select appropriate moderation and commenting permissions.
2. Publish a test post and open it as a visitor.
3. Click Post a Comment and verify existing replies and the form appear.
4. If the form fails, test while signed into an allowed Google account and check privacy or browser iframe restrictions.

15. Ads and Monetization

The XML includes conditional AdSense script support when Blogger provides an AdSense widget or client ID, plus controls for Top ADS, Footer ADS and an in-feed advertising area. These are possible placements—not AdSense approval, eligibility or earnings guarantees.

• Use Blogger-supported advertising settings or the corresponding widget/slot only when you have valid ad code.
• Reserve sensible space for advertising to reduce layout shifts.
• Avoid ads that interrupt the first screen or conceal article navigation.
• Check the live result on phones and desktops after changing ad settings.

16. Footer: About, Social and Navigation

The footer uses a warm cream background, an About Section with image/logo and caption, a Link List for social profile links, and a separate Footer Menu. Edit the visible content through the respective Layout gadgets. Social icons are generated from supported lowercase platform names such as facebook, x, instagram and youtube. Retain the template attribution and credit.

17. Write and Publish a New Article

1. Open Blogger → Posts → New Post.
2. Write a useful, specific title and a helpful introduction.
3. Insert headings, paragraphs, relevant images, and other content.
4. Add one or more accurate Labels.
5. Add a featured image and descriptive alt text.
6. Choose a readable custom permalink where appropriate.
7. Write a unique Search Description and preview the page.
8. Publish, then check Latest Posts, label archives, mobile spacing, sharing and comments.

18. Article Typography and Built-in Components

Nevanto styles standard headings, text, ordered/unordered lists, blockquotes, tables, preformatted code, YouTube embeds and button links. The following examples use classes found in Nevanto XML; these are for posts published with Nevanto, not the Plus UI components used to style this documentation page.

Colored notification messages in Nevanto

<div class="alert-message alert-info">Helpful information for readers.</div>
<div class="alert-message alert-success">Your setup is complete.</div>
<div class="alert-message alert-warning">Back up your theme before editing.</div>
<div class="alert-message alert-error">Please check the input and retry.</div>

Article buttons in Nevanto

<a class="button btn preview" href="/p/demo.html">Preview</a>
<a class="button btn download" href="/p/file.html">Get File</a>
<a class="button btn link" href="/p/resources.html">Resources</a>
<a class="button btn info" href="/p/about.html">More Info</a>
<a class="button btn contact" href="/p/contact.html">Contact</a>

The template also provides a pre-based code appearance; keep code snippets properly escaped when pasting them in Blogger HTML view.

19. SEO and Structured Data

Nevanto contains canonical URLs, dynamic meta descriptions, Open Graph and Twitter Card fields, viewport metadata, and JSON-LD for WebSite/SearchAction, BreadcrumbList, and NewsArticle where applicable. Image and author metadata appear in supported contexts. Valid markup does not guarantee indexing, rich results or ranking improvements.

• Write original titles and descriptive Search Descriptions.
• Use semantic H2 and H3 sections in long posts.
• Give informative images meaningful alt text.
• Keep internal links accurate and category pages useful.
• Review Search Console for crawl and structured-data feedback.

20. Performance and PageSpeed

The XML implements WOFF2 fonts with font-display:swap, selected preconnections, resize-aware Blogger thumbnail URLs, an eager high-priority first post thumbnail in supported contexts, lazy loading for less urgent images, and delayed native comment loading. Icons use both Material Icons Round and inline SVGs; Nevanto therefore still relies on some external font resources.

For a repeatable test, use the provided desktop PageSpeed Insights report and retest the actual site after adding content. The accessible report did not expose numeric scores reliably, so no score is stated here.

LCP tracks the largest visible content render; CLS tracks unexpected layout movement; INP measures interaction responsiveness. Avoid unnecessarily huge images, excessive advertisements and additional blocking scripts. Scores vary with page content, connection and test conditions.

21. Localization and RTL Support

The template includes RTL layout rules and several locale-dependent interface labels, including post navigation and Load More strings. This is not proof of an automatic full-site translation engine. Test right-to-left languages, dates and menu nesting before public launch.

22. Troubleshooting

23. Frequently Asked Questions

24. Final Setup Checklist

• Back up the previous theme and install the original Nevanto XML.
• Review Header Logo, Header Menu and Header Bar widgets.
• Choose list/grid presentation, colors and widths.
• Configure sidebar Popular Posts and Labels.
• Set footer social links and site information.
• Publish a test article with image, labels and a unique Search Description.
• Check Related Posts, sharing, post navigation and deferred comments.
• Test mobile navigation, page speed and ad placements.
• Confirm your site’s search/indexing configuration in Blogger and Search Console.

For updates and other Blogger resources, visit BloggerTheme.net or return to the documentation hub.