LiteSpot is a fast, modern, and very easy-to-customize theme designed specifically for Blogger. It allows you to design your website professionally and make it fully responsive across all devices without touching a single line of code. From the header to the footer, everything can be controlled directly from the Blogger dashboard using the layout options.
This theme is ideal for both beginners and professionals. I have personally used it, and it is one of the best Blogger themes. In this article, I will guide you, how to set up every widget and properly design your homepage. I have also shared some tips to make your website user-friendly and improve its speed. For your convenience, I have added screenshots and videos as references. By the end, you will be able to fully customize our LiteSpot theme and create a clean, well-organized, and professional homepage.
Table of Contents
- Header Section Widgets Customization
- Ticker News (Trending Bar)
- Featured Post/News (Hero Section)
- Homepage Content Sections (Category Blocks)
- Main Blog Posts Widget
- Right Sidebar Widgets
- Related Posts Widget
- Comments Widget
- Footer Widgets
- Final Tips for Customizing LiteSpot
- Top 5 FAQs (2025) for Customizing LiteSpot Theme from Layout
1. Header Section Widgets Customization:
The header is the first part of any site that visitors notice. LiteSpot divides it into widgets for logo, navigation menu, and header container.
1.1 How can we add a header logo:
The Header Logo widget displays our website branding at the top of every page.
How to edit this:
Þ Go to Blogger Dashboard → Layout Option
Þ Find the Header Logo widget in the layout option mostly appears at the top
Þ Click the Edit (✏) pencil icon
Þ Upload your logo image or use text for your site name, and add alt text and description if available
Tips for SEO and UX:
☑ Use a PNG, SVG, or WebP file for clarity
☑ Add alt text like “Our Site Name or Logo” for accessibility
☑ Keep the file size under 50 KB; if we use a large image, then the speed of the website will slow down
1.2 Header Menu (Navigation Bar) Designing:
The Header Menu widget allows visitors to navigate your site easily. It can include pages, categories, and links to label pages.
How to edit:
Þ Go to “Layout Option in Blogger Dashboard” → We will see “Header Menu (Link List).”
Þ Add menu items with a title + URL or by label, depending upon the website owner.
Þ Drag items to arrange them in order.
Þ To add the Home page to the menu, click on “Add Item.” Now write “Home” in the Site Name field and paste your website’s homepage URL in the URL field. You can also use {homepage} if your theme supports it. This code does not work in all themes.
Þ For the mega menu, click on “Add New Item,” then enter the name you want according to your website niche — for example, Online Courses, SEO, or anything else. In the URL field, put this code: {getContent} $label={Your Label}. Replace “Your Label” with the label you want to use, and then save it.
Þ To add any other category, again click on add new item. In the name field, write the name of the category or label, and add the link of that category or label tag in the URL field.
Þ To add a sub-menu or subcategory, add it in the name field category or label as (_your category). Add keep it below the main category.
Best practices:
Þ Keep menu links short and descriptive
Þ Include main categories and essential pages: Home, About, Contact, Privacy, Blog, so users understand our website structure.
Þ Limit primary menu items to 5–7 for a clean look not add more items in the header menu; otherwise, it will not remain responsive for all devices.
1.3 Header Section Container Option:
This is the structural widget that groups the header elements (logo & menu) into a row.
Tips:
☑ Drag child widgets inside the container to re-arrange them well
☑ Align header elements as center, left, or right, depending on theme options
☑ Keep it simple to improve page speed and mobile experience for users
2. Ticker News (Trending Bar):
The Ticker News widget displays scrolling trending, recent, or popular posts. This makes your site more professional and displays important updates.
How to edit this option:
Þ Go to Layout Setting → then find Ticker News in theme options. Click the pencil icon pop-up will appear.
Þ Enter (label, recent, or popular) such as Trending
Þ Add posts to that label for automatic display, and random or popular post pick automatically, not depending on the label
Tips:
☑ Keep headlines short and clear (5–8 words)
☑ Limit to 3–5 items for readability
☑ Use it for important news, posts, featured articles, or important announcements
3. Featured Post/News (Hero Section):
The Featured News widget displays 1–3 important posts on the homepage. This hero section captures attention, which helps maintain strong user engagement.
How to edit:
Þ Go to Layout Blogger Setting → Featured News/Posts → Click on pencil icon
Þ Select a label such as popular, random, or recent. These labels work in this theme for the feature post widget
Þ Choose the number of posts and thumbnail size totally depends upon us
Tips:
☑ Use high-quality images in the next generation as WebP (1200×675 recommended)
☑ Feature best content or high-performing posts
☑ Update featured posts after a fix period to keep the website homepage fresh and clean
4. Homepage Content Sections (Category Blocks):
LiteSpot uses content sections to display posts by label, creating a beautiful, different grid layout for the homepage.
4.1 Example Labels:
✪ SEO Course
✪ Online Earning Courses
✪ Laptops
✪ Technology
✪ Google AdSense
In your case, you will add labels that you assigned to your own posts.
How to edit each category section:
Þ Go to Layout in the blogger dashboard
Þ Find widgets labeled Content Section 1, Content Section 2, or category names
Þ Click on the Edit option or the pencil icon
Þ Select a label/category to display posts and set the grid option. {getContent} $results={Number of posts} $label={Your Label} $type={block}. This theme supports types of grid, list & video.
Þ Choose the number of posts you want to display on the homepage from this category you set here
Tips:
☑ Focus each category section on a single topic for clarity, not mixing posts
☑ Limit posts per section to 3–5 for better load speed and a better good
☑ Use clear, descriptive headings for category posts that describe the post in this grid section
4.2 Recommended Label Usage:
If you have blog niche online courses, then you may write category labels as shown below
✪ SEO Course → All SEO tutorials and guides appear in this section
✪ Online Earning → Posts related to earning online appear here
✪ Videos → Posts containing video tutorials will be displayed in this category section
✪ Laptops / Technology → Product reviews or technical posts
5. Main Blog Posts Widget:
This widget lists your latest blog posts, making it the middle part of the homepage.
How to edit:
Þ Go to Layout → Blog Posts widget section
Þ Configure the number of posts per page, usually 7 to 10
Þ Enable thumbnail images and excerpts
Þ Set the “Read More” button style or infinite scroll, depending upon themes
Tips:
☑ Show 5–7 posts per page for a balanced homepage
☑ Keep excerpts 20–40 words for modern design
☑ Include post date and author to build trust
6. Right Sidebar Widgets:
The sidebar helps visitors explore content and find key sections. In this theme, only the right sidebar option is available. You add items in this sidebar that you want, but I use items that are listed below.
6.1 Follow Us:
Add the social media profiles item and add your social profile links.
How to edit:
Þ Blogger Layout →
Follow Us Item → Add Follow us & Insert links of your profiles
Tip:
☑ Include only active platforms to maintain engagement, not add unnecessary profiles or more links.
6.2 Popular Posts:
Shows posts with the highest views or engagement.
How to edit:
Þ Layout → Popular
Posts → Number of posts
Tips:
☑ Show 3–5 posts
☑ Use thumbnails/Feature images for a better look and for more clicks
6.3 Labels / Main Tags:
Add blog categories for easy navigation.
How to edit:
Þ Layout → Labels →
Choose list and also add the number of posts displayed on the category
Tips:
☑ Focus on top-level categories
☑ Avoid displaying a large number of tiny labels
6.4 Search Box:
Add a search box so visitors can search for content that they want if they do not find it in the menu
How to edit:
Þ Layout →
Search Box → Customize placeholder text
Tip:
☑ Place it at the top of the sidebar for visibility.
6.5 About Me / About Us Widget:
Introduce yourself to readers to build trust. This Section in this theme is at the bottom of the footer section.
How to edit:
Þ Layout → About Me (In
Footer Place) → Add short bio + image
Tips:
☑ 2–3 sentences describing you or your site
☑ Add a profile photo to make your presence look more professional
7. Related Posts Widget:
Show similar posts below the article. When any user comes to any post on the website, the chances of clicking on similar posts also increase. This reduces the bounce rate.
How to edit:
Þ In Layout (Go to) →
Related Posts (then) → Number of posts, thumbnail image on/off
Tips:
☑ Show 3–4 posts
☑ Use label-based matching for accuracy
8. Comments Widget:
Show the latest comments to encourage users to participate.
How to edit:
Þ Blogger Layout
(Option) → Comments → set number of comments to show
Tips:
☑ Manage comments regularly to remove spam
☑ Show commenter name and avatar for trust
9. Footer Widgets:
The footer provides secondary navigation and trust elements.
9.1 About Us:
Here we have to display our site's purpose or mission.
How to edit:
Þ In Blogger Layout →
Footer About Us → Add description + image (optional)
9.2 Footer Follow Us:
Footer social icons help visitors reach your profiles easily.
9.3 Footer Menu:
Add links to important pages:
✪ Privacy Policy
✪ Terms & Conditions
✪ About
✪ Contact
How to edit:
Þ Layout → Footer Menu
(Link List)
9.4 Footer Copyright:
Displays site name and year.
How to edit:
Þ Layout → Footer
Copyright → Enter text of legal and important pages
Tip:
☑ Update year annually for accuracy.
9.5 Cookie Consent Widget:
LiteSpot includes a built-in, AdSense-safe cookie notice.
How to edit:
Þ Layout → Cookie
Consent → Customize message, link to privacy policy, colors, button text
Tips:
☑ Keep the message short and clear
☑ Ensure the accept button is visible
☑ Do not block content permanently
Cookies Best Code With Visible Text and Color Ratio:
Add ad this script in theme > HTML > Above </body> tag:
Final Tips for Customizing LiteSpot:
Þ Use Regular labels across posts for better Related Posts and content sections
Þ Keep homepage sections clean with 3–6 posts per block/section
Þ Update Featured News/post section and Ticker section time to time
Þ Optimize images for fast loading. Add the lazy load attribute to the image link
Þ Include alt text and descriptive headings for SEO
Þ Keep sidebar short but functional; don’t overload with too many widgets
Þ Use About and Follow Us sections to improve EEAT and user trust
Þ Ensure cookie notice is AdSense-compliant and readable
By following this guide, you can fully customize your LiteSpot Blogger homepage using only the Layout panel. This setup creates a professional, fast, and user-friendly website ready for SEO, AdSense, and long-term growth.
Check Final Result After Customization
Top 5 FAQs (2025) for Customizing LiteSpot Theme from Layout:
How do I change the homepage sections in the LiteSpot theme?
You can customize all widgets in the LiteSpot theme directly from the Layout section without using any coding. Your entire website can be fully designed just from the Layout panel.
Why are my icons not showing after adding them to the article or layout?
Make sure you are using “SVG or PNG” icons because some old font-based icons do not load or display properly on Blogger themes, such as older versions of Font Awesome. Using SVG will fix your icon visibility issues.
How can I change the color scheme and fonts without editing the HTML?
In the Blogger dashboard, click on Theme, and you will see the Customize option — click on it. A new window will appear with options on the left and a website preview on the right. From here, you can change the complete theme colors and fonts without any coding.
How do I add custom ads in the LiteSpot theme layout?
To add ads, you need to go to the Layout section and add an HTML/JavaScript widget. You can place ads in different locations such as the header, sidebar, or footer. Simply paste your ad code into the HTML/JavaScript widget and click saves.
Why is my Featured Post or Slider not showing on the homepage?
The reason for this issue might be that you did not add the correct label. Check the label you entered and make sure the posts you want to show in that section are published.