Kuuyhaa: Features, Widgets, and Configuration Guide
Before you begin: This article demonstrates the complete set of compose styles available in GenXora v1.0. Standard text, headings, lists, and images can be created in Blogger's writing view, while interactive blocks should be inserted from HTML view.
Image with Caption
Use a figure when an image needs a description that remains visually connected to it. The caption is displayed below the image and is not treated as part of the main article paragraph.
Manual Related Post
This block is added manually, allowing you to place relevant links exactly where readers need them. It can contain any number of internal articles and its heading can be customized.
Post Break
A decorative break separates major discussions, creates breathing room, or marks a change in subject without adding another heading.
The article continues here with a fresh section while maintaining a consistent reading rhythm.
Paragraph with Text Indent
This paragraph begins with a first-line indent. The style works especially well for essays, reviews, editorial writing, and longer narrative articles where a traditional reading format is preferred.
The same class can be applied to several paragraphs when the article requires consistent indentation throughout a section.
Paragraph with Drop Cap
GenXora includes a decorative drop cap for feature stories and magazine-style introductions. It enlarges the first letter while allowing the remaining text to flow naturally beside it.
Blockquote
Good interface design helps readers focus on information instead of noticing the interface itself.
— GenTemplates
A second quote style can be used for longer statements, lists, or highlighted explanations.
A flexible Blogger theme should remain easy to manage after installation.
- Widgets should stay editable from the Layout page.
- Theme colors and widths should remain configurable.
- Article components should adapt to mobile screens.
Table
Tables are responsive. When the content becomes wider than the available space, the table area can be scrolled without breaking the article layout.
| No. | Feature | Location | Editable From | Responsive | Dark Mode |
|---|---|---|---|---|---|
| 1 | Hero posts | Homepage | Layout widget | Yes | Yes |
| 2 | Popular Posts | Sidebar | Blogger widget | Yes | Yes |
| 3 | Search popup | Header | Template settings | Yes | Yes |
| 4 | Footer columns | Footer | Layout widget | Yes | Yes |
Syntax Highlighter
Code blocks are useful for tutorials, template documentation, and configuration examples. The language label is shown automatically by the selected class.
<section class="feature-card"> <h2>Build with GenXora</h2> <p>A responsive Blogger interface.</p> </section>
Inline code can also appear inside a sentence, for example <div class="note">.
MultiTabs Syntax Highlighter
Use syntax tabs when one example requires HTML, CSS, and JavaScript in the same section.
<button class="button">Open Demo</button>
.button { padding: 12px 18px; border-radius: 8px; }document.querySelector('.button').addEventListener('click', function () { console.log('Demo opened'); });Show Hide Button
A compact spoiler block can hide optional instructions, answers, or supporting details until the reader chooses to open it.
Optional configuration details
Open Blogger Layout to replace hero article URLs, reorder sidebar widgets, edit footer links, and update social profiles without rebuilding the template structure.
Accordion / Toggle Menu
How do I change the main content width?
Open Theme, choose Customize, then adjust the supported width variables in the Advanced section.
How do I select posts for the hero banner?
Open each hero HTML widget from Layout and replace the URL stored in the data-post-url attribute.
How is dark mode activated?
Readers can use the header toggle. The selected preference is preserved by the template script.
Which areas remain Blogger widgets?
The sidebar, footer columns, labels, Popular Posts, profile, advertisements, and hero URL containers remain manageable through Layout.
Note Block
Information blocks highlight helpful context without interrupting the article flow.
Tip: Create a backup before editing the XML template, even when the change appears small.
Warning: Do not rename trigger labels such as Sponsored or Fullpage unless the matching template conditions are updated too.
External Link
Use the external-link style to show that a destination opens outside the current blog: Visit GenTemplates.
Button Link
Primary and alternative buttons can be used for calls to action, documentation links, previews, and downloads.
Standard Button Alternative StyleButtons can include built-in icons:
Download Live DemoTwo actions can also share one centered bar:
Download Link
Lazy YouTube
The lazy YouTube component delays loading the video iframe until it is needed, helping the initial article load remain lighter.
halo
BalasHapus