Earn from Blogger with Google AdSense: the complete 2026 guide

You have a blog and you want it to earn too. Google AdSense is the easiest starting point for Blogger, but a lot of people get stuck at the application, or place ads so badly that they earn little and drive readers away. This article walks you through it step by step, from preparing your site for approval, to placing ads that earn without breaking the rules, to growing revenue sustainably.

Updated 18 July 2026   About a 14 minute read   Patpisan Dathong (Ben)

How AdSense works, and who it suits

Google AdSense is a service that lets you show ads on your site and earn a share of the revenue when readers see or click them. Google is the middleman that matches ads relevant to your content and your readers. You do not have to find advertisers yourself. You just add the code and the ads display automatically.

AdSense suits people just starting to earn from a blog, because it is easy to set up and you do not need your own products. That said, the revenue per click in general categories is often not very high, so AdSense works best for sites with a lot of traffic. Earning meaningful revenue therefore requires steady readers, which brings us back to doing SEO to rank on Google's first page. Good SEO is the engine that drives AdSense revenue.

Step 1: prepare your site for AdSense approval

The first hurdle many people hit is approval. Google decides whether your site is valuable enough to show ads. Here is what you need before applying.

1. Quality original content. Have several valuable, self-written articles that are not copied. Thin or copied content is the number one reason for rejection.
2. Complete key pages. You need About, Privacy Policy, and Contact pages, because they are trust signals.
3. Clear navigation. Have a menu, an organized structure, and internal links that make the site feel complete.
4. A genuinely usable site. It renders well on mobile, loads fast, and has no broken pages or dead links.
5. Apply through blogger.com. Go to the "Earnings" menu in Blogger and follow the steps to connect with AdSense.

Step 2: place ads that earn without breaking the rules

Once approved, the next job is placing ads that pay well without ruining the reader experience or breaking policy. There are three main placements that work well on Blogger.

The iron rule to remember is that content must always be the star. AdSense policy forbids ads being more numerous or more prominent than the content, and you must show an "Ad" label so readers can tell them apart. Handling all this correctly is easy with the BlogKub ad slot block, which prepares placements and labels in line with AdSense guidance.

Step 3: grow revenue sustainably

AdSense revenue = traffic × view/click rate × value per click. Growing revenue means looking at all three.

Grow traffic with SEO and content

This is the factor with the biggest impact. The more quality readers you have, the more the ads are seen. Writing content that answers people's questions and ranks on Google is an investment with long-term returns. Read how to do it in the Blogger SEO guide, and use features that get people reading multiple articles, such as related posts and latest posts, to raise pages per visit.

Keep readers longer and bring them back

Readers who stay longer and return see more ads and generate steady revenue, so a good experience ties directly to earnings. Features like an easy-on-the-eyes dark mode, a bookmark to save for later, and a table of contents that helps navigate long articles all deepen readers' bond with the site, which affects revenue over the long term.

Choose topics with high ad value

Some content categories have a higher value per click, such as finance, insurance, technology, and education. If your content is in these categories, revenue per click is often better than general entertainment. That said, choose topics you are genuinely good at and can write well, because content quality matters more than chasing ad value.

Mistakes that get your AdSense account in trouble

AdSense has strict policies, and violations can suspend your account and cost you all your revenue. Absolutely avoid these.

• Do not click your own ads or ask others to click them. Google's systems detect it and treat it as fraud.
• Do not place too many ads so that they outshine the content, or trick people into clicking by accident.
• Do not use policy-violating content such as plagiarized, illegal, or adult content.
• Do not buy fake traffic. Bot traffic or traffic from illegitimate sources violates policy.

In short, do everything honestly, let quality content draw real readers, and let the ads work naturally. That is the only sustainable path.

Revenue options beyond AdSense

AdSense is a good starting point, but it is not the only path and often not the highest-earning one. Look at other options alongside it.

• Affiliate marketing: recommend products and earn a commission when someone buys through your link. It suits review sites well. Use a Pros/Cons box and a CTA button to lead readers toward a purchase smoothly.
• Sell your own products or services: courses, ebooks, or services return far more per reader than ads.
• Sponsorships and paid articles: once the site has enough readers, brands may reach out for sponsored content.
• Donations and memberships: for sites with a tight-knit reader community.

The upside of having several channels is that you do not have to stuff the site with ads, and revenue is steadier because it does not depend on a single source. A site with a balanced mix is usually the most sustainable.

Wrapping up

Earning from Blogger with AdSense starts with preparing a site that has quality content and complete key pages so it passes approval. From there, place ads in the right spots while keeping content the star at all times and showing the "Ad" label per policy. Growing revenue sustainably means focusing on more quality traffic through SEO, keeping readers longer and bringing them back, and avoiding the mistakes that get accounts in trouble. Most important, do not rely on AdSense alone. Affiliate and other channels often return more and disrupt readers less. When you build a genuinely valuable site and protect the reader experience, the revenue follows sustainably. If you do not have a ready site yet, start building a Blogger theme with BlogKub for free right away.

Frequently asked questions (FAQ)

Keep reading

Read it on BlogKub →

Blogger SEO 2026: the hands-on guide to ranking on Google's first page

A lot of people assume Blogger cannot compete with WordPress on SEO. The truth is that you really can get a Blogger blog onto the first page of Google, if you know what to focus on. This article gathers every step that works in 2026, from the base settings and content structure all the way to getting AI to cite your content, with a checklist you can follow right away.

Updated 18 July 2026   About a 15 minute read   Patpisan Dathong (Ben)

What SEO on Blogger is, and why it still works well in 2026

SEO (Search Engine Optimization) is the practice of tuning your site and content so they appear as high as possible in Google's results for the terms your audience searches. On Blogger, SEO is no different in principle from any other platform, because in the end Google ranks "pages", not "platforms".

The belief that Blogger cannot keep up with WordPress is out of date. In reality, Blogger has several advantages. It belongs to Google itself, its infrastructure is fast and stable, it includes free HTTPS, and you never have to worry about security or plugins that slow the site down. The two things that used to be real limitations were customizing the design and theme structure, and adding schema data. Both are solved by a theme designed specifically for SEO, and that is exactly what the BlogKub theme builder handles for you.

What changed in 2026 is that Google has become much smarter. It no longer counts words or matches keywords literally. Instead it understands the "meaning" and "intent" of both the query and the content. On top of that, AI Overviews and other AI tools now pull content straight into their answers. This means modern SEO has to think beyond ranking. Your content has to be the "best answer" that both people and AI choose to use.

Step 1: set up the Blogger basics the SEO way

Before you think about content, lay a solid foundation. These basics are set once and pay off for a long time.

1. Turn on HTTPS. Go to Blogger settings and turn on both "HTTPS availability" and "HTTPS redirect", because HTTPS is a baseline ranking factor and builds trust.
2. Set the site meta description. Under settings, enable the search description and write a site description that clearly says what the site is about.
3. Set custom robots tags. Enable custom robots header tags so you can control indexing, and set posts and static pages to index, follow.
4. Submit your sitemap to Search Console. Connect the site to Google Search Console and submit sitemap.xml so Google can index it quickly and completely.
5. Use a fast theme that supports schema. The theme is the foundation of SEO on Blogger. Choose one that loads fast, renders well on mobile, and has schema built in.

Step 2: URL structure and naming your posts

The URL is a small signal that Google and readers both use to understand what a page is about. On Blogger, a post's URL comes from its "permalink", which you should set yourself rather than letting the system generate it automatically.

• Short and meaningful: a good URL conveys the topic. For example, /blogger-seo is better than /2026/07/post-title-123.
• Include the main keyword: put the article's main search term in the URL, but do not make it too long.
• Set it once, do not change it later: changing an already-indexed URL loses ranking. If you must change it, set up a redirect.

The post title is one of the most important on-page factors. A good title puts the main search term near the front, states the benefit clearly, and invites the click. For example, "Blogger SEO 2026: the guide to ranking on Google's first page" conveys the topic (Blogger SEO), the year (freshness), and the benefit (ranking on the first page).

Step 3: write content that both people and Google love (E-E-A-T)

Content is the heart of SEO. No technique can make up for bad content. Google assesses content quality with the E-E-A-T framework, which stands for Experience, Expertise, Authoritativeness, and Trustworthiness. This is what Google looks for in quality content.

Fully answer the search intent

Before you write, ask yourself what the person searching this term really wants. Someone searching "Blogger SEO" does not just want a definition, they want methods that actually work. Fully answering the search intent is the number one factor that gets content to rank. Write so the reader gets every answer they need on one page, without having to look elsewhere.

Show experience and expertise

Content that comes from real experience carries more weight than a shallow roundup of information. Include real examples, deeper insight, and a point of view others do not have. Say who wrote it, too, through an author page (About) that states their expertise, because Google values content it knows comes from someone who genuinely knows the subject.

Write so it is easy to scan

People read the web by "sweeping" their eyes, not reading every word. Organize your content with clear subheadings, short paragraphs, lists, and tables, so readers find what they want quickly. Having a table of contents helps both the reader and Google understand the article's structure, and increases the chance of getting jump-to-section links in the results.

Step 4: on-page SEO to do on every article

On-page SEO is tuning the elements inside a page to be search-friendly. Here is the list to run through every time you publish an article.

Of all these elements, internal links are the most overlooked and the most powerful. Linking between articles helps Google understand how your content relates, spreads authority across the site, and keeps readers on the site longer. Picture your site as a network where every page connects to the others, so whichever way a reader or a bot arrives, there is always a next step. Features like related posts, breadcrumbs, and anchor links build this network automatically.

Step 5: images and speed (Core Web Vitals)

Site speed is a direct ranking factor. Google measures it through Core Web Vitals, which has three main metrics.

• LCP (Largest Contentful Paint): the time for the largest element to finish loading, which should be under 2.5 seconds and is often affected by large images.
• INP (Interaction to Next Paint): how fast the page responds when the user taps, which should be under 200 milliseconds.
• CLS (Cumulative Layout Shift): how much content jumps around while loading, which should be low and often comes from images or ads with no set size.

Images are the number one cause of a slow site. Before uploading, resize them appropriately and compress the file, and always add a meaningful ALT. Read how to handle images properly in the image block guide. As for overall speed, a lightweight theme with no heavy scripts helps a great deal, which is a strength of a client-side theme like BlogKub.

Step 6: schema and structured data

Schema (structured data) is special code that tells Google clearly what the content on a page is, such as this is an article, this is the author, this is a breadcrumb. Schema helps Google understand the content more accurately and may surface a standout rich result in the search page.

The schema useful for a blog includes Organization and WebSite (identifying the site), BlogPosting or Article (identifying the article), BreadcrumbList (the navigation path), and ImageObject (the image). Writing schema yourself in Blogger XML is complicated, but a good theme adds it automatically. Every BlogKub template lays down these basic schemas, and features like breadcrumbs generate the BreadcrumbList schema for you.

Step 7: AEO and GEO, getting AI to cite your content

This is the part that separates a site doing old-style SEO from one that is ready for the future. In 2026, a lot of people find information through Google's AI Overviews, ChatGPT, Gemini, and Perplexity, which pull content from the web to summarize their answers. Getting your content chosen and cited in those answers is called AEO (Answer Engine Optimization) and GEO (Generative Engine Optimization).

The good news is that AEO and GEO share the same foundation as good SEO, just with a few added emphases.

• Answer directly and concisely: put a sentence that clearly answers the question at the start of each section, so AI can pull it in easily. For instance, open a section with a definition or a direct answer.
• Use question-style headings: phrase your H2/H3 as questions people actually ask, because AI looks for question-and-answer pairs.
• Include a summary box: a TL;DR box or an AEO summary box at the top of the article helps both readers and AI see the key point immediately.
• Include factual, citable information: numbers, steps, and concrete data are easier to cite than vague opinions.
• Build brand credibility: AI tends to cite sites with a clear identity, with about and author pages and mentions elsewhere.

Notice that the article you are reading uses all of these techniques. It has a summary box at the top, headings that answer questions, direct summary sentences, and an FAQ at the bottom. This is the structure that people, Google, and AI all like. Learn more about making content AI can cite in the AEO Summary Box guide.

Step 8: measure and improve with Search Console

SEO without measurement is like driving with your eyes closed. Google Search Console (GSC) is a free tool you must use. It tells you which queries your site appears for, how many people click, your average position, and which pages are indexed.

How to make GSC work for you:

1. Look at the Performance report. Find queries where the site ranks 5 to 20 (page 2) and improve that article, because it is close to reaching the first page.
2. Check Coverage/Indexing. See which pages are not yet indexed and fix the problem.
3. Look at CTR. A page that ranks well but gets few clicks may need a more compelling title and description.
4. Improve existing content. Updating old articles to be current and more complete often works faster than writing new ones.

Remember that SEO is a marathon. A new site usually takes 3 to 6 months before you see clear results. The key is consistency: keep publishing quality content, build a network of internal links, and improve based on real data.

Blogger SEO checklist (save it for every article)

• ☐ HTTPS is on and the sitemap is submitted to Search Console
• ☐ URL is short, has the keyword, and is set once
• ☐ Title has the keyword near the front, plus a compelling meta description
• ☐ Content fully answers the search intent and has E-E-A-T
• ☐ Structured with H2/H3 and a table of contents, easy to scan
• ☐ Internal links to related articles, placed naturally
• ☐ Images compressed and every image has an ALT
• ☐ Schema (Article + Breadcrumb) from the theme
• ☐ Summary box, FAQ, and question-style headings (AEO/GEO)
• ☐ Passes Core Web Vitals (fast, no jumping)

Wrapping up

Blogger SEO genuinely works in 2026, once you understand that the deciding factors are content quality and user experience, not the platform. Start by laying a solid foundation (HTTPS, sitemap, a good theme), then focus on content that fully answers the search intent and has E-E-A-T. From there, do the on-page work on every article, pay attention to speed and schema, and go one step further with AEO and GEO so AI cites your content. Finally, measure with Search Console and keep improving. Do every step consistently and your Blogger blog really can reach Google's first page. And if you want a theme that lays the SEO foundation for you without touching code, start building your theme with BlogKub.

Frequently asked questions (FAQ)

Keep reading

Read it on BlogKub →

How to start a free Blogger blog, from scratch to a beautiful theme (2026 beginner's guide)

You want a blog of your own but do not know where to start. Blogger is a free, easy option that belongs to Google. This article walks you through building a blog from zero, step by step, from signing up and naming it, to writing your first post, to customizing a professional-looking theme without writing a single line of code.

Updated 18 July 2026   About a 13 minute read   Patpisan Dathong (Ben)

Why choose Blogger as a beginner

Blogger is Google's free blogging platform that lets you build a site, write posts, and publish at no cost. It suits beginners best, for several reasons. It is genuinely free for both the platform and hosting, it comes with a .blogspot.com domain and HTTPS built in, you never have to maintain a server or worry about security, and it connects easily to other Google services like AdSense and Search Console.

Compared with starting on WordPress, where you pay for hosting and a domain and handle the technical side yourself, Blogger cuts the barrier to starting down to almost zero. So you can focus from day one on what matters most, writing valuable content. The one thing Blogger used to fall short on was the beauty and flexibility of its themes, which is now solved by a drag-and-drop theme builder, making Blogger a well-rounded choice for beginners in 2026.

Step 1: create your Blogger blog (under 10 minutes)

1. Log in with a Google account. Go to blogger.com and sign in with an existing Google account (or create one for free).
2. Create a new blog. Click "Create blog" and set a blog name (the display name). Choose one that reflects your content and is easy to remember.
3. Set the blog address (URL). Pick the .blogspot.com name you want, such as yourname.blogspot.com. Keep it short and related to your topic.
4. Confirm and enter the dashboard. Once created, you land in the Blogger dashboard where you manage everything: writing posts, settings, and customizing the theme.

With that, you have a blog that is genuinely online and reachable. But do not rush to write yet. Complete the basic settings first to lay a good foundation.

Step 1.5: keep the blog hidden until the content is genuinely ready

Nobody forces this step and skipping it is not a mistake, but it is one of the better-spent ten minutes of starting a blog, because it changes what Google sees the very first time.

Think about what actually happens. The moment you create a blog it is live and reachable by anyone, Googlebot included. If at that point it still wears the default theme, has no articles and no About page, then an empty site is exactly what gets crawled and stored.

This is not a permanent penalty. Google does not remember that your site was once empty and hold it against you forever, and an empty site gets recrawled anyway. The point is narrower: being crawled before you are ready has no upside at all, and it has a small downside, which is thin pages entering the index that you then have to clean up. Since hiding takes under two minutes, there is no reason not to.

Turn off search engine visibility

Go to Settings -> Privacy and turn off Let search engines find your blog.

Behind the scenes Blogger rewrites your robots.txt to Disallow: /, which tells every crawler to stay out for now. It does not remove the site from the internet: anyone with the URL can still open it. Only bots are held off.

Limit readers to yourself

Go to Settings -> Permissions -> Blog readers and choose Blog authors only.

This is stronger than the first switch, because it genuinely locks the door: anyone not signed in with your account cannot open the site at all. Note that this also stops you sending a preview link to a friend. If you want a second pair of eyes before launch, skip this one and rely on the search visibility switch alone.

Make it look like a real site

While it is hidden, get three things done.

• Upload your theme, so the site looks finished rather than wearing the Blogger default.
• Write two or three real articles with usable content, not test posts that say "testing testing".
• Create the basic pages, About and Contact, which both readers and AdSense look for.

Why two or three rather than one? A site with a single post still reads as something that might be abandoned next week. Three related posts start to say a person is genuinely working on this, and they give you internal links to follow.

Then open it

When you are ready, switch both settings back to public and findable, then submit your sitemap in Google Search Console to say there is something new.

What Googlebot meets on its first visit is a site with a finished theme, articles worth reading and the basic information pages in place. That is a visibly better starting point than an empty shell.

Step 2: basic settings beginners often forget

These settings are done once but affect both SEO and your site's credibility over the long term.

• Turn on HTTPS: under settings, turn on "HTTPS availability" and "HTTPS redirect" to keep the site secure.
• Write a site description: enable the search description and add one that says what the site is about.
• Create key pages: make About, Privacy, and Contact pages. They matter for both credibility and applying for AdSense later.
• Connect Search Console: add the site to Google Search Console to track SEO from the start.

Step 3: customize a professional-looking theme (with no coding)

This is what sets your blog apart. Blogger's default theme looks plain and may not reflect who you are. Making a theme look good used to mean editing complicated XML, a wall for beginners. Today you can use a drag-and-drop theme builder instead.

With the BlogKub theme builder, you pick a template that fits your kind of site, adjust colors and fonts, arrange the menu, turn features on or off, and see a live preview. When you are happy, download the XML file and upload it into Blogger through Theme → Backup/Restore. All of it works with no knowledge of code.

1. Pick a template. Choose 1 of 8 templates that matches your kind of site (personal blog, travel, tech, reviews, and so on). See how to choose in the templates guide.
2. Customize. Change the text, colors, and fonts, and arrange your menu and main banner by dragging.
3. Turn on the features you want, such as dark mode, a table of contents, and related posts, to raise the reader experience.
4. Download and upload. Click Export XML and upload it into Blogger, and your site transforms into something professional.

Step 4: write a quality first post

Once the site looks good and is ready, it is time for content. Your first post matters because it sets the standard for both readers and Google.

• Choose a specific topic: write about something you genuinely know and people search for. A specific topic answers questions better than a broad one.
• Write completely and with value: answer everything the reader wants on one page, at a reasonable length and with substance.
• Structure it to read easily: use subheadings, short paragraphs, and lists so it is easy to scan.
• Add relevant images: with meaningful ALT text, which helps both reading and image SEO.
• Internal links: as you get more articles, link between them to build a network that helps readers and Google.

Do not worry if your first post is not perfect. Writing is a skill that develops. What matters is starting and writing consistently. To write for Google rankings, read the deeper techniques in the Blogger SEO guide.

Step 5: plan for the blog to grow

A successful blog does not come from a single post, but from consistency and clear direction. After you have a blog and a first post, try planning these.

• Define the site's main topic: a site focused on a clear topic builds credibility with Google better than one that writes about everything.
• Set a publishing schedule: writing consistently, say one post a week, beats writing a burst then disappearing.
• Build a network of internal links: connect every article so readers always have a next step, whichever way they arrive.
• Track and improve: use Search Console to see what works, then do more of it.
• Think about revenue when ready: once you have enough content and readers, start earning. See how in the AdSense guide.

Mistakes beginners often make (and how to avoid them)

Knowing the common mistakes helps you skip the traps that make many people lose heart and quit halfway.

• Topics that are too broad: beginners often write broad subjects that are hard to compete on against big sites. Focus on a specific niche you can answer well with less competition.
• Impatience for fast results: SEO takes 3 to 6 months, and many quit before seeing results. Consistency is the key.
• Neglecting the theme and reader experience: good content on a slow or untrustworthy-looking site still loses readers, so customizing a good theme from the start matters.
• Skipping the policy and About pages: it makes the site look unserious and fails AdSense later.
• Copying others' content: copied content does not rank and risks penalties. Always write your own with your own perspective.

These mistakes are easy to prevent when you know them from the start. The heart of it is being serious and patient. Nearly every successful blog went through an early period with no readers. What made the difference was not giving up and improving continuously.

.blogspot.com or your own domain?

A common beginner question is whether to use the free .blogspot.com domain or invest in your own. The answer depends on your goals and budget. A .blogspot.com domain is free and usable right away, good for starting and testing whether you enjoy blogging before investing. Your own domain, such as yourname.com, costs a yearly fee but looks more professional, builds a brand better, and feels more credible.

The good news is you do not have to decide now. Start with the free .blogspot.com, write content, and see how the blog goes. When you are ready, buy your own domain and connect it to Blogger without moving the site or losing the content you have built up. This is an advantage of Blogger, which supports custom domains built in, letting you grow smoothly from free to professional when the time comes.

Wrapping up

Creating a free Blogger blog is easy and takes under 10 minutes for the basics. Start by logging in with a Google account and setting a blog name and address, then complete the basic settings including HTTPS, a site description, and key pages like About, Policy, and Contact. The important step that makes a blog look professional is customizing the theme, which today needs no code thanks to drag-and-drop tools. From there, write a quality first post and plan for the blog to grow consistently. Everything starts with the first step. Open the BlogKub Builder to build a beautiful theme for your new blog for free, and when you are ready, build on it with SEO and earning so your blog grows with direction.

Frequently asked questions (FAQ)

Keep reading

Read it on BlogKub →

How to build an About/author block (E-E-A-T) in a Blogger theme

Readers and Google both want to know "who is behind this content?" An About/author block answers that, building a connection with readers and sending credibility signals (E-E-A-T). This article teaches you how to set it up in a Blogger theme with BlogKub, including the name, bio, profile image, and stats/verification badge in some templates.

Updated 16 July 2026   About a 9 minute read   Level: Beginner

What the About block is, and why it matters

The About/author block is a short introduction to the site or author, placed on the homepage or within an article. It includes a name, a short bio, and a profile image. Unlike a full "About us" page, the About block is a compact section inserted into other pages, introducing you without making readers click away.

The importance of the About block comes from the human nature of wanting to know who you are listening to. When readers see there is a real, experienced person behind the content, they feel more connected and trust it more. Content with no author information at all seems to have floated in from nowhere, while content with a clear author and a relevant bio looks much more credible.

E-E-A-T: why author information matters for SEO

Google uses a framework called E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) to assess content quality, especially topics that affect people's lives or finances. Clear author information stating relevant expertise is one of the signals that helps here.

The About block is therefore where you place information that reinforces the site's E-E-A-T. When you state that the author has experience or expertise relevant to the content, you signal that this content comes from someone who genuinely knows, not copied or shallow writing. That said, the information must be true and relevant. An exaggerated bio does not help and can cost credibility. A sincere, on-point bio is what both readers and Google value.

How to set up the About block, step by step

1. Add or select the About block. Select the "About/author" block in the template, or add it into the spot you want, such as the homepage after the post grid.
2. Add the name and E-E-A-T bio. Add an eyebrow (such as "Author"), the name/author, and a bio stating experience and expertise relevant to the site's content.
3. Add a profile image (and stats/badge). Turn on the profile image and set its URL. In the review/company templates, you can add stats (format: number | description), and the review template supports a verification badge.
4. Export the XML and check. Click Export, upload it to Blogger, then check that the About block shows the name, bio, image, and any supporting elements correctly.

Template-specific extras: stats and verification badge

The About block adapts its options by template to reinforce credibility to match the kind of site.

• Stats (review/company templates): add numbers that build credibility, such as "500+ | reviews written" or "10 years | experience", shown as a prominent number with a description, letting readers see credibility concretely.
• Verification badge (review template): add a badge that conveys credibility, such as "Reviews from real use" or "Expert in...", to emphasize the site's stance.

These options let a review or company site's About block communicate credibility on point. Concrete stats and a verification badge reinforce that the content comes from a genuinely experienced source, which matters greatly for content readers use to decide, such as product reviews or company recommendations.

Write a bio that builds credibility

The heart of the About block is a good bio. The principle is to say three things: who you are, what experience or expertise you have relevant to the site's content, and why readers should trust you on this topic. Avoid a bio that is too broad or generic to say anything, such as "loves blogging and sharing knowledge", and focus on the specific and relevant, such as "have written camera reviews for over 5 years and tested more than 100 models".

Specificity and relevance are what genuinely build credibility. A reader deciding to buy a camera trusts a review from someone who tested a hundred models more than a general person, just as Google looks for signals of real experience. A good bio is therefore a worthwhile investment, because it works with both readers and search engines, and used with a full About us page and links in the footer, it reinforces the whole site's credibility further.

The About block vs a full About us page

Many people wonder how the About block differs from an About us page. The answer is that the two complement each other. The About block is a short compact section inserted into the homepage or an article, to introduce yourself at once without making readers click away, while the full About us page is a dedicated page telling the story, origins, and details of the site thoroughly.

Having both is the good approach. The About block builds a quick connection at the point where readers are reading content, while the full About us page serves readers who want to know more and is a strong E-E-A-T signal for Google. When the About block links to the full page, interested readers can click to read on. The two therefore work as a system to build the site's credibility.

Common problems and how to fix them

The profile image does not show

Check that you turned on the profile image option and set a correct image URL. If you do not want an image, turn off the option for a text-only block.

Stats or the badge do not appear

The stats and verification badge options are only in some templates (review/company). If you use another template, these options are absent. Also check the stat format is correct (number | description, one per line).

The bio looks too generic

Make it specific and relevant to the site's content, emphasizing concrete experience or expertise, to build genuine credibility.

How much real information to include

Include real information that builds credibility, but you do not need to reveal unrelated personal details. Focus on what relates to your expertise in the topics you write about.

Best practices

• Write a specific, relevant bio, emphasizing experience/expertise in the topics the site covers.
• Add a real profile image to build a connection with readers.
• Use stats and a verification badge (in templates that support them) to reinforce credibility concretely.
• Always give real information. Avoid exaggeration that can cost credibility.
• Use it with a full About us page and links in the footer, for strong E-E-A-T.

Wrapping up

The About/author block is a key element for building the site's credibility, because it answers the question both readers and Google want to know: who is behind the content. With BlogKub, you set up the About block fully with no coding, including the eyebrow, name, E-E-A-T bio, profile image, and in some templates stats and a verification badge. When you write a specific, sincere bio relevant to the content, the About block builds a connection with readers and sends credibility signals good for SEO. Used with a full About us page, your site has a strong E-E-A-T foundation, which matters more and more for making a site successful.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build an AdSense ad slot in a Blogger theme

Many people blog to earn from ads, but placing ads carelessly hurts both the reader experience and can breach policy. An ad slot helps you place ads in the right, tidy spots. This article teaches you how to do it in a Blogger theme with BlogKub, with placement choices and an "Ad" label per AdSense guidance.

Updated 16 July 2026   About a 9 minute read   Level: Intermediate

What an ad slot is, and why placement matters

An ad slot is space prepared for placing an ad in the theme, with a suitable placement and label. For bloggers who want to earn from Google AdSense, having well-placed ad slots is important, because ad placement affects both revenue and the reader experience.

The challenge is balancing making ads visible (for revenue) with not disrupting reading (for experience). A well-placed ad gets seen and clicked without frustrating readers, while carelessly or excessively placed ads drive readers away and can breach policy. BlogKub's ad slot helps you place ads in standard positions already considered appropriate.

The 3 ad placements

The ad slot offers 3 placements, each suiting different ad formats and purposes.

• Below the header (top): a horizontal ad below the menu, a spot seen immediately on arrival, good for banner ads, but be careful not to push the main content too far down.
• In the article (middle): an ad inserted into the article content, a spot where the reader is engaged and often responds well, but place it so it does not interrupt reading too much.
• Sidebar (side): an ad in the side column, good for sites that already have a sidebar, a spot visible without disrupting the main content, though visibility may be lower than in-content.

Choosing a placement depends on your layout and the balance you want. Many sites use several placements together, but be careful not to overdo it. Having ads in well-considered positions works better than stuffing ads everywhere.

How to place an ad slot, step by step

1. Add the ad slot block. Drag the "Ad" block from the library into the spot you want in the theme structure.
2. Choose the placement and ad label. Choose a placement (below header / in article / sidebar) and turn on the "Ad" label per AdSense guidance for transparency.
3. Paste your AdSense ad code. After your AdSense account is approved, paste the ad unit code created in the AdSense dashboard into the prepared slot.
4. Export the XML and check. Click Export, upload it to Blogger, then check that the ad slot is in a suitable spot, does not disrupt content, and has an "Ad" label.

Why show an "Ad" label

Showing an "Ad" label on the ad area is good practice per Google AdSense policy. The reason is transparency. Readers should be able to tell what is the site's content and what is an ad. Not distinguishing clearly can confuse readers or lead to accidental clicks, which breaches policy and creates a bad experience.

A clear label is therefore a practice that is both within policy and respectful of readers. It honestly says this part is an ad, letting readers decide for themselves whether they are interested. This transparency builds long-term trust, which matters for retaining readers and staying in the AdSense system sustainably. BlogKub provides this label option per good practice.

Balancing revenue with the reader experience

A common trap for new bloggers is placing too many ads to earn quickly, but the result is usually the opposite. Numerous, disruptive ads drive readers away, and with fewer readers, revenue drops too. Moreover, AdSense has a clear policy that ads should not be more numerous or prominent than content, and violations can suspend an account.

The sustainable principle is "content must always be the star". Ads are an addition placed in moderation in suitable spots, not something that buries the content. A site with quality content and balanced ad placement retains its readers and earns over the long term, more than a site that stuffs ads until readers do not want to return. Using ad slots in standard positions and reasonable numbers is therefore an investment in sustainability.

Impact on speed and Core Web Vitals

Something to understand is that ads affect site speed, because they load from an external server, adding network calls and scripts. Importantly, ads can affect CLS (Cumulative Layout Shift), one of the Core Web Vitals, if the ad area loads and pushes the content, causing a reader who is reading or tapping to miss because the page shifts.

To reduce the impact, place ads in reasonable numbers and in positions with clearly reserved space. Having a well-structured ad slot lets the browser know the space in advance, reducing content shift. Not placing too many ads also reduces the number of scripts to load, preserving overall speed. When you consider revenue, experience, and speed together, you get a site that earns without losing quality, which is the goal of sustainable blogging.

Revenue options beyond AdSense

Although AdSense is a popular way to earn, it is not the only one. Many bloggers find that relying on AdSense alone earns little, especially early on. Other options that often work better for some sites include affiliate marketing (recommending products for a commission), selling your own products or services, or sponsorships, some of which disrupt readers less than banner ads and return more per reader.

The upside of considering several options is that you do not have to stuff the site with ads. A review site doing affiliate can use a Pros/Cons box and a CTA button to lead readers toward a purchase more smoothly than ads, while a site with expertise might sell a course or service. Mixing several revenue channels in balance is usually more sustainable than relying on ads alone, and preserves the reader experience better. That said, AdSense is still a good, easy starting point, so BlogKub's ad slot is ready for you to start with when you are ready.

Prepare your site for AdSense approval

Before ads can show, your site must be approved by Google AdSense, which considers several factors. Things that improve your odds include having a reasonable amount of quality original content, having key pages like an About page, Privacy Policy, and contact channel, plus clear navigation and a genuinely usable site.

The good news is that BlogKub templates help a lot here, because they come with an organized structure, clear navigation, and support for placing policy and contact pages. When you have quality content and a complete site structure, your odds of approval go up. Preparing the site before applying is more worthwhile than rushing to apply and being rejected. Once approved, the ad slots you prepared are ready to show ads right away.

Common problems and how to fix them

The ad slot is empty

The slot stays empty until you paste in an approved AdSense ad unit code. Check that your AdSense application passed and that you pasted the code correctly.

Ads push the content around (CLS)

Choose a placement with clearly reserved space and do not place too many ads, to reduce content shift when the ad loads.

Worried about breaching AdSense policy

Turn on the "Ad" label, place a reasonable number, and keep content more prominent than ads always. Study the AdSense policy for confidence.

Ads slow the site down

Reduce the number of ads and place them well, because each ad unit adds external script loading.

Best practices

• Always turn on the "Ad" label for transparency and per AdSense guidance.
• Place a reasonable number of ads, keeping content the star always.
• Choose placements that balance visibility with not disrupting reading.
• Reserve clear ad space to reduce CLS and preserve speed.
• Study the AdSense policy and follow it for the sustainability of your account and site.

Wrapping up

The ad slot is a tool for bloggers who want to earn from AdSense tidily and within policy. With BlogKub, you can choose 3 placements (below header / in article / sidebar) with an "Ad" label per AdSense guidance, and the system prepares suitable placements and structure, waiting only for you to paste in an approved ad unit code. The key to sustainable ads is balance: keep content the star, place ads in moderation in the right spots, show a transparent label, and consider speed and Core Web Vitals. Done right, you earn from your site without losing the reader experience, the foundation of a sustainably earning blog. To learn the steps from applying, to approval, to placing ads within the rules in detail, read the guide to earning from Blogger with Google AdSense.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a dismissible announcement bar in Blogger

Sometimes you have something important you want every reader to see first, a promo, a new article, or a notice. A top announcement bar is the best place, because it is the first thing the eye reaches. This article teaches you how to add one to a Blogger theme with BlogKub, with a CTA link, color choices, and a reader-dismissible bar that remembers.

Updated 16 July 2026   About an 8 minute read   Level: Beginner

What an announcement bar is, and why it works

An announcement bar is a full-width horizontal bar at the very top of the site, above the header and menu. It shows a short message you want every reader to see before anything else. With its prominent position and a background color that contrasts with the content, this bar catches the eye the moment the page finishes loading.

The reason it works is that it relies on "visual order". Readers usually sweep from top to bottom, so what is at the top is always seen first. When you have time-limited or especially important information, such as a promo about to end, placing it in the announcement bar guarantees it will not be missed, unlike burying it mid-page where readers may scroll past.

The highlight: dismissible and smart remembering

What separates a good announcement bar from an annoying popup is respecting the reader. BlogKub's announcement bar has a close button on the right. When a reader dismisses it, the system remembers in the browser that they closed this announcement, so the bar does not return to bother them on later visits. This is a key difference: an announcement that cannot be closed or keeps popping back is annoying and drives readers away.

Smarter still, the system remembers the dismissal based on the announcement text. That means when you change the text to a new announcement, the system treats it as a different one and shows it to everyone again, even those who dismissed the old one. This mechanism lets you use one bar to announce various things over time, with readers seeing only announcements they have not dismissed, with no worry that people who dismissed one will miss the new news.

How to add the announcement bar in BlogKub, step by step

1. Add the announcement bar block. Open the left block library and drag the "announcement bar" block in, usually placed at the very top of the structure so it shows above the header.
2. Add text, a link, and a background color. Type the announcement text. For a CTA, add link text and a URL, and choose a background color to match your brand or stand out as you wish.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Test dismissing and remembering. Open the live site, check the bar shows at the top, click the close button, then refresh to confirm the bar does not return. Then try changing the text and re-exporting, to see the new announcement show again.

Add a CTA link: turn the announcement into a next step

The announcement bar is even more powerful with a link to click. Instead of just telling news, you can add link text like "See the promo", "Read the article", or "Sign up now" with a destination URL, turning the bar into a channel to take readers to the page you want, whether a promo page, an important article, or a follow channel.

A clear CTA in the announcement bar raises the chance of the action you want. Think of the announcement bar as the most valuable ad space on the site, because everyone sees it first. Using it to guide readers toward a clear goal is more worthwhile than leaving it a floating message. That said, keep the text concise and the CTA on-point, because the bar space is limited.

Choose a color and write effective text

The bar's background color affects both its prominence and the mood of the announcement. A bright color like a brand or accent color makes the bar catch the eye, good for a promo or exciting news, while a calm dark color suits a formal notice. Choose a color where white text reads clearly and does not blend with the header until they are indistinguishable.

For the text, the principle is "short, clear, and giving a reason to care", because the bar has limited space and readers spend only a fraction of a second on it. Write the point in one sentence, emphasizing a benefit or urgency, such as "30% off until the end of the month only", which is better than "We have a special promotion for customers", which is longer and less motivating. A small emoji can add eye-catch, but use it in moderation.

Examples of using the announcement bar

• Promo announcement: "40% off the online course until the end of the month, click to see", with a link to the course page.
• Highlight a new article: "New article: 10 tips to rank your blog on Google's first page", linking to the article.
• Follow invite: "Follow our new channel so you do not miss updates", linking to a page or channel.
• Important notice: announce a change, event, or news readers should know first.

Notice every case is "temporary and important", which suits the most prominent top space. When an announcement expires, you just change the text or turn off the block, and the site returns to normal.

A caution: use it only when needed

The power of the announcement bar comes from its prominence, but if there is always a bar with nothing genuinely important, readers begin to ignore it, like we scroll past ads automatically. This is called "banner blindness". To preserve the bar's power, use it only when there is something worth announcing.

Also be careful not to let the bar crowd out the main content too much, especially on mobile with a small screen. Concise text and an easy-to-use close button let the bar do its job without disrupting the reading experience. Used in moderation with a clear goal, the announcement bar is an effective communication tool, not a nuisance.

The announcement bar vs a popup: why the bar is friendlier

Many sites use a mid-screen popup to announce something important, which works for grabbing attention but creates high annoyance because it covers the content and forces readers to close it before reading on. Google itself has guidance discouraging popups that cover content on mobile, which can affect the experience and rankings. A top announcement bar is a much gentler alternative, because it sits above the content without covering it. Readers see it but can keep reading immediately without clicking anything.

This is a reader-first design philosophy. Communicating something important does not have to be aggressive or interrupting. The announcement bar proves you can present prominent information while still respecting the reading experience. When readers feel your site does not bother them too much, that good feeling carries over to the overall image and willingness to return.

Common problems and how to fix them

The announcement bar does not show

Check that you added the announcement bar block and Exported again. If you previously dismissed an announcement with the same text on this browser, the system remembers the dismissal. Try in incognito mode or change the text to test.

You dismissed it but it returns every time

Normally the system remembers the dismissal in the browser. If the browser blocks storage (such as some private modes), the remembering may not work. Test in normal mode to confirm.

You changed the text but people who dismissed do not see the new one

In principle, when the text changes, the system treats it as a new announcement and shows it again. If it does not, check that you Exported and uploaded the theme with the new text.

Best practices

• Use the announcement bar only for important, time-limited matters, to preserve its power to draw the eye.
• Write short, concise text emphasizing a benefit or urgency.
• Add a clear CTA link to take readers to the goal.
• Choose a prominent color where the text reads easily and is clearly separate from the header.
• Change or remove the announcement when it is no longer important, so readers do not tune out the bar.

Wrapping up

The top announcement bar is the most prominent communication space on the site, ideal for important, temporary matters you want every reader to see first. With BlogKub, you just add the announcement bar block, add text, a CTA link, and a background color, and Export it. Readers see the bar at the top and can dismiss it, with the system remembering based on the text. When you change to a new announcement, the bar shows to everyone again. This reader-respecting mechanism makes the announcement bar an effective communication tool. Used in moderation with a clear goal, it helps your important news reach readers without becoming a nuisance.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build Callout boxes (Note / Tip / Warning) in Blogger articles

Easy-to-read articles usually have eye-rest spots that make important information stand out. A Callout box is that tool: a colored box with an icon that tells readers at once "this is a tip" or "this is a warning". This article teaches you how to add all 6 Callout boxes to a Blogger theme with BlogKub, including how to place them in the post and fixes.

Updated 16 July 2026   About an 8 minute read   Level: Beginner

What a Callout box is, and why it helps reading

A Callout box is a highlight box separated from the normal content by a background color, a left border, and an icon, to draw attention to important information such as a tip, warning, or note. A reader sweeping through an article hits these boxes at once, so they do not miss the point you want to emphasize.

In good writing, not every sentence carries the same weight. Some information is just general explanation, while some is a key point that, if missed, could lead to a mistake. Callout boxes create a "visual hierarchy" that tells readers what deserves special attention, making long content much easier to digest.

All 6 Callout box types and when to use them

BlogKub offers 6 Callout boxes, each with a color and icon that convey meaning by universal convention.

• Note (blue): for supporting information worth knowing but not urgent, such as extra context or an aside.
• Tip (teal): for a technique that makes something faster and easier, a box readers usually love because it adds value.
• Success (green): for confirming something is done right or a step is complete, giving readers confidence.
• Warning (orange): for something to be careful of or check before continuing, preventing mistakes.
• Danger (red): for important matters that are hard to reverse if missed, such as an action that permanently deletes data.
• Download (purple): for pointing to a file or resource to download, making the download link stand out.

Using color to match meaning matters. Readers learn from experience that red is danger and green is success. When you use the boxes consistently with these meanings, readers understand at once without even reading the label.

How to add and use Callout boxes, step by step

1. Add the Callout block. Open the left block library, category "Article & UX", and drag the "Callout box" block in to embed the styles of all 6 boxes in the theme.
2. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
3. Place a box in the post. When writing the post, switch to HTML view and wrap your text in a <div class="bk-tip">tip text</div>, changing the class to bk-note, bk-warning, bk-danger, etc. as needed.
4. Check the display. Open the live article to confirm the box shows the background color, icon, and left border correctly by type, and reads well on both desktop and mobile.

Why the icons are SVG embedded in the theme, not loaded images

The technical detail that makes BlogKub's Callout boxes fast and stable is that the icons are embedded as SVG directly in the theme's style, not images loaded externally. The upside is that icons display at once with the content, with no flicker or wait, no extra network request, and no risk of the icon disappearing if an image link breaks.

This is in line with the Blogger principle that everything should live in the theme itself as much as possible. Using SVG embedded in the style also keeps icons sharp at every screen resolution and lets them change color by box type without needing several image versions, an approach both light and flexible.

Callout boxes with dark mode and design consistency

Because the text in the box uses the theme's color variables, Callout boxes adapt to dark mode naturally. The text changes to a light color in dark mode and a dark color in light mode, while each type's background and border use a transparent color, blending with the background in both modes while keeping the color identity.

This consistency matters for the site's image. When every box type has the same style across the site (margins, rounded corners, icon position), readers perceive that your site is designed systematically, unlike each article having differently shaped boxes made by hand one at a time. Having a central style embedded in the theme guarantees this consistency automatically.

Examples of using Callout boxes in different kinds of blog

• Tutorial/how-to blogs: use a tip box for shortcuts, a warning box for where people often slip, and a danger box for hard-to-reverse steps.
• Tech blogs: a note box for extra context, a download box pointing to a code file or resource, pairing well with the copy code button.
• Recipe blogs: a tip box for tricks to make it tastier, a warning box for timing or temperature to watch.
• Review and buying guide blogs: a note box summarizing key points, a success box confirming which option is worth it.

The common thread is that Callout boxes help separate "information to emphasize" from general content, making your article look organized and friendly to readers who like to scan for the key points.

A caution: do not overuse the boxes

Callout boxes are powerful because they stand out, but if you use too many in one article, everything stands out until nothing does, turning the article into a dazzle of colored boxes harder to read than before. The principle is to use boxes only for genuinely important information, a few points per article, to preserve their power to draw the eye.

Think of a Callout box like a highlighter in a book. If you highlight every line, highlighting is meaningless, but if you highlight only the key sentences, they stand out and are useful. Callout boxes are the same. Use them in moderation so they can do their job fully.

Callout boxes and accessibility

One benefit of using Callout boxes based on real text is that they are accessibility-friendly. The content in the box remains normal HTML text that a screen reader reads in full, unlike making a highlight box by embedding text in an image, which a reader who cannot see cannot access at all. Because the color and icon are only a CSS enhancement, not carrying all the meaning, the content stays accessible even when the style does not load.

That said, be careful not to rely on "color" alone to convey meaning, because some readers are color-blind. The good way is to have the box text convey the context itself, such as starting with "Caution:" or "Tip:", so the meaning is clear even to readers who cannot tell the colors apart. This is an inclusive design principle that covers all readers and aligns with good web accessibility standards.

Common problems and how to fix them

The box has no color or icon, showing as plain text

This usually happens because the Callout block was not added in the theme or was not re-exported. Check that you added the block and uploaded the latest theme, then confirm you used the correct class name, such as bk-tip not just tip.

You added the class but the box is off

Check that you wrote it in the post's "HTML view", not the compose view, because the compose view may convert tags or insert extra tags, breaking the box structure.

You want a color other than the 6 types

The set of 6 covers the main frequently-used meanings and is designed to be consistent. We recommend choosing from this set for consistency, rather than creating a new color that could make the design unsystematic.

Best practices

• Use color to match meaning, such as red for danger and green for success, so readers understand at once.
• Use boxes only for a few important points per article, to preserve their power to draw the eye.
• Always write the class in HTML view, and check the class name is correct (bk-note, bk-tip, ...).
• Test the display in both light and dark mode, and on mobile.
• Pair with other content features, such as the FAQ box and table of contents, to make long articles easy to read in every dimension.

Wrapping up

Callout boxes are a small tool that clearly raises an article's readability. With BlogKub, you just add the Callout box block and Export it, then wrap text in a div with the matching class (note, tip, success, warning, danger, download). The system handles the color, SVG icon, and border automatically, with no image loading, dark mode support, and consistent design across the site. Used in moderation to highlight important information, Callout boxes help readers scan for the key points quickly, understand easily, and have a better reading experience.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a feature Columns section (2 to 3 columns, icon plus text) in Blogger

When you want to tell readers "why choose us" or "what makes this site special", writing a long paragraph does not work as well as summarizing it into clear points. A feature Columns section shows highlights as 2 or 3 columns with icons. This article teaches you how to build one in a Blogger theme with BlogKub, adding and removing columns and filling in the icon, heading, and description yourself.

Updated 16 July 2026   About an 8 minute read   Level: Beginner

What a feature Columns section is, and why it works

A feature Columns section is a part that shows highlights or services as 2 or 3 columns side by side, each with an icon, a heading, and a short description. It is a presentation format common on company and service sites, because it summarizes key information so readers see and understand it in an instant.

The reason it works is that it matches how people read the web. Most readers do not read every word, they "scan" for the key information. Laying out highlights as columns with clear icons and headings makes scanning easy: the icon draws the eye, the heading states the point, and the description gives the detail. Readers grasp your selling points quickly without reading a long paragraph, which suits any space where you need to convey value concisely.

How to build the feature Columns section step by step

1. Add the Columns block. Drag the "Columns (Features)" block from the library into the position you want, such as on the homepage below the Hero or on a services page.
2. Set the heading and column count. Enter a section heading (for example "Why choose us") and choose 2 or 3 columns based on how many highlights you have.
3. Fill in the icon, heading, and description for each column. Add or remove columns as needed, and fill in the icon (emoji), heading, and a short description for each column.
4. Export the XML and check the result. Click Export, upload it to Blogger, then check that the columns display correctly, side by side on desktop and stacked on mobile.

Use emoji icons: lightweight and meaningful

The feature Columns section lets you set an emoji or symbol as the icon in each column, such as ⚡ for speed, 🎯 for precision, or ✨ for quality. The benefit of using emoji is that they are lightweight and need no icon image to load, they display instantly on every device, and they carry meaning on their own without reading the text.

The icon acts as an "anchor for the eye" that helps each column stand apart clearly and be easy to remember. When you pick an icon whose meaning matches the heading, readers grasp each highlight faster. The tip is to choose emoji that are relevant and consistent in style, not random ones that look unsystematic. Consistent icons make the columns section look designed and professional.

Write concise headings and descriptions

The power of a feature Columns section lies in being concise. Each column's heading should be short and clearly state the highlight, such as "Easy to use", "Secure", or "Fast". The description should expand it in one or two sentences that say what the highlight means and how it benefits the reader.

Avoid writing overly long descriptions in a column, because that defeats the purpose of quick scanning. If a highlight needs a long explanation, consider splitting it into a separate article or section. The feature Columns section is designed to "summarize the big picture", not to explain in detail. Keeping it concise is the key to letting this section do its job well. When readers want to know more, you can lead them to the full content through a CTA button placed after the columns.

Choose 2 or 3 columns

Choosing the number of columns depends on how many highlights you have and the balance of the page. 2 columns make each column wide with plenty of space, ideal when you have a few main highlights to emphasize or descriptions that run a bit long. 3 columns is the classic, balanced, and most common layout, ideal when you have three highlights of equal weight.

The number three has a psychological charm called the "rule of three", where people tend to remember and take in information best in sets of three. Grouping highlights into three often looks tidy and memorable. That said, do not force a third highlight just to reach three if only two truly matter. Truth and clarity matter more than hitting a number, so pick the count that best reflects your real highlights.

The feature Columns section on different kinds of sites

• Company/service sites: show the strengths of a service, such as "10 years of experience", "After-sales support", "Great value".
• Online course sites: summarize what learners get, such as "Learn anywhere", "A certificate", "A personal mentor".
• Blogs with a selling point: say why to follow, such as "Updated weekly", "From real experience", "All free".
• Product sites: summarize a product's standout features to give an overview before the details.

The common thread is that a feature Columns section helps "answer the why" in a concise space. When a reader lands on the site and wants to know why they should care, the columns section gives the answer immediately in an easy-to-scan form.

The feature Columns section and how the eye scans

Good design understands that people do not read the web line by line like a book, they sweep their eyes to find points of interest (known as the F-pattern or Z-pattern). The feature Columns section is designed to fit this behavior exactly. When highlights are arranged as columns with prominent icons and short headings, the eye jumps easily from one column to the next, taking in the key information without reading every word.

This is why a feature Columns section is more powerful than writing highlights as a long paragraph. A long paragraph forces the eye to read line by line, which goes against scanning behavior, whereas columns split the information into chunks the eye can reach at once. Arranging information to match how people actually read helps your message reach readers effectively, which is the heart of user-centered design.

An example of writing a good feature Columns section

To picture it, look at an example for a web design service site. Three columns might be: (1) icon ⚡, heading "Fast delivery", description "Get a ready-to-use site within 7 days, no long wait". (2) icon 🎨, heading "Design that fits", description "Customized to your brand, no off-the-shelf template". (3) icon 🛟, heading "Post-delivery care", description "Free fixes and support for 30 days after handover".

Notice each column has a meaningful icon, a short heading that states the highlight, and a one-sentence description that names a concrete benefit. All three are close in length for balance, and use language that emphasizes what the customer gets, not just a list of features. Writing this way lets readers grasp the value in a few seconds, which is the goal of a feature Columns section.

Common problems and how to fix them

The columns do not sit side by side

On mobile the columns stack vertically by design for easy reading, which is normal behavior. On desktop the columns sit side by side according to the number you chose.

The icon does not show

Check that you entered an emoji in the column's icon field. If you leave it blank, no icon shows, which is expected.

The columns look unbalanced

This may be because the descriptions differ a lot in length. Try adjusting them to be close in length for visual balance.

You want more than 3 columns

This section is designed to show 2 or 3 columns for readability and balance. If you have more highlights than that, consider splitting them into several sections or picking only the most important ones.

Best practices

• Write short headings and concise descriptions, preserving the purpose of quick scanning.
• Choose emoji icons whose meaning fits and are consistent in style.
• Choose a column count that reflects your real highlights, do not force it to a number.
• Keep each column's description close in length for balance.
• Place a CTA after the columns to lead readers to action once they have seen the highlights.

Wrapping up

A feature Columns section is a tool that helps summarize highlights or services so readers see and understand them quickly, ideal for answering "why choose us" in a concise space. With BlogKub you can build the columns section easily with no coding, showing highlights as 2 or 3 columns, each with a lightweight, meaningful emoji icon, a heading, and a description. You can add or remove columns, and it is responsive automatically. The keys to a columns section that works are being concise, keeping the icons consistent, and choosing a count that reflects your real highlights. Done right and paired with a CTA at the end, the columns section conveys your site's value clearly and leads readers to the next step.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a Call To Action (CTA) box in a Blogger theme

A reader impressed by your content is ready to do something next, sign up, contact you, or view products, but if you do not tell them what to do, they usually will not. A Call To Action (CTA) box does that job. This article teaches you how to set one up in a Blogger theme with BlogKub, including the heading, button, link, background, and stats in some templates.

Updated 16 July 2026   About an 8 minute read   Level: Beginner

What a CTA is, and why every site should have one

A Call To Action (CTA) is a box that invites the reader to do something, made of a motivating heading, subtext, and a button linking to a target page. For example, "Sign up for the free course", "Contact us today", or "View all products". A CTA is the bridge that turns a "reader" into a "doer" toward the site's goal.

The reason every site should have a CTA is the simple principle that "people tend to do what they are told to do". A reader who finishes the content feeling good but sees nothing to do next usually just closes the page. But with a clear CTA waiting, they have a direction to go. A CTA is therefore a key tool for turning interest into a result, whether your goal is a sale, collecting emails, or getting in touch.

How to set up a CTA box, step by step

1. Add the CTA block. Drag the "Call To Action" block from the library into the spot you want, such as after the main content on the homepage, or at the end of an article.
2. Add the heading, button, and link. Type a motivating heading, the button text, and the destination link, such as /p/contact.html for a contact page, or an external URL.
3. Choose the background (and stats). Choose a gradient (standout) or soft (subtle) background. In the course/company templates you can add supporting subtext and stats.
4. Export the XML and test. Click Export, upload it to Blogger, then click the CTA button to confirm the link goes to the correct target page.

Write an effective CTA heading and button

A CTA's effectiveness depends mainly on the writing. The heading should motivate and state the value, not just say what to do. For example, "Start building a website for free today" is better than "Sign up", because it states both the action and the benefit. The subtext (if any) reduces hesitation by giving details or removing worries, such as "No cost, cancel anytime".

The button is the final decision point. Use words that state the action clearly and specifically, such as "Download free", "Reserve a seat", "Get a quote", which is better than a neutral "Click here" or "Submit", because a button that tells the reader what they get makes them click with confidence. The same principle applies to buttons in the Hero. Writing good CTAs is therefore a skill that affects the results of the whole site.

Choose a suitable background and position

The CTA background affects its prominence. A gradient background makes the box stand out and separate from the surrounding content, good when the CTA is an important goal you definitely want readers to notice. A soft background is subtle and blended, good when you do not want the CTA to be too aggressive or when there are several CTAs on one page.

Position matters just as much. A CTA usually works best at a moment of high motivation, such as at the end of an article when the reader finishes impressed, or after a section explaining the value of what you offer. Placing a CTA when the reader is "ready" makes it more effective than placing it at random. That said, do not have too many CTAs so the reader is confused about what to do. Having one clear main CTA with a single goal usually works better than stuffing several buttons to choose from.

Stats in some templates: adding credibility

In the course and company templates, a CTA can include subtext and stats, a powerful technique for prompting action. Stats like "Over 5,000 students" or "Trusted by over 200 companies" act as "social proof", telling the reader many people have decided already, which reduces hesitation and adds confidence.

Social proof works because people tend to see what others chose as likely good. Adding real, impressive stats to a CTA therefore raises the action rate. That said, the numbers must be true. Exaggerated stats can create distrust if the reader sees through them, so honesty matters above all. Used correctly, stats in a CTA are an effective decision accelerator.

The CTA and each kind of site's goal

• Email-collecting blog: a CTA to a Newsletter signup box or a signup page, to build a follower base.
• Company/service site: a CTA to a contact page or quote request, to generate leads.
• Online course site: a CTA to enroll or view course details, with student stats.
• Review/affiliate site: a CTA to view a product or a buy page, to turn readers into buyers.

You can see the CTA adapts to any site's goal. The key is knowing what you want the reader to do next, then designing the CTA to lead to that action clearly.

The psychology behind an effective CTA

An effective CTA is not accidental, it relies on understanding human behavior. The key principles are "reduce friction" and "increase motivation". Friction is what makes people hesitate, such as uncertainty about what happens when they click, or fear of wasting time or money. Writing a clear button and subtext that removes worries (such as "free", "no commitment") reduces this friction.

Motivation comes from stating a clear benefit and an appropriate sense of urgency. A CTA that says what the reader gets and why they should act now usually works better than a flat one. That said, urgency must be genuine and proportionate. Creating fake, exaggerated urgency can destroy trust. When you understand the balance between reducing friction and increasing motivation, you design a CTA that is both compelling and honest, which is the key to a CTA that works over the long term.

Test and improve your CTA

The best CTA usually does not come from guessing, but from observing and improving. Even though Blogger has no advanced testing tool built in, you can observe which kind of CTA seems to work with your readers. Try adjusting the text, position, or background color and see whether readers respond differently. Learning from real readers helps your CTA get better over time.

Remember there is no CTA formula that works for every site, because each audience is different. A CTA that works for a travel blog may not suit a business site. Experimenting and adapting to your own readers is therefore important. Start from good principles, then adjust based on what you observe. Do it consistently and your CTA will fit your readers and work better over time.

Common problems and how to fix them

The CTA button goes nowhere when clicked

Check that you entered the destination link in the button correctly, whether internal (such as /p/contact.html) or external (https://...), and Export again.

The CTA does not stand out enough

Try changing the background to a gradient to catch the eye, and check that the heading and button are motivating enough.

Stats do not show

The stats option is only in the course/company templates. If you use another template, this option is absent. Also check the stat format is correct (number | description, one per line).

Several CTAs confuse the reader

Reduce to one clear main CTA with a single goal per spot. A single clear goal usually works better than several competing buttons.

Best practices

• Write a heading that states the value and a button that states the action clearly. Avoid "Click here".
• Place the CTA at a moment of high motivation, such as the end of an article or after a value-explaining section.
• Choose a gradient background when you want it to stand out, soft when you want it subtle.
• Use real stats (in templates that support them) as social proof to prompt action.
• Have one clear main CTA per spot. Do not stuff several buttons and confuse people.

Wrapping up

The Call To Action box is a key tool for turning readers into doers toward the site's goal. With BlogKub, you set up a CTA easily with no coding, adding a heading, a button with a link (internal or external), choosing a gradient or soft background, and in some templates adding subtext and stats as social proof. The key to an effective CTA is writing a heading and button that state the value and action clearly, placing it when the reader is ready, and having one clear goal per spot. Done right, a CTA turns reader interest into the result you want, whether that is a signup, contact, or a purchase.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a Featured posts section in Blogger

Some posts are more important than others, and you do not want them to disappear when a new post replaces them. A Featured posts section lets you pin an important post to show as a highlight on the homepage. This article teaches you how to set it up in a Blogger theme with BlogKub, pinning with a label, and using the latest post automatically if you have not pinned anything yet.

Updated 16 July 2026   About a 9 minute read   Level: Intermediate

What a featured section is, and why it helps

A Featured posts section is a part that shows an important post more prominently than ordinary posts on the homepage. It usually appears as a large card or a highlight that draws the eye, unlike a normal post grid that shows the latest posts in time order. The featured section lets you "choose" which post should sit at the top and stand out most.

The main benefit is controlling what readers see first. A typical blog always shows the newest post first, but sometimes your most important post is not the newest one, such as an introduction post, a main money-making post, or content you want to promote. The featured section solves this by letting you pin an important post so newer posts do not push it out of view over time.

Pinning with a label: a flexible approach

The clever part of the featured section in BlogKub (the magazine template) is pinning with a label. You set a label name for recommended posts (such as "Recommended"), then whenever you want to pin a post, you just go to blogger.com, edit that post, and add the label. The post appears as a featured post immediately.

This approach is very flexible because you manage pinning directly from the Blogger side, without going back to edit the theme. When you want to change the featured post, you just remove the label from the old post and add it to the new one. You can also pin several posts by applying the same label to multiple posts. The first post becomes the large highlight and the rest show below, letting you emphasize several important pieces at once.

How to set up the featured section step by step

1. Add or select the Featured block. Select the "Featured posts" block that comes with the template (such as the magazine one), or add it to the homepage.
2. Set the heading and pin label. Enter a section heading, and in the magazine template, set a label name for pinning (such as "Recommended"). Leave it blank to always use the latest post.
3. Add the label to the post. Go to blogger.com, edit the post you want to pin, and add the label you set. Publish it properly.
4. Export the XML and check the result. Click Export, upload it to Blogger, then check that the featured section shows the post you pinned correctly on the homepage.

A smart fallback: never empty

A well-considered detail of the featured section is that if no post carries the label you set, the system shows the latest post as the featured one automatically. This matters a lot, because it means the featured section always has content to show and is never empty or broken even before you pin anything.

Having a fallback like this makes the feature usable from day one. You install the theme and the featured section immediately shows the latest post, then when you are ready, you pin the post you want. It is a design that accounts for the real situation, where users may not have configured everything yet. Instead of leaving the section empty and looking broken, the system fills it with reasonable content.

The featured section and content strategy

The featured section is a strategic tool, not just layout. It lets you control what content you emphasize to new readers. Examples of strategic use: pin an introduction post for new readers, pin a post that converts well, pin seasonal or campaign content, or pin a high-quality post you want to be the face of the site.

Used together with a Hero that welcomes at the top and a post grid that shows general content, the featured section adds another layer of control over what the homepage communicates. You can design the homepage experience to lead readers to the most important content first, which is a purposeful use of homepage space, not just showing posts in chronological order.

The featured section and magazine-style sites

The featured format is at the heart of news and magazine site design, where the homepage is not just posts in time order but has an "editor" choosing which story should be at the top and stand out most. The featured section brings this idea to Blogger, letting you be the editor of your own site, choosing what readers see first, which is control over the homepage's storytelling.

For a site with varied content that wants to look like professional media, arranging one large highlight with secondary posts around it creates a clear visual hierarchy. Readers instantly know which story is most important. This format makes the homepage look managed and more interesting than a grid where every post has equal weight. The featured section is therefore not just a feature but a tool to give your site a print-media identity.

Cautions when pinning

Although the featured section is powerful, there are cautions. First, do not pin the same post for too long so regular readers see it repeatedly on every visit, which makes the homepage feel static and stale. You should review and rotate pinned posts periodically to keep the homepage fresh and moving.

Second, do not pin too many posts so the featured section becomes like a normal post grid. The power of the featured section comes from "choosing" a few pieces that truly matter. If you pin everything, nothing stands out. Limiting the number appropriately and choosing only content with real strategic value lets the featured section do its job fully. Restraint in what you choose is the key to using this feature effectively.

Common problems and how to fix them

You pinned a post but it does not show as featured

Check that the label you entered on the post exactly matches the label name set in the Featured block. They must be spelled the same to pin, and check that the post is published.

The featured section shows the latest post instead of the pinned one

This is fallback behavior. If no post carries the label, the system uses the latest post. Check that you applied the label correctly.

You want to change the featured post

Go to blogger.com, remove the label from the old post and add it to the new one. The change is reflected without editing the theme.

You do not see the pin label option

The pin-by-label option is in the magazine template. If you use another template, the featured section may show the latest post according to that template's design.

Best practices

• Set an easy-to-remember pin label, and spell it the same in the block and the post.
• Pin strategically important posts, such as an introduction post or content you want to promote.
• Use pinning of several posts to emphasize several important pieces, with the first as the large highlight.
• Review pinned posts periodically, updating them to match campaigns or seasons.
• Use it together with a Hero and a post grid to design the homepage purposefully.

Wrapping up

The featured section is a strategic tool that lets you control which content should stand out on the homepage, instead of always letting the newest post go first. With BlogKub you can pin a recommended post with a label, managing it directly from the Blogger side, pin several posts with the first as the large highlight, and if you have not pinned anything, the system uses the latest post automatically so the section is never empty. Used strategically with a Hero and a post grid, the featured section lets you design the homepage to lead readers to the most important content, a purposeful use of homepage space that boosts the results you want.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a footer (links + copyright) in a Blogger theme

The footer is where readers look when they scroll to the bottom: policy links, contact channels, categories, and site info. A well-organized footer aids both navigation and credibility. This article teaches you how to set up the footer in a Blogger theme with BlogKub, including the site description, link columns, copyright, and a background color where the text adjusts readability automatically.

Updated 16 July 2026   About an 8 minute read   Level: Beginner

What a footer is, and why it is worth more than you think

A footer is the bottom bar of the site that appears on every page, usually with a site description, link columns, and copyright text. Many people overlook the footer, thinking it is just a closing bit, but it actually plays an important role, because it is where readers instinctively look for certain things, such as a contact channel, the privacy policy, or a link not in the main menu.

The footer acts as a "safety net" for navigation. When a reader scrolls to the bottom and has not found what they want, the footer is the last chance to give them an option to continue, instead of leaving a dead end. Moreover, a footer with complete, organized information signals that the site is serious and credible, which affects the reader's overall feeling.

The editable parts of the footer

BlogKub's footer lets you edit all the main parts.

• Site description: a short text saying what the site is about, usually placed with the logo, reinforcing the brand identity.
• Link columns: organize links into groups, such as content categories, resources, and policy, with the footer manager, so readers find the link they want easily.
• Copyright text: the bottom line stating ownership, such as © 2026 site name.
• Background color: choose the footer's background color, with the text adjusting readability automatically.

The footer also uses the same logo and blog name as the header, which sync with SEO/schema, so it is consistent site-wide with a single setup. This consistency makes the site feel systematic and professional.

How to set up the footer, step by step

1. Select the footer block. Most templates ship with a footer. Select the "Footer" block to edit, or add it yourself.
2. Add the description and link columns. Type a short site description and use the footer manager to build link columns, grouping links by category.
3. Choose a background color and add copyright. Choose the footer background color (the text adjusts to white/black for readability itself) and type the copyright text.
4. Export the XML and check. Click Export, upload it to Blogger, then view the footer on both desktop and mobile, confirming the links work and the text is readable.

Background color with automatic text adjustment: a detail that helps you

The classic problem with choosing a footer background is that a dark background with dark text is unreadable, or a light background with light text disappears. BlogKub solves this by adjusting the text color to white or black automatically based on how dark the background you chose is. If you choose a dark background, the text is white, and if you choose a light background, the text is dark.

This detail lets you choose a background freely without worrying about readability. The system keeps the contrast at a comfortable level always. This is an example of "error-preventing" design for the user. Instead of letting you choose a color that could make the footer unreadable, the system handles readability, so you can fully focus on choosing a color that fits your brand.

The footer, credibility, and E-E-A-T

The footer is where you place key links that signal the site's credibility, especially links to pages like About, Privacy Policy, Terms of Service, and a contact channel. Google values these signals in the E-E-A-T framework (Expertise, Experience, Authoritativeness, Trust). A site with these pages, easily reachable from the footer, looks more serious and trustworthy.

In practice, having policy and contact links in the footer is not just about SEO but a standard of a good site. Readers expect to find this information, and if your site runs ads or collects any data, having clear policy pages is necessary. The footer is therefore a strategic place to put these links so readers and search engines can reach them from every page.

The footer and secondary navigation

Beyond credibility, the footer serves as valuable secondary navigation. Footer column links let readers reach categories or key pages even at the bottom of the page, giving an option instead of a dead end. You can place links to popular articles, main categories, or resources you want to promote, to prompt readers to explore further.

Used with the header for main navigation and other read-on elements like related posts, the footer is another layer of the navigation system that keeps readers from easily hitting a dead end. Designing every point of the site to have a way forward is a key principle for keeping readers on the site longer.

A good footer is a detail people notice

Even though readers spend less time on the footer than other parts, a well-organized footer makes a difference in the overall feeling. A site with an empty or cluttered footer often looks unfinished, while a footer with complete, organized information and useful links makes the site look serious and cared for. This feeling accumulates with other good elements into an impression that the site has standards.

In practice, the footer is also where genuinely intent readers look for information, such as someone who wants to contact you, someone who wants to read the policy, or someone considering how credible the site is. Investing a little time to organize the footer well is therefore worthwhile, because it serves these high-intent readers and closes the visit experience neatly.

Common problems and how to fix them

The footer text is hard to read

Normally the system adjusts the text color for readability based on the background. If it still feels hard to read, it may be because you chose a color midway between light and dark. Try a clearly dark or clearly light color for better contrast.

Column links do not show

Check that you added the links in the footer manager and Exported again. Blank links do not show. Check that you filled in both the text and the URL.

The footer looks cramped on mobile

On small screens, columns stack instead of sitting side by side, which is normal. If you have very many links, consider reducing the columns or links to keep the footer from getting too long.

The footer logo does not match the header

The footer uses the same logo/name as the header. If it does not match, check the logo setting in the header/SEO, because both pull from the same source.

Best practices

• Always include policy links (Privacy, Terms) and a contact channel in the footer, for credibility.
• Organize links into columns by group so readers find them easily, not everything in one pile.
• Write a short site description reinforcing what the site is about.
• Choose a background color that fits the brand. The system adjusts the text readability itself.
• Place links to popular categories or articles to prompt further exploration.

Wrapping up

The footer is an often-overlooked element with an important role in both navigation and credibility. With BlogKub, you set up the footer fully with no coding, including the site description, link columns, copyright text, and a background color where the text adjusts readability automatically, plus the same logo and name as the header for consistency. When you place policy and contact links to reinforce E-E-A-T, organize links into easy-to-find groups, and give readers an option instead of a dead end, your footer makes the site look systematic, credible, and helps keep readers on the site better.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a header (logo + menu) in a Blogger theme

The header is the first thing readers see and the navigation hub of the whole site. A good header makes the site look professional and easy to use on every device. This article teaches you how to set up the header in a Blogger theme with BlogKub, including the logo, multi-level menus, mobile menu, search button, sticky, and an automatic mobile bottom bar, with no coding.

Updated 16 July 2026   About a 10 minute read   Level: Beginner

What a header is, and why it matters

A header is the top bar of the site with the logo, blog name, and navigation menu. It appears on every page, so it is both the brand's face and the navigation hub. Readers use the header to know what site they are on and to reach the site's sections. A well-designed header therefore affects both the first impression and ease of use.

The header's challenge is working well on both large and small screens. On desktop there is room for a full horizontal menu, but on mobile it has to collapse compactly while staying easy to use. BlogKub handles this complexity automatically. You set up the menu once and the system adapts the display to each device itself.

Logo and blog name: syncing with SEO and schema

The header lets you add both a logo image (via URL) and blog name text. The refined part is that both values sync to the SEO settings and schema automatically. The blog name becomes the site name in the SEO data, and the logo URL becomes the Logo in the Organization schema, which Google uses to build the brand's Knowledge Graph.

This consistency matters, because it keeps your brand info the same across the site, with no repeated entry and no risk of mismatched typing. For the logo, a transparent PNG around 512×512px and under 200KB is recommended, to be crisp and load fast. Set it once and the header, footer, and schema all use one consistent set of data.

How to set up the header, step by step

1. Add or select the header block. If you already picked a template, it usually ships with a header block, or add the "Header" block yourself.
2. Add the logo and blog name. Paste the logo image URL and type the blog name, which syncs to SEO and schema automatically.
3. Arrange the menu and mobile options. Use the menu manager to add, remove, rename, reorder, and create submenus, choose the mobile menu side (left/right), turn on the search button, set sticky, and enable the mobile bottom bar as you like.
4. Export the XML and check on every screen. Click Export, upload it to Blogger, then view the header on both desktop and mobile, confirming the menu, search button, and bottom bar work correctly.

Multi-level menus: organize your content tidily

BlogKub's menu manager lets you build menus freely, adding, removing, renaming, and reordering by dragging. A key highlight is submenu (dropdown) support, letting you organize content into layers, such as a main "Articles" menu with submenus for "Travel", "Food", and "Reviews" inside.

Submenus are very valuable for sites with many categories, because they keep the main menu bar from getting too long and cluttered, and help readers see the site's content structure clearly. Instead of a dozen menu items in a row, you group them under a few main menus, keeping it both clean and easy to find. You can also toggle icons in front of menu items, to add interest and help readers remember menus by their symbol.

The mobile menu: hamburger + automatic bottom bar

On mobile, limited space makes a full horizontal menu unusable, so BlogKub handles it automatically with two elements working together.

• Hamburger button + slide panel: the menu collapses to a three-line button, and tapping it slides a menu panel out from the side. You choose whether it slides from the left or right as you prefer. This panel shows all menus, including submenus.
• Bottom navigation bar: a bar pinned to the bottom of the screen on mobile, showing key items like home, search, menu, mode, and share, so readers tap with a thumb conveniently without reaching to the top. It appears automatically when enabled.

Having both makes mobile readers navigate very conveniently. The bottom bar puts frequent actions within thumb reach, while the hamburger panel holds all menus for when they want the full list. This is the standard of modern apps and sites that BlogKub brings to your Blogger blog without you designing it yourself. To understand the whole menu customization picture, read more on the About BlogKub page, which describes the menu system.

Search button and sticky: navigate anytime

The header also has extra options that raise navigation. The first is a search button that lets readers call up a search box straight from the header, good for content-heavy sites where search matters, and pairs well with the search box. The second is sticky, which keeps the header pinned to the top edge as you scroll down.

The benefit of sticky is that the menu and search button are within reach at all times. A reader who scrolled far down and wants another page can go there immediately without scrolling back to the top, greatly reducing navigation friction, especially on long pages. That said, on mobile where the bottom bar already exists, consider whether you need the header sticky too, so it does not take up too much screen space.

The header, first impressions, and branding

The header is where the first impression forms. A clear logo and name tell readers immediately who the site is and what it is about. An orderly, easy-to-use header signals the site has standards and is credible. Conversely, a cluttered header or confusing menu makes readers feel bad from the first second.

Because the header appears on every page, it is what builds the brand identity readers see repeatedly until they remember it. A consistent logo, colors that match the theme, and a stable menu give your site a clear identity. Used with a consistent footer, your site feels like a deliberately designed product, not a blog thrown together casually.

Common problems and how to fix them

The logo does not show or is blurry

Check that the logo image URL is correct and reachable. Use a transparent PNG of a suitable size (around 512×512px). Too small an image gets blurry when scaled.

The submenu does not open

Check that you structured the submenu correctly under the main menu in the menu manager, and Export again. On mobile the submenu shows in the hamburger panel.

The bottom bar does not appear on mobile

Check that you enabled the bottom bar option, and view it on a real mobile screen, because this bar is designed for mobile and does not show on desktop.

The header covers content when sticky

This is normal sticky behavior, with the header floating over. The system already reserves spacing for content. If it feels like it takes too much space on mobile, consider turning off sticky on small screens or using the bottom bar instead.

Best practices

• Use a good-quality transparent PNG logo and set a clear blog name, because they sync with SEO/schema.
• Keep the menu concise, using submenus to group categories instead of an overly long main menu.
• Choose the mobile menu side to suit the hand most readers hold with (right is often convenient).
• Enable the mobile bottom bar for convenient thumb navigation.
• Test the header on both desktop and mobile before publishing every time.

Wrapping up

The header is both the brand's face and the navigation hub that appears on every page. With BlogKub, you set up the header fully with no coding, including a logo and blog name that sync with SEO/schema, multi-level menus with submenu support, a hamburger mobile menu with a choice of side, an automatic mobile bottom bar, a search button, and sticky top. The system handles the display for every device itself. When you set it up tidily and test on every screen, your header makes the site look professional, easy to use, and creates a good first impression for readers every time they arrive.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a homepage Hero banner in a Blogger theme

The Hero is the big welcome banner readers see first when they land on the homepage. It has a few seconds to say what the site is and why to stay. This article teaches you how to set up the Hero in a Blogger theme with BlogKub, editing the text, button, image, alignment, and background, along with template-specific options and how to write it effectively.

Updated 16 July 2026   About a 9 minute read   Level: Beginner

What a Hero is, and why it is the most important part of the homepage

A Hero is the large main banner at the top of the homepage, usually made of a bold heading, short subtext, and a call-to-action button (CTA), with an accompanying image. It is the most valuable space on the site, because it is the first thing readers see without scrolling (above the fold), and it decides whether readers stay or leave within a few seconds.

The Hero's job is to answer three questions in the reader's mind immediately: "What is this site?", "How does it relate to me?", and "What should I do next?" The heading says what the site is, the subtext says the value the reader gets, and the CTA button guides the next action. When the Hero answers all three clearly, readers understand and tend to explore further.

The editable parts of the Hero

BlogKub's Hero lets you edit every part, and every text can be left blank to hide it, so you can design anything from minimal to fully featured.

• Eyebrow: a short text above the heading, such as "✦ Personal blog", to categorize or add context. Leave it blank to hide.
• Heading (title): the most prominent text, saying what the site is. It should be short and powerful.
• Subtext (subtitle): expands the heading slightly, stating the value or what the reader gets.
• CTA button: a button that guides an action, such as "Read the latest posts".
• Circular image: an accompanying image (such as a profile photo or brand image), which you can toggle and set the URL for.

You can also choose the alignment between left or center, and choose a background in three styles: gradient (bright), dark (premium), and soft (clean). This flexibility lets the Hero fit the kind of site and mood you want.

How to set up the Hero, step by step

1. Select the Hero block. Most templates ship with a Hero on the homepage. Select it to edit, or add a Hero yourself.
2. Add the text and button. Set the eyebrow, heading, subtext, and CTA button text (leave fields blank to hide what you do not want).
3. Choose alignment, background, and image. Choose left or center alignment, a gradient/dark/soft background, and toggle the circular image and set the image URL you want.
4. Export the XML and check. Click Export, upload it to Blogger, then view the Hero on both desktop and mobile, confirming the text reads easily and the button is tappable.

Template-specific options: a Hero that fits the kind of site

What makes BlogKub's Hero smart is that it adapts the options to each template, because different kinds of site need different elements.

• Review template: a review rating bar in the Hero, with a score (such as 4.8/5) and a review count, to build credibility on sight.
• Course template: a feature list (chips) you add line by line, to show what students get in a quick scan.
• Sidebar-blog template: tags in the Hero to state the blog's main topics.
• Company template: an extra secondary button, such as "Contact us", alongside the main button, to support multiple goals.

Having Hero options that match the kind of site lets you communicate on point without customizing it yourself. The review template gets credibility from the score, the course template gets to show its selling points, and the company template gets varied CTAs. All of it is designed to fit what each kind of reader is looking for.

Write an effective Hero heading and CTA

Because the Hero has a few seconds, the writing matters a lot. The principle of the heading is "short, clear, and stating the value". Avoid broad headings that say nothing, like "Welcome", and choose one that says what the site offers, such as "The most worthwhile product reviews" or "Build your own website in 30 days". Readers should understand within a few seconds what the site is about and whether it matches what they want.

The CTA button should guide a clear action with motivating words, such as "Read the latest posts", "Start learning free", or "See all reviews", which is better than a neutral "Click here". A good button tells the reader what they get by clicking, so they click with confidence. When the heading, subtext, and CTA work together consistently, the Hero effectively turns visitors into readers who explore the site further.

The Hero, first impressions, and staying

User behavior research finds that readers decide to stay or leave within the first few seconds, so the Hero is the gateway that determines whether readers scroll on or close. A clear, attractive Hero reduces the "bounce rate", because it communicates value fast enough to hold readers.

When the Hero does its job well, readers scroll down to other sections, such as article groups and recommendations. Designing the Hero to flow smoothly into the next section is therefore important. A CTA button that leads to the latest posts or a content section helps guide readers into the site naturally. Used with a header that navigates easily and an interesting group of articles below, your homepage works as a system for turning visitors into readers.

The Hero, SEO, and speed

The Hero heading is usually the largest text on the homepage and an important element search engines weigh. Writing a heading that clearly says what the site is about helps readers and also helps search engines understand the site's main topic. That said, keep the heading meaningful to readers first, not stuffed with keywords until it reads unnaturally, because the reader experience matters more and benefits SEO over the long term.

On speed, if the Hero has a large image, use an appropriately resized and compressed image, because the Hero image is usually the first to load and affects LCP (Largest Contentful Paint), one of the Core Web Vitals. Choosing a light image helps the homepage open fast, creating a good first impression in both look and speed. If you do not need an image, a text-only Hero with a gradient background is an option that is both beautiful and light.

Common problems and how to fix them

The Hero image does not show

Check that you turned on the image option and set a correct, reachable image URL. If you do not want an image, turn off this option for a clean text-only Hero.

The Hero text is too long on mobile

A long heading and subtext push up the Hero's height on small screens. Keep the text concise, especially the heading, so the Hero looks good on every screen.

The background blends with the text

Choose a background that contrasts with the text color, such as a dark background with light text. The system tunes readability to a degree, but choosing a clearly contrasting pair reads most comfortably.

Template-specific options do not appear

Options like a rating bar or feature chips depend on the chosen template. If you do not see them, the current template does not have that element, which is by design for each kind of site.

Best practices

• Write a short, clear heading that states the value, so readers understand within a few seconds.
• Use a CTA button that states the action clearly. Avoid neutral words like "Click here".
• Choose a background and alignment that fit the site's mood, and contrast with the text for readability.
• Use template-specific options (rating/features/secondary button) to communicate to the right kind of site.
• Test the Hero on both desktop and mobile, especially text length on small screens.

Wrapping up

The Hero is the most valuable space on the homepage, because it is the first gateway deciding whether readers stay or leave. With BlogKub, you edit every part of the Hero with no coding, the eyebrow, heading, subtext, CTA button, circular image, alignment, and background, plus template-specific options that make the Hero fit the kind of site, whether a review's rating bar, a course's features, or a company's secondary button. When you write a clear heading and CTA, choose a design that fits the site's mood, and test on every screen, your Hero creates a strong first impression and leads readers into the site effectively.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build an image block (with ALT + caption) in a Blogger theme

Images are a key part of a site that looks good and reads well, but a good image is not just pretty. It needs correct ALT for SEO and accessibility, and a suitable ratio for a tidy look. This article teaches you how to add an image block to a Blogger theme with BlogKub, with ALT, a caption, and ratio choices.

Updated 16 July 2026   About an 8 minute read   Level: Beginner

What the image block is, and when to use it

The image block is an element for placing a single image in the theme, with ALT, caption, and ratio settings. Use it when you want to place an image on a page (such as the homepage, a static page, or parts of the theme) with control over how it displays. Unlike inserting an image into article content through the Blogger editor, the image block is part of the theme structure you arrange.

The image block is valuable because it handles the details people often forget, especially ALT and the ratio. Having a clear field for ALT reminds you to add it every time, and choosing a ratio keeps images in the same spot at a consistent size instead of jumping around, so the page looks tidy and professional.

ALT: the small detail that matters for SEO and accessibility

ALT (alternative text) is text that describes what the image is. It does not show to general readers, but it plays two important roles. The first is SEO: search engines cannot read what an image depicts, so they rely on ALT to understand it, which affects whether your image appears in image search (Google Images). The second is accessibility: users who cannot see use screen readers that read the ALT aloud, so they can perceive the image content.

Writing good ALT means describing the image meaningfully and concisely. For example, "Sunset view at Patong Beach, Phuket" is better than "image" or "image1", and you should not stuff keywords unnaturally, because it looks like spam. Good ALT states what is really in the image, which helps both search engines and readers using a screen reader. This connects to the principle of making images show in Google that we mention in the Lightbox and image slider articles too.

How to add an image block, step by step

1. Add the image block. Drag the "Image" block from the library into the spot you want, such as the homepage or a section of the theme.
2. Set the image URL and ALT. Paste the image URL and add ALT that conveys the real meaning of the image. Do not leave it blank, because it matters for SEO and accessibility.
3. Add a caption and choose a ratio. Add a caption below the image if you want, and choose a 16:9, 4:3, or 1:1 ratio to match the image type and position.
4. Export the XML and check. Click Export, upload it to Blogger, then check that the image shows at the right ratio, crisp, with correct ALT and caption.

Choose a ratio to match the image type

The image block offers three ratios, and the system crops the image to fit the chosen ratio for a tidy look. Choosing one that matches the image type makes it look its best.

• 16:9 (wide landscape): good for scenery, atmosphere shots, banners, or cover images, giving a spacious, cinematic feel.
• 4:3 (standard): a classic, balanced ratio, good for general images that do not need to be especially wide or square.
• 1:1 (square): good for product images, profile pictures, or images that want symmetry, a ratio popular on social media.

The benefit of locking the ratio is consistency. When images in the same spot share a ratio, the page looks orderly, with no oddly tall or short images. That said, cropping to a ratio means part of the image may be cut, so choose an image with the important subject centered, or a ratio close to the original, to reduce cutting out something important.

ALT vs caption: how they differ

Many people confuse ALT with the caption, because both concern the text of an image, but they serve different jobs. ALT is alternative text that general readers do not see, used by search engines and screen readers. The caption is text shown below the image that every reader sees, used to give context or describe the image further.

The two complement each other well. ALT describes what the image is for those who cannot see and for search engines, while the caption gives information every reader benefits from, such as the source, a place name, or an interesting note. You do not need to write both the same, because they serve different jobs. ALT focuses on describing the image content directly, while the caption adds context for the reader. Using both appropriately makes your images both SEO-friendly and informative for readers.

Speed: keep images light

Images are one of the biggest factors in site speed. A large image makes the page load slowly and affects Core Web Vitals, especially LCP (Largest Contentful Paint), which is often affected by a big image near the top of the page. So before uploading, resize the image to fit what will actually display and compress the file smaller without losing too much quality.

Using an image sharp enough to be crisp but not larger than necessary is a good balance. An image much larger than what displays wastes loading for no benefit. There are plenty of free image compression tools that reduce file size. Keeping images light is a good habit that affects both the reader experience and your speed-side SEO score. When images are beautiful, have correct ALT, and are light, you benefit on every front.

Images, storytelling, and engagement

Images are not just decoration, they are a powerful storytelling tool. Research finds that people remember information with visuals much better than plain text, and content with images tends to get higher engagement and shares. Good images explain what text struggles to, create emotion, and make a page more readable. Caring about choosing and placing images therefore affects both the reader's understanding and impression.

That said, an image should support the content, not just fill space. A relevant, meaningful image is worth more than a pretty one unrelated to the subject. Choosing images that fit the content and placing them at the right moments lets images do real storytelling. Combined with good ALT and a suitable ratio, images become elements that are beautiful, meaningful, and SEO-friendly all at once.

Image copyright: something to care about

An important thing bloggers often overlook is image copyright. Using an image from the internet without checking the rights can infringe copyright and lead to legal trouble. Use images you took yourself, licensed images you bought, or free images from sources that permit use (such as images under an open license), and follow each source's conditions, like giving credit if required.

Using images correctly not only avoids problems but reflects the site's professionalism and credibility. There are plenty of quality free image sources today, so choosing images from legitimate sources is not hard, and it is a good habit to have from the start of building a site. When you care about quality, relevance, ALT, speed, and copyright, you use images fully and correctly.

Common problems and how to fix them

The image does not show

Check that the image URL is correct and reachable externally. If you use an image hosted somewhere that requires login or is restricted, it may not show. Use an image hosted openly and reachable.

The image crops out something important

The system crops the image to fit the chosen ratio. If something important is cut, try a ratio closer to the original, or use an image with the important subject centered.

Forgetting to add ALT

Always add ALT, because it matters for SEO and accessibility. If you leave it blank, the image misses its chance to be discovered and screen reader users cannot access it.

Images slow the page down

Resize and compress images before uploading, because large images affect speed and LCP the most.

Best practices

• Add ALT that conveys the real meaning of the image every time. Do not leave it blank and do not stuff keywords.
• Choose a ratio to match the image type (16:9 scenery, 4:3 general, 1:1 product/profile).
• Use a caption to give extra context every reader sees.
• Resize and compress images before uploading to keep speed and LCP good.
• Choose images with the important subject centered to reduce cropping it out.

Wrapping up

The image block helps you place images in the theme with control over the important details. With BlogKub, you set the image URL, ALT that matters for SEO and accessibility, a caption below the image, and a 16:9, 4:3, or 1:1 ratio, and the system crops the image to fit for a tidy, consistent look. The key to using images well is always adding meaningful ALT, choosing a ratio to match the image type, and managing file size to keep speed. Do all of this and your images will be beautiful, follow SEO best practice, be accessibility-friendly, and not weigh the site down, which is the standard of a quality site.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build recent and random posts (Recent & Random Posts) in Blogger

When a reader finishes an article, the question is "what should I read next?" If you do not suggest one, they usually close the page. A recent or random posts section answers that question by offering another article to read on. This article teaches you how to add it to a Blogger theme with BlogKub, pulled from the feed automatically and filterable by label, plus settings and fixes.

Updated 16 July 2026   About a 9 minute read   Level: Beginner

What the recent/random section is, and what it helps

This section is a grid of post cards that pulls posts from your blog to display, letting you choose to show "recent posts" in chronological order or "random posts" shuffled. Place it wherever you want to prompt readers to read on, such as at the end of an article, the homepage, or before the footer.

The main value is extending the time readers spend on the site and raising the number of pages they read per visit. When readers finish and see an interesting card for another article, the chance they click to read on is much higher than closing the page. This is the same principle big content platforms use: "never leave a dead end, always offer the next thing".

Pulled from the Blogger feed: updates itself automatically

The strength of this feature is that it pulls data straight from your Blogger post feed. When the page loads, the system calls the feed to take posts' cover images, titles, and dates and build them into cards. The result is that this section updates itself every time you publish a new post, with no going back to edit the theme or add links yourself.

This is an advantage over a fixed post list that needs manual updates every time. The automatic system means your site looks alive and current always, with new posts appearing here immediately, while random mode also revives older posts that still have value so they get read again, making use of the content archive you have built.

How to add the recent/random section, step by step

1. Add the recent/random block. Open the left block library and drag the "Random/Latest by label" block into the spot you want, such as at the end of an article or on the homepage.
2. Choose the mode and settings. Choose "recent" or "random" mode, set the heading (such as "Latest posts"), the post count, the number of columns, and a label if you want to filter to a specific category.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Check the post display. Open the live site to confirm the cards show the image, title, and date completely, lay out in columns correctly, and do not repeat the current article in the list.

Recent mode vs random mode: how to choose

The two modes have different strengths and suit different positions.

• Recent mode: shows the newest posts by time, good for the homepage or a spot where you want readers to see the blog's latest activity, like "what's new", signaling your site is still active.
• Random mode: shuffles posts on every load, good for the end of an article or a spot where you want to prompt discovery, helping good older posts get read and not be forgotten because they scrolled far away.

The tip is you can use both in different positions, such as recent mode on the homepage to show freshness and random mode at the end of an article to invite exploring the archive. This mix presents both new and old content in balance.

Filter by label: recommend to the right group

Setting a label makes this section pull only posts in the category you specify. The clearest benefit is recommending posts in the "same category" the reader is interested in. For example, if they are reading a travel article, showing other travel articles is more on-target than a random draw from every category.

On-target recommendations significantly raise the chance of clicking to read on, because they fit the interest the reader already showed through the article they chose to read. This idea is similar to related posts but more flexible in the choice of mode and label, so you can design content navigation to suit each position on the site.

Not repeating the current article: an important detail

A small detail that makes this feature genuinely usable is that the system filters out the current page automatically. Imagine a reader reading article A and the "latest posts" section at the bottom showing article A again. That would look unprofessional and useless. So the system checks the current page URL and removes it from the list, keeping every card another article the reader has not read on this page.

This kind of detail is what separates a "well thought-out" feature from one done casually. Caring about these edge cases makes the reader experience smooth without them even noticing, which is the goal of good design.

Examples of use in different kinds of blog

• News/update blogs: recent mode on the homepage to show new stories, letting readers see the latest activity at once.
• How-to/knowledge blogs: random mode filtered by label at the end of an article, to invite reading same-category articles still useful even if old.
• Travel/lifestyle blogs: show same-category posts with beautiful images, drawing readers on with visuals.
• Review blogs: recommend other reviews in the same category to readers comparing options.

A note on speed

Because this section pulls data from the feed on page load, set the post count sensibly, not more than necessary. Showing around 6 cards is usually just right. The images used are small thumbnails so they load fast, and the system uses lazy loading for card images, helping keep the impact on the first page load low.

As with other feed-pulling features, choosing appropriately sized cover images helps both this section and the overall page load faster. Good image management is therefore the key to a feature that is beautiful and not sluggish.

Common problems and how to fix them

The post section does not show

The system hides this section if it cannot pull posts. Check that the blog has published posts, and if you set a label, make sure there are actually posts in that category. A label with no posts has nothing to show.

Cards have no image

Cards use the post cover image. If a post has no cover image, that card may have no image. Add a cover image to every post so the cards look complete.

Posts shown do not match the category

Check that the label is set to match the actual label name used in the posts. It must be spelled the same to filter to the right category.

Random mode repeats the same posts often

Random mode shuffles from the set of posts pulled. If the blog has few posts, the variety is naturally limited. As you write more posts, the variety of the shuffle increases.

Best practices

• Use recent mode on the homepage to show freshness, and random mode at the end of an article to invite exploring the archive.
• Set a label to recommend same-category posts, raising relevance and clicks.
• Add a cover image to every post so cards look complete and attractive.
• Set a sensible post count to keep the page fast.
• Use it with related posts and bookmarks to raise the chance readers keep reading and return.

Wrapping up

The recent/random posts section is a key tool for extending the time readers spend on the site and raising the number of articles they read per visit. With BlogKub, you just add the block, choose recent or random mode, set the heading, count, columns, and label, and Export it. The system pulls posts from the feed automatically, shows them as cards with an image, title, and date, filters out the current page, and updates itself every time you publish a new post. Placed in the right spot and filtered to the right group, this section helps both new and old content get read, and turns readers about to close the page into ones who stay and explore your site more.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add a Newsletter signup box in a Blogger blog

Social media and search engines control who sees your content, but email is a channel you fully own. A Newsletter signup box helps turn passing readers into followers you can send new posts to directly. This article teaches you how to add one to a Blogger theme with BlogKub, along with connecting an email service and approaches that work.

Updated 16 July 2026   About a 9 minute read   Level: Intermediate

Why a Newsletter matters for a blog

A Newsletter is where readers give their email to receive new posts or news from you through their inbox. The core value is in the phrase "owning the channel". When people follow you on social media, whether they see your posts depends on an algorithm you do not control, just like search traffic that rises and falls with rankings. But an email list is yours. When you have a new post, you can send it straight to everyone on the list.

This is why professional creators and bloggers put great importance on building an email list, because it is a long-term asset that does not disappear even when other platforms change the rules. Email followers also tend to be engaged and returning readers, because they deliberately signed up to receive your content specifically.

Something to understand: Blogger does not store emails itself

The key thing to understand first is that Blogger is a purely reader-side site with no backend for storing emails. So BlogKub's Newsletter box serves as a "ready-to-use, good-looking form", while the actual receiving, storing, and sending of emails relies on an external email service you connect.

This is not a strange limitation but the standard way of the web at large. Specialized email services do this far better, including managing lists, sending bulk emails without landing in the spam folder, handling unsubscribes, and complying with privacy law. BlogKub's job is to provide a beautiful form that fits the theme, and leave the rest to a specialized service.

How to add the Newsletter box step by step

1. Add the Newsletter block. Open the left block library and drag the "Newsletter" block into the position you want, such as at the end of an article, the homepage, or before the footer.
2. Set the heading, subtext, button, and background. Type an inviting heading (such as "Get the news first"), subtext stating the benefit, button text, and choose a soft, gradient, or dark background to match your site's tone.
3. Connect an email service. Take the form code or action URL from the email service you use and connect it to the form, so the emails readers enter are sent to that system.
4. Export the XML and test. Click Export, upload it to Blogger, then test subscribing with a real email, confirming the email lands in the list of the service you connected.

Choose a background and write an effective invitation

The Newsletter box has 3 backgrounds to choose from, each with a different feel. The "soft" one blends seamlessly into the page, ideal when you do not want the box to stand out over the content. The "gradient" one is bright and eye-catching, ideal for drawing attention. And the "dark" one looks premium and contrasts with a light page, ideal for creating a focal point. Choose based on the placement and tone of your site.

Just as important is the invitation. People give their email only when they see a clear benefit. Instead of writing just "Subscribe to news", try being specific about what they get, such as "Get new posts every week, plus tips not published on the site" or "Free, no spam, unsubscribe anytime". Stating the benefit and reducing spam worry genuinely raises the signup rate.

Where to place the Newsletter box

Placement affects the number of signups a lot. The spots that work well are usually the moments when a reader feels the value.

• End of the article: readers who finished are the ones who like your content most, a golden moment to invite them to follow.
• Homepage: place it in a visible spot to catch readers exploring the site, ideal for blogs with heavy homepage traffic.
• Before the footer: a standard spot readers expect to find, unobtrusive to reading but still visible.

You can place it in more than one spot, but be careful not to make it so frequent it becomes annoying. Having a box at the end of the article plus one near the footer is often just right. Experiment to see which placement works best for your readers.

The Newsletter and building a stable reader base

In terms of long-term growth, a Newsletter is one of the highest-return tools, because it changes your relationship with readers from "found by chance" to "deliberately following". Every time you send a new post, you bring followers back to the site directly, which is stable traffic not dependent on external factors.

Used together with features that encourage returning and reading on, such as bookmarks to save for later and latest/random posts to invite exploring content, the Newsletter is another layer that binds readers to your site. Accumulating an email list from day one is therefore a worthwhile investment. Even if signups are few at first, it grows and compounds over time.

Privacy and doing it right

Collecting emails is collecting personal data, so it comes with responsibility. You should tell subscribers clearly what you will use their email for, how often you send, and that there is a way to unsubscribe anytime. These should be consistent with your site's privacy policy and relevant law, such as PDPA in Thailand.

The good news is that most good email services have tools to help, including automatic unsubscribe links in every email, consent management, and signup record keeping. Choosing a trustworthy service helps you run a Newsletter correctly without managing everything yourself. And importantly, do not send emails too frequently or send content readers did not sign up for, because that makes people unsubscribe and lose trust.

Common problems and how to fix them

Entering an email does nothing

Check that you connected the form to an email service, because an empty, unconnected box stores emails nowhere. Test with a real email and see that it enters the list of the connected service.

The confirmation email lands in the spam folder

This is normal for automated email. Good email services have settings (such as SPF/DKIM) to reduce this. We recommend telling subscribers to check the spam folder and move your email to the primary inbox.

The box does not fit the site

Try changing the background to another option (soft/gradient/dark) and adjusting the text to match the site's tone. The box already uses the theme's colors, so it blends when you choose a suitable background.

Best practices

• Connect the box to a trustworthy email service before publishing, do not leave an unconnected box.
• Write an invitation that states a clear benefit and reduces spam worry.
• Place the box at the end of the article and near the footer, the moments when readers feel the value.
• Respect privacy, provide a way to unsubscribe, and send emails only as needed.
• Use it together with related articles and share buttons to widen reach and increase the chance of new followers.

Wrapping up

The Newsletter signup box is one of a blog's most important tools for building a long-term asset, because an email list is a channel you own, not dependent on external algorithms. With BlogKub you just add the Newsletter block, set the heading, subtext, button, and background, and Export it to use, then connect the form to the email service you choose, because Blogger has no built-in email storage. Placed well, written with a benefit-stating invitation, and respecting subscribers' privacy, a Newsletter turns passing readers into regular followers you can bring back whenever you have a new post, which is the foundation of a blog that grows steadily.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a Post Grid (homepage post cards) in Blogger

The post grid is the heart of the homepage, the place readers see your posts laid out as attractive cards and choose what to click. This article teaches you how to set up a Post Grid in a Blogger theme with BlogKub, one that pulls posts from the feed automatically, adjusting the column count, image, excerpt, read more button, corner radius, and card style.

Updated 16 July 2026   About a 9 minute read   Level: Beginner

What a post grid is, and why it matters

A Post Grid is a section that shows the blog's posts as cards in a grid layout, usually on the homepage below the Hero. It is where readers explore content and decide which post to read. Each card has a cover image, title, excerpt, and date, so readers get an overview of a post before clicking.

The post grid matters because it is the "gateway" to your content. If the cards look interesting and are well laid out, readers want to click in. But if they are cluttered or dull, readers may scroll past. Designing the post grid to be attractive therefore has a direct effect on how many posts get read and on reader engagement.

Pulls from the feed automatically: cards that update themselves

BlogKub's post grid pulls posts directly from the Blogger feed, which means that when you publish a new post, it appears in the grid automatically. You do not have to add cards or links one by one. The system takes each post's cover image, title, excerpt, and date to build the card for you.

This is the advantage of working with the feed. Your site always looks alive and current. The latest post reaches the homepage the moment you publish it, unlike a fixed post list you have to update by hand every time. Using the feed lets your homepage take care of itself while you focus on writing content.

How to set up the post grid step by step

1. Add or select the Post Grid block. Most templates include a Post Grid on the homepage. Select that block to edit, or add it yourself.
2. Set the heading, columns, and count. Enter a section heading (such as "Latest posts"), choose the column count (2 to 4) and the number of posts to show.
3. Adjust image, excerpt, and card style. Toggle the image and excerpt, set the read more button text (leave blank to hide), adjust the card corner radius, and choose a style between shadow, border, or flat.
4. Export the XML and check the result. Click Export, upload it to Blogger, then check the cards display correctly and are responsive on both desktop and mobile.

Adjust the column count and card style to fit the site

The flexibility of the Post Grid lies in adjusting the card look to fit your design and site type.

• Column count (2 to 4): fewer columns (2) make the cards large and prominent, ideal for blogs where images matter. More columns (4) show more posts in one space, ideal for content-heavy sites.
• Card style: shadow gives a floating, modern feel; border gives a clean, clear look; flat gives a minimal simplicity. Choose to match your site's tone.
• Card corner radius: adjust the roundness of the corners. More rounded looks soft and friendly, squarer looks serious and formal.
• Image, excerpt, read more button: toggle as you like. An image-focused blog might feature a prominent image, while a text blog might emphasize the title and excerpt.

These adjustments help the post grid become part of your site's identity, not just a standard list that looks the same on every site. Try adjusting until you get a look that fits your brand and appeals most to your readers.

The importance of the cover image and excerpt

Because the card uses the cover image and excerpt from the post, these elements directly affect its appeal. A beautiful, meaningful cover image makes the card clickable, while a well-written excerpt tells readers what the post is about and why to read it. Paying attention to these two elements in every post helps the whole post grid look good and work well.

In practice, use a cover image of suitable size and proportions, and write a concise but enticing excerpt. If a post has no cover image, its card may look emptier than the others. Having an image on every post helps the grid look consistent and professional. Besides, good images and excerpts also affect sharing on social media, because they are often used as the preview image and text.

The post grid in a complete homepage system

The post grid works best as part of a homepage designed systematically. Generally a good homepage has a Hero welcoming at the top, followed by the post grid showing content, and perhaps other supporting sections. This ordering leads readers from the welcome to the content naturally.

Used together with a sidebar that helps navigate by category and read time shown on the cards, the post grid becomes a complete content discovery hub. Readers see the posts, know how long each takes to read, and easily choose based on interest, all of which increases the number of posts read per visit.

The post grid and site speed

Because the post grid pulls data from the feed and shows several images, the number of posts and image size affect homepage speed. Setting a reasonable number of posts (such as 6 to 9) balances showing enough content with keeping speed. The images in the cards are thumbnails and the system uses lazy loading in many cases, so it does not affect the first page open much.

What really matters is the file size of each post's cover image. If the image is very large, even when shown small in the card, the full file still has to download. Uploading cover images that are suitably resized and compressed helps both the post grid and the overall page load fast, which is good for both readers and Core Web Vitals scores, especially LCP, which is often affected by large images near the top of the page.

The post grid across different kinds of sites

The post grid adapts to almost any kind of site. Travel and food blogs where images are the star might use fewer columns for large cards showing beautiful images. News or knowledge blogs with many posts might use more columns to show more posts. Minimal blogs might choose a flat or border card style for clean simplicity. This flexibility makes the post grid an element that fits every site's identity.

Choosing settings that suit your site type helps the homepage communicate its identity at first glance. A reader entering a food blog and seeing large cards full of appetizing food images feels different from seeing a plain text list. Paying attention to adjusting the post grid to fit the content is therefore part of building an experience consistent with your brand.

Common problems and how to fix them

The post grid does not show

Check that the blog has published posts, because the grid pulls from the feed. If there are no posts yet, there are no cards to show. And check that you added/selected the block and Exported again.

The cards have no image

The cards use the post cover image. If a post has no cover image, its card has no image. We recommend adding a cover image to every post so the grid looks consistent.

The cards are too narrow on mobile

The system already reduces the column count on mobile. If it still feels narrow, try reducing the column count on desktop or check the display on a real screen.

You want to show only certain categories

The main post grid usually shows all latest posts. If you want to show only a category, consider using the latest/random posts section, which can filter by label, alongside it.

Best practices

• Add a good cover image and excerpt to every post, because the cards use these elements directly.
• Choose the column count and card style to fit your site type and how much images matter.
• Set a reasonable number of posts to keep speed and avoid an overly long homepage.
• Arrange the post grid as part of a homepage with a Hero and other elements systematically.
• Test the display on both desktop and mobile before publishing.

Wrapping up

The post grid is the content discovery hub on the homepage, where readers choose which post to read. With BlogKub you can set up the Post Grid fully with no coding. The system pulls posts from the feed automatically and shows them as cards with an image, title, excerpt, and date. You can adjust the column count, card style, corner radius, and the toggling of various elements, and it is responsive automatically. When you attend to the cover image and excerpt of every post and arrange the grid as part of a systematic homepage, your post grid draws readers to click into several posts, which raises engagement and helps your content get read more.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a Post List (horizontal list) in Blogger

Sometimes large cards waste too much space. When you want to show several posts compactly, a Post List is the answer. It shows posts as horizontal rows with a small image and a title. This article teaches you how to set it up in a Blogger theme with BlogKub, one that pulls from the feed automatically, letting you set the count and toggle the image.

Updated 16 July 2026   About an 8 minute read   Level: Beginner

What a Post List is, and how it differs from a Post Grid

A Post List shows posts as rows stacked vertically, each row with a small image and a title laid out horizontally. Unlike a Post Grid that shows cards in a grid emphasizing large images, a list uses vertical space compactly, so it can show many posts in a limited space while readers can still scan titles quickly.

This difference makes the two suit different situations. A Post Grid suits the main post section on the homepage that emphasizes image beauty, while a Post List suits narrow spaces like a sidebar, or a section where you want to show many posts without taking much space, such as a popular or latest posts list. Choosing the right one for the context helps the page have rhythm and use space efficiently.

Pulls from the feed automatically like the other sections

Like the Post Grid and the latest posts section, the Post List pulls data directly from the Blogger feed. The system takes each post's title, image, and date to display as list rows. The result is that the list updates itself every time you publish a new post, with no need to add or edit anything yourself.

Working with the feed is the same principle throughout BlogKub, which makes the various post sections take care of themselves. So you can be sure the Post List always shows the latest content while you focus on writing. The consistency of this approach also makes the features easy to understand and use, because they work alike.

How to set up the Post List step by step

1. Add or select the Post List block. Select the "Post List" block in the template, or drag it into the position you want, such as a sidebar or a supporting section.
2. Set the heading and count. Enter a section heading (such as "Popular posts") and choose the number of posts to show in the list.
3. Toggle the image. Choose whether to show a small image in front of each item. Turning off the image makes the list compact and title-focused.
4. Export the XML and check the result. Click Export, upload it to Blogger, then check the list displays correctly and is easy to read on both desktop and mobile.

Turn the image on or off: choose by space and goal

The image toggle is a decision that affects the list's look and compactness. When the image is on, each item has a small image in front of the title, helping draw the eye and provide illustration, ideal when you have enough space and want the list to be interesting. When the image is off, the list is just titles and dates, very compact, showing many posts in little space, ideal for a narrow sidebar or a long list.

The choice depends on the goal. If you want readers to scan many titles quickly, turning off the image lets them see more posts on one screen. But if you want to attract with images, turning it on is more interesting. Try both in the spot where you will place the list, and choose the one that best fits your space and readers.

The Post List in the site's navigation system

A Post List often serves as a supporting section that aids content discovery. Placed in a sidebar to show popular or latest posts, it helps a reader who is reading one article see other posts and click to read on. This increases the chance for readers to explore the site more, which lengthens their time on the site.

Used together with a sidebar that places the list beside the content, and other read-on elements such as related articles, the Post List is another layer of the system that always gives readers a reading option. Designing every point of the site to offer other posts is a key strategy for retaining readers and increasing the number of posts read.

The Post List and designing the page's rhythm

A good web page has a varied "rhythm" of presentation, not large cards stacked down the whole page. Mixing post display formats keeps the page from being dull and uses space appropriately. For example, use a large-card post grid for the latest posts you want to emphasize, then use a compact post list for a "Popular posts" or "Read more" section that does not need much space.

Alternating between large cards and compact lists creates visual variety that makes the page look designed, not just repeated content placement. The Post List is therefore a tool that lets you control the rhythm and information density in each section of the page, making the page both beautiful and space-efficient.

The Post List on mobile

A Post List has a special advantage on mobile, because the horizontal format with a small image on one side and a title on the other fits a narrow screen well. Unlike large cards that take a lot of height and require much scrolling, a row-based list lets mobile readers see several posts with few scrolls, which suits mobile scanning behavior where readers often scroll fast.

Since most readers come from mobile, having a compact post list in some parts of the page improves the mobile experience. The system already adjusts the display to suit small screens, so you can be sure the list reads easily on every device. Choosing to use a list in suitable spots is therefore a design that considers mobile readers from the start.

Common problems and how to fix them

The Post List does not show

Check that the blog has published posts, because the list pulls from the feed, and check that you added/selected the block and Exported again.

The image in the list does not appear

The list uses the post cover image. If a post has no image, its row has no image. Add a cover image to every post, or turn off the image for consistency.

The list is too long

Reduce the number of posts shown to fit the space, especially in a sidebar that should not be so long it pushes other content down.

You want large-image cards instead

If you want to emphasize images and large cards, use a Post Grid instead, which is designed specifically for a card display.

Examples of using the Post List in different kinds of blogs

• News/update blogs: a compact list of headlines in a sidebar, letting readers scan several latest news items quickly, ideal for content people want to update on fast.
• Knowledge/how-to blogs: a "Popular posts" or "Read on" list at the end of an article or in a sidebar, recommending more content without taking much space.
• Review blogs: a row list of other reviews in the same category, letting comparing readers see several options in one space.
• Content-heavy sites: an image-off list to show many titles compactly, ideal for an article index or a topic roundup page.

The common thread in every case is that a Post List helps show "many posts in little space", which complements the main post section and helps readers discover more content without making the page too long.

Best practices

• Use a Post List in narrow spaces or when you want to show many posts compactly.
• Turn the image on when you have space and want to attract, off when you want compactness.
• Set the number of posts to fit the space, not so long it pushes other content down.
• Add a cover image and a clear title to every post so the list looks good.
• Use it alongside a Post Grid and a sidebar for a complete content display system.

Wrapping up

A Post List is a compact way to show posts, suited to narrow spaces and showing many posts vertically. With BlogKub you can set up the Post List easily with no coding. The system pulls posts from the feed automatically and shows them as list rows with a small image and a title. You can set the section heading, post count, and toggle the image by space and goal, and it is responsive. When you use it in the right context, such as placing it in a sidebar to show popular posts, the Post List helps readers discover and read more posts, which supports your site's navigation and reader retention.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a Pros/Cons box + review score (Verdict) in Blogger articles

A good review article needs a spot where the reader sees the overview at a glance. The pros/cons box and the summary score box are the heart of that. This article teaches you how to add Pros/Cons and Verdict boxes to a Blogger theme with BlogKub, which lay out two columns with icons and stars automatically, ideal for any kind of review blog, plus how to use them and fixes.

Updated 16 July 2026   About a 9 minute read   Level: Beginner

Why a review article needs a summary box

Most review readers are "deciding", not just seeking knowledge. They want to know quickly what is good, what is bad, and whether to buy in the end. A common behavior is scrolling to find the summary box or score before reading all the details. The Pros/Cons and Verdict boxes answer this directly, summarizing the key points at a glance.

These boxes also make your article look professional like top review sites. Part of a review's credibility comes from a systematic presentation. When readers see clearly organized pros and cons and a reasoned summary score, they feel the review was considered thoroughly, not just an offhand opinion.

Two parts: Pros/Cons and Verdict

This feature gives two kinds of box that work together in a review article.

The Pros/Cons box

Two columns side by side. The left is "pros", a green background with a check icon. The right is "cons", a red background with a cross icon. Each column can hold several items, and the system adds an icon before each line automatically, so readers compare pros and cons in a single view.

The Verdict box

A horizontal box showing a large numeric score on the left (such as 4.5), a summary heading (such as "Excellent"), a row of gold stars, and a short summary about the product. This box is ideal as the closing summary of a review, giving readers a clear final verdict.

How to add and use the Pros/Cons + Verdict boxes, step by step

1. Add the Pros/Cons block. Open the left block library, category "Article & UX", and drag the "Pros/Cons + review score" block in to embed the review box styles in the theme.
2. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
3. Place the boxes in the review post. In HTML view, place the pros/cons box with a <div class="bk-pc"> containing a <div class="bk-pros"> and a <div class="bk-cons"> inside, each with a heading and a ul/li list, and place the score box with a <div class="bk-verdict">.
4. Check the display. Open the live article to confirm the pros box (green), cons box (red) with check/cross icons, and the score box with stars display correctly on both desktop and mobile.

Design that aids comparison

The detail that makes the Pros/Cons box work well is using color and icons that convey meaning immediately. Green with a check says "this is a pro", red with a cross says "this is a con". Readers understand without even reading the heading. Placing two columns side by side also lets the eye sweep and compare easily, unlike writing pros and cons mixed into a long paragraph.

The check/cross icons in the box are SVG embedded in the theme's style, not loaded images, so they display sharply at any resolution and do not affect speed, like the Callout box that uses the same approach, keeping your whole site's element style consistent and light.

The score box and clarity of the verdict

The large numeric score in the Verdict box acts as an "eye-rest" that gives the fastest answer in the article. A reader in a hurry may look at just the score and stars to decide, while a thorough reader reads the accompanying summary to understand the reasons. Having the number, stars, and explanation in one box therefore serves both kinds of reader.

What matters is scoring reasonably and consistently with the content. If you write several cons but give a full score, readers feel the review is insincere. Conversely, a score reasonable against the pros and cons presented reinforces credibility, which is the heart of a sustainable review blog.

On schema: do it correctly

Many people want reviews to show stars in Google results, which requires Review/Rating schema. BlogKub's Pros/Cons and Verdict boxes focus mainly on formatting content for easy, attractive reading. If you want full review schema, use BlogKub's review template designed for this, or add schema in the post based on real data.

An important caution is that Google has strict policies on Review schema. Add it only when it is a genuine review of your own and matches the displayed content. Adding score schema that does not match the content may be seen as violating the guidelines and do more harm than good. Correctness and honesty come first always. When done right, the good reader experience from these boxes already has a positive effect on being cited by AI and Google.

Examples of using it in different kinds of review blog

• Tech product reviews: pros and cons of specs and real use, with an overall score readers look for.
• Restaurant/cafe reviews: pros for taste and atmosphere, cons for price or parking, with a summary score.
• Stay/hotel reviews: pros for the view and service, cons for the travel, helping readers decide to book.
• Course/book/app reviews: pros and cons of content and value, with a verdict on who it suits.

Whatever the review, the "pros, cons, verdict" structure is a formula readers are familiar with and expect. These boxes help you present that formula attractively and consistently in every article.

Balance is the heart of a credible review

What separates a review people trust from one that looks like an ad is "balance". A review full of pros with no cons at all makes readers doubt how sincere it is. The Pros/Cons box forces you to think about both sides systematically, a good habit for a reviewer. Daring to state cons honestly, even small ones, actually raises credibility, because it shows you assessed impartially.

In the long term, this honesty is what builds a loyal reader base. A reader who feels your review genuinely helps them decide, not just pushes them to buy, comes back for your next review and recommends it. The Pros/Cons box is therefore not just a visual element, but a tool that encourages ethical reviewing, the foundation of a review blog that grows sustainably.

Common problems and how to fix them

The boxes have no color or icons

Check that you added the Pros/Cons block and Exported again, and use the correct class names (bk-pc, bk-pros, bk-cons, bk-verdict) written in the post's HTML view.

The two columns do not sit side by side

Check that the bk-pros and bk-cons boxes are inside the same bk-pc. On mobile the boxes stack into a single column by design for easy reading, which is normal.

Stars or score do not show

The score, stars, and summary are text you write in the bk-verdict box. Check that you included the full structure per the example, with no odd formatting tags mixed in from the compose view.

Best practices

• Place the Pros/Cons box first, then the Verdict box, for a natural reading order.
• Score consistently with the pros and cons presented, to keep credibility.
• Write pros and cons concisely as items, so they are easy to scan.
• Add Review schema only when it is a genuine review matching the content, per Google's guidelines.
• Pair with a Callout box and an FAQ box to make review articles complete and easy to read.

Wrapping up

The Pros/Cons and Verdict boxes are key elements that make your review articles answer the needs of deciding readers. With BlogKub, you just add the block and Export it, then place the boxes with the bk-pc class for pros and cons and bk-verdict for the summary score. The system lays out two columns, adds check/cross icons, shows the score and stars, and stacks to a single column on mobile automatically. Presented sincerely and consistently with the content, these boxes make your reviews look professional, credible, and help readers decide with confidence.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add reading time on cards and articles in Blogger

The small "⏱ 5 min read" badge we see on leading sites is more powerful than you might think. It lets readers instantly decide whether to read now or save for later. This article teaches you how to add reading time to a Blogger theme with BlogKub, calculated automatically, supporting Thai, and displayable on both cards and in articles.

Updated 16 July 2026   About an 8 minute read   Level: Beginner

What reading time is, and why it is valuable

Reading time is an estimate of how long an article takes to read, usually shown as "X min" with a clock icon. This number helps readers predict how much time it takes, which affects the decision to start reading now or save for later.

The real value is "reducing uncertainty". Readers hesitate less when they know how much time to invest. An article that says "3 min read" looks approachable and easier to click than one that says nothing, while a long article that says "12 min read" sets the right expectation, so ready readers can prepare, and busy ones save it for later instead of opening and quitting midway.

The challenge: calculating Thai reading time correctly

A typical reading time calculation counts the number of words and divides by an average reading speed (about 200 words per minute). This works well for English with clear spaces between words, but Thai has no spaces between words, so counting words by spaces gives a badly wrong result. A long Thai article might be counted as just a few words, making the reading time abnormally low.

BlogKub solves this by approximating the Thai word count from the character count, alongside counting English words as usual, so an all-Thai, Thai-English mixed, or all-English article all get a reasonable reading time. This is a very important detail for Thai blogs, because if the reading time is off, the badge is useless or, worse, misleads readers.

How to add reading time step by step

1. Add the reading time block. Open the left block library and drag the "Reading time" block into the page.
2. Choose whether to calculate on cards. Turn on the option to calculate reading time on homepage cards (the system pulls content via the feed to calculate, cached 12 hours) or turn it off if you want it only on article pages.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Check the time display. Open the homepage and an article page, confirm the "⏱ X min" badge shows in the right place (on cards and in the article meta) and the number is reasonable for the content length.

On homepage cards: feed fetching and a 12 hour cache

Showing reading time on the article page is easy because the content is already on the page. But on homepage cards, the card shows only the title and image, with no full content to calculate. BlogKub therefore pulls the article content via Blogger's feed to calculate each card's reading time and fill in the badge.

To avoid re-fetching the feed every time the page loads, the system caches the result for about 12 hours in the reader's browser. The first visit fetches and calculates, and later visits within 12 hours use the cached result, keeping it fast and not wasting feed calls. This balances having up-to-date data with keeping speed. If you do not want reading time on cards, turn this option off so the system works only on article pages, which is lighter.

Reading time and reader psychology

The reason leading sites favor showing reading time comes from understanding reader behavior. People have limited time and attention. Seeing a time number helps them allocate it, such as "I have 5 free minutes while waiting, this 3 min article fits" or "a 15 min article, better save it for the evening". Both cases beat opening it and feeling it is longer than expected, then leaving.

In this sense, reading time works well with other features. When a reader sees an article is long but is still interested, they might use a bookmark to save it for later, or while reading, watch the reading progress bar to see how much is left. All of this helps readers feel in control of their own experience, which increases satisfaction and the chance of reading to the end.

Accuracy: reading time is an estimate

What to understand is that reading time is an "estimate", not an exact number, because each person's reading speed differs. Some read fast, some read slowly and consider carefully. Also, an article with lots of code, tables, or images takes a different time from plain text. The purpose of reading time is to give a "rough picture" to help decide, not a stopwatch that must be exact.

So do not worry if the number is slightly off from your own real time. As long as it reflects relative length correctly, short articles show less time and long ones show more, it does its job fully. Understanding that this is an estimate helps you use the feature correctly without expecting unrealistic precision.

Reading time and site credibility

Beyond usability, showing reading time also signals that your site attends to detail and is designed for readers. Small, polished elements like this appear on leading media sites and professional blogs. When your blog has these in full, readers subconsciously perceive it as credible and standard, a feeling that carries over to trust in the content.

Many small details together are what make the difference between a blog that looks "casual" and one that looks "serious". Reading time is one of them. The cost to add it is nearly zero because it is calculated automatically, but the effect on image and experience is valuable, making it a feature worth enabling in almost every blog.

Examples of use in different kinds of blogs

• Knowledge/how-to blogs: readers often want to know how long it takes to learn this, and reading time sets the expectation.
• News/summary blogs: a short reading time says it can be finished quickly, ideal for people who want fast updates.
• Long-form/analysis blogs: a long reading time filters for readers ready to invest time, and encourages busy ones to save it first.
• Multi-category content sites: reading time on cards helps readers easily choose an article based on the time they have.

Common problems and how to fix them

Reading time does not show

Check that you added the reading time block and Exported again. On the article page, the badge shows in the article meta section. On cards, you must turn on the calculate-on-cards option and the theme must have real article cards.

The reading time number looks abnormally low

If it is a Thai article, the system already approximates from characters, but if most of the content is images or code rather than text, the word count will genuinely be low, which is normal because reading time counts text.

The time on cards does not update immediately after editing an article

Because the system caches the result for 12 hours, changes may reflect a little slowly on cards. Wait for the cache to expire or test in a browser with no cache yet.

Best practices

• Enable reading time on blogs with articles of varied length, to help readers choose by the time they have.
• Turn off the card calculation if you prioritize homepage speed or the theme has no article cards.
• Understand that reading time is an estimate, and do not worry about small discrepancies.
• Use it together with the reading progress bar and bookmarks for a complete reading experience.

Wrapping up

Reading time is a small detail that helps readers decide and plan their reading better, reducing hesitation and quitting midway. With BlogKub you just add the reading time block and Export it to use, and the system shows "⏱ X min" on article pages and on cards (if enabled), calculated automatically from the content with Thai support, and caching the card result for 12 hours to keep speed. When you understand it as an estimate to help decide, and use it with other reading features, reading time raises your reader experience to a professional level like leading sites.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add a search box in a Blogger blog

As your blog gains more posts, letting readers quickly find what they want matters. A search box lets readers type a word and instantly find posts on your site. This article teaches you how to add one to a Blogger theme with BlogKub, using Blogger's built-in search, working instantly with no external service, along with the settings and how to fix problems.

Updated 16 July 2026   About an 8 minute read   Level: Beginner

Why a blog needs a search box

A search box is a field for readers to type a query to find posts on your site. When a blog is still small with only a few posts, readers can scroll through them all, but once content accumulates to dozens or hundreds of posts, finding what you want without a search box becomes hard and frustrating.

A search box solves this by letting readers "go straight to what they want" instead of browsing menus or scrolling long pages. A reader who remembers you once wrote about something, or wants specific information, types a query and finds it immediately. This is the experience today's web users expect, because we are used to searching on every platform. Not having a search box on a content-heavy site is like a library with no catalog.

Uses Blogger's built-in search: the benefit of simplicity

BlogKub's search box uses Blogger's built-in search, which is a major advantage, because it works instantly with no complex setup. You do not sign up for an external search service, do not enter an API key, and do not wait for a search engine to build an index. When a reader types a query and searches, the system takes them to Blogger's search results page (the /search URL) showing posts on your site matching the query.

This simplicity aligns with BlogKub's philosophy of making everything work built-in without relying on external services that may go down or change terms. The search box is therefore a feature that "works the moment you install it", is reliable, and adds no maintenance burden, ideal for bloggers who want full functionality without dealing with much technical detail.

How to add the search box step by step

1. Add the search box block. Open the left block library and drag the "Search box" block into the position you want, such as the header, the sidebar, or near the footer.
2. Set the heading and placeholder. Enter a heading above the field if you want (leave blank to hide the heading), and set placeholder text shown in the field, such as "Search the blog...", to tell readers what the field does.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Test the search. Open the live site, type a query in the field and search, confirming it goes to Blogger's search results page and shows posts matching the query.

A good placeholder guides readers

The placeholder text shown faintly in the search field seems small, but it plays a role in guiding readers. Instead of leaving the field blank, writing a clear placeholder tells them what the field does and what they can search, such as "Search the blog..." directly, or if your blog has a specific theme, adjust it to match, such as "Search recipes..." for a food blog.

A good placeholder reduces hesitation and encourages readers to try the search box. Conversely, an empty field with no hint may leave some unsure of what they can search. Attending to small details like this is what makes the web experience smoother bit by bit.

Where to place the search box so readers find it

The search box's position should be where readers expect to find it, because people are familiar with standard positions from other sites.

• Header: the spot people look for a search box most, because it is at the top and always visible, ideal for sites where search is a key function.
• Sidebar: ideal for layouts that already have a sidebar. Place the search box at the top of the sidebar for easy visibility. It works well with a sidebar.
• Near the footer: for readers who scrolled all the way down and still have not found what they want, a footer search box gives them an option to keep searching.

Choose the position by how important search is on your site. If the blog has lots of content and people often come to find specific topics, the header is most convenient. But if it is a supporting function, the sidebar or footer is enough.

The search box, experience, and staying on the site

A search box clearly benefits the user experience, because it reduces the friction of finding content. Readers who quickly find what they want are satisfied and tend to stay on the site longer, read several posts, and return when they need information. Conversely, readers who cannot find something often leave for elsewhere and may not return.

Although a search box is not a direct ranking factor, the positive behaviors it creates, such as longer time on site and reading several pages, are all indirect quality signals that are good for the site. Used together with other good navigation, such as breadcrumbs that show the site structure and related articles that recommend nearby content, the search box is another piece that completes your site's navigation system.

Limitations to understand

Because the search box uses Blogger's built-in system, the results follow Blogger's capabilities, which focus on matching words in posts. It may not be as smart as advanced search systems with complex relevance ranking. However, for a general blog, the built-in search is sufficient and reliable. Readers who type a query matching a title or content usually find the post they want.

If your site grows a lot and needs more complex search in the future, there are other options to consider, but for the start and for most blogs, the built-in search is a good balance between usable functionality and simplicity of maintenance. Starting with something that works instantly beats having no search box at all.

Common problems and how to fix them

Searching does not find a post you know exists

Blogger's search matches words in posts. Try a query that actually appears in the title or content. If the post uses a different word with the same meaning, you may need a more exact word. Writing titles and content with words readers are likely to search helps them find it more easily.

Clicking search does nothing

Check that you added the search box block and Exported again, and that the form points to /search, which is Blogger's search results page. Normally the system is set up correctly.

The search box does not fit the site

The field already uses the theme's colors and corner radius. If you want to adjust it, try setting a heading or changing the placeholder to match the tone, and place it in a spot that suits the layout.

Best practices

• Add a search box once the blog has enough posts that readers need to find them, not necessarily when there are only a few.
• Place it in a standard spot readers expect, such as the header or sidebar.
• Write a clear placeholder to guide readers and encourage them to try searching.
• Write titles and content with words readers are likely to search, so they find them easily.
• Use it together with a sidebar and breadcrumbs for a complete navigation system.

Wrapping up

A search box is a basic navigation feature that becomes increasingly important as your blog accumulates content, because it helps readers go straight to what they want instead of scrolling to find it. With BlogKub you just add the search box block, set the heading and placeholder, and Export it to use, and the box uses Blogger's built-in search that works instantly with no external service or key. Placed where readers expect and with a clear placeholder, the search box reduces the friction of finding content, increases satisfaction, and keeps readers on your site longer, which is the foundation of a good experience and the site's growth.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add social share buttons in Blogger articles

Word of mouth is one of a blog's most powerful ways to grow. Inline social share buttons in an article let an impressed reader share it with friends in one click, on every screen size including mobile. This article teaches you how to add them to a Blogger theme with BlogKub, with a copy link button, clean links, and how to use them effectively.

Updated 16 July 2026   About an 8 minute read   Level: Beginner

What inline social share buttons are

Inline social share buttons are a group of share buttons placed in the article content, usually at the end after the reader finishes reading. When clicked, the system opens that platform's share window with the article link and title, letting readers share with friends or post to their own feed in a few clicks.

The end-of-article position has a reason, because it is the moment the reader has just finished and feels the value of the content most. If they are impressed, this is when they are most likely to want to spread the word. Having share buttons waiting right there helps turn that impression into an actual share.

Why have inline share buttons when there is already a floating bar

BlogKub has both a floating side share bar and inline share buttons, because the two complement each other in different contexts. The key difference is that inline buttons show on every screen size, including mobile, while the floating side bar is hidden on mobile so as not to cover content.

Since most blog readers today come from mobile, having inline share buttons is very important. It ensures mobile readers, who are the majority, can share too. Used together, the floating bar catches desktop readers while reading, and the inline buttons catch everyone who finishes reading, covering both moments and every device completely.

How to add social share buttons step by step

1. Add the Social Share block. Open the left block library and drag the "Social Share" block in, usually placed at the end of the article after the main content.
2. Choose channels and lead text. Toggle Facebook, X (Twitter), LINE, and the copy link button as you like, and add lead text such as "If you liked this article, please share it with friends" to encourage sharing.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Test the sharing. Open a live article page, click each share channel and the copy link button, confirming the shared link matches the page and is a clean URL.

Clean links: a detail professionals attend to

When a reader shares an article, the outgoing link should be the main, tidy URL that matches the real page. Blogger often appends the m=1 parameter to the URL for the mobile version, which, if shared, looks cluttered and may cause confusion. BlogKub's share buttons therefore pull the page's canonical link and strip the m=1 parameter before sharing.

This detail is good for both image and SEO. A clean, consistent link helps share signals consolidate on a single URL, not spread across several versions of the same page. When everyone shares the same link, the value of sharing accumulates efficiently. This is care readers do not notice but that pays off in the long run.

The copy link button: the channel people actually use

Besides the big social buttons, the copy link button is a channel people really use to share in daily life. Many copy the link to paste into a private chat, a LINE group, or an app with no dedicated share button. The copy link button is therefore the most comprehensive and flexible share channel. When clicked, the button shows a "Copied" state to confirm.

This button uses the modern Clipboard API first, and if the browser does not support it, it switches to a fallback method automatically, so most readers can copy even on older browsers. This is the same as the copy button in other BlogKub features, such as the copy code button that uses the same approach, for the widest compatibility.

Write lead text to encourage sharing

Adding short lead text above the share buttons genuinely increases sharing, because it is a polite "ask". Behavioral research finds that people are more likely to do something asked of them than left to guess. Text like "If this article was helpful, please share it with a friend who might be interested" therefore works better than bare buttons.

The tip is to make the text sincere and connected to the value the reader just received, not a curt ask. Saying "Share it with a friend facing the same problem" makes readers think of someone who would benefit, which encourages sharing more than a generic request. Adjust the text to fit your blog's tone and each content type for the best results.

Share buttons and site growth

Social sharing is a word-of-mouth growth channel with high credibility, because when a friend shares an article, those who see it usually click out of trust in the sharer. Traffic from sharing is therefore high quality and has a chance of becoming new readers who share again, creating a natural growth cycle.

Although share counts are not a direct ranking factor, the increased visibility and traffic often lead to positive signals such as mentions and backlinks from other sites. Used together with quality content and read-on elements such as latest/random posts, your site has a good foundation for sustainable growth.

Privacy and lightness: sharing with no tracking script

Many share buttons on the web use scripts embedded directly from social platforms, which not only slow the page but also embed trackers that collect reader data even if they do not click share. BlogKub's share buttons take a different approach, being standard share links that open the platform's share window only when the reader clicks, with no tracking script embedded on the page.

The result is that your page is lighter, loads faster, and respects reader privacy more. Readers who do not click share are not tracked by these buttons, which aligns with BlogKub's philosophy of prioritizing privacy and speed. Getting both full share functionality and good lightness for Core Web Vitals is an unseen but valuable long-term advantage.

Common problems and how to fix them

The share buttons do not show

Check that you added the Social Share block and Exported again, and view it on a real article page, because the buttons show in the article context. Also check that at least one share channel is enabled.

The shared link has m=1 at the end

Normally the system strips this parameter. If you still see it, check that the page has a correct canonical tag, which BlogKub's theme already includes.

Copying does not work on some browsers

The system has a fallback, but some environments with restricted clipboard permissions (such as non-HTTPS pages) may fail to copy. Make sure the site is served over HTTPS, which Blogger already supports.

You want share buttons during reading too

Use the floating side share bar alongside, so desktop readers can share while reading, while the inline buttons serve readers on every device who finish reading.

Best practices

• Place share buttons at the end of the article, the moment readers are most likely to want to share.
• Add sincere lead text connected to the content's value to encourage sharing.
• Always enable the copy link button, because it is the channel people really use in private chat.
• Choose only the channels your readers use, no need to enable every button.
• Use it together with a floating side share bar to cover both during reading and after finishing, on every device.

Wrapping up

Inline social share buttons are an important tool for turning a reader's impression into word of mouth. With BlogKub you just add the Social Share block, enable the Facebook, X, LINE channels plus the copy link button, add lead text, and Export it to use, and the buttons show on the article page at every screen size including mobile, using the clean canonical link, with a fallback for copying. Used together with a floating side share bar, your site is ready for readers to spread the word at every moment and on every device, which is the foundation of sustainable word-of-mouth growth.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add a Sidebar (content plus side column) in Blogger

A sidebar is a side column that places supporting elements like categories, search, and archive beside the main content. It is a classic layout that aids navigation in content-heavy blogs. This article teaches you how to add one to a Blogger theme with BlogKub, which lays it out beside the content automatically, letting you choose the side and width, with commonly used widgets.

Updated 16 July 2026   About a 9 minute read   Level: Beginner

What a sidebar is, and who it suits

A sidebar is a vertical column placed beside the main content, used to show supporting elements such as search, categories, archive, and author information. It is a classic, familiar two-column layout where the main content takes up most of the space, while the sidebar is a narrow column that aids navigation and provides extra information.

A sidebar suits blogs with many posts and several categories, because widgets like categories and archive help readers explore the content easily. Conversely, blogs focused on focused long-form reading, or a minimal design, might choose a single-column layout so the sidebar does not pull attention from the content. Choosing to use a sidebar therefore depends on your site's nature and goals.

Laid out automatically: you do not arrange the columns yourself

What makes BlogKub's sidebar easy to use is that the system lays it out automatically. You do not deal with building a two-column structure yourself. Just place the Sidebar block near the post group (such as postgrid, postlist, or featured), and on Export XML the system arranges the sidebar beside the main content on the side and width you set.

This saves a lot of hassle, because building a two-column layout by hand in Blogger XML is complex and requires understanding section structure and CSS. BlogKub handling it means you get a correct, responsive sidebar layout just by choosing a few options, with no touching code at all.

How to add the sidebar step by step

1. Add the Sidebar block. Open the left block library and drag the "Sidebar Layout" block near the post group (postgrid/postlist/featured), so the system knows beside which content to place the sidebar.
2. Choose the side and width. Choose the sidebar on the left or right, and set the width, such as 280px, as suits your layout.
3. Choose the widgets in the sidebar. Enable the widgets you want, namely search, labels/categories, archive, and about the author. Choose only what benefits your site.
4. Export the XML and check the result. Click Export, upload it to Blogger, then check the sidebar sits beside the content correctly on desktop and collapses below the content on mobile.

The sidebar widgets and the benefit of each

A sidebar is valuable only when the widgets in it benefit readers. BlogKub has main widgets to enable.

• Search: lets readers search posts on the site from the sidebar, ideal for content-heavy sites. It uses the same idea as the search box placed elsewhere.
• Labels/categories: show the blog's categories for readers to click into posts in a category of interest, aiding topic-based navigation.
• Archive: organizes posts by time period, letting readers revisit old posts by month/year, ideal for blogs that publish regularly.
• About the author: shows the author's profile, building connection and credibility (E-E-A-T), letting readers know who wrote it.

The tip is to choose only the widgets your readers genuinely benefit from. A sidebar stuffed with everything until it runs long looks cluttered and diminishes the importance of each part. Having just the right widgets, arranged by importance, lets the sidebar do its job best.

The sidebar on mobile: collapses below automatically

The challenge of a two-column layout is that on mobile there is not enough room for two columns side by side. BlogKub solves this by collapsing the sidebar below the main content automatically on small screens, so the main content gets full width and is easy to read, while the sidebar widgets are still reachable when readers scroll down.

This handling matters because most readers come from mobile. If the sidebar did not collapse and squeezed the content narrow, reading would be painful. The system doing the responsive work automatically means you get the benefit of a sidebar on desktop without losing the mobile reading experience. This is design that considers every device from the start.

Choose a balanced side and width

Choosing the sidebar's side affects the feel of the page. A right sidebar is the most common classic, because it keeps the main content on the left where the eye starts reading, while a left sidebar feels like a navigation panel before the content, ideal for sites that emphasize navigation. Both work, so choose by the design and balance you want.

As for the width, around 280px is a sweet spot for a general sidebar. It is wide enough for widgets to show their content fully without feeling cramped, and not so wide that it steals space from the main content. Set too wide, and the main content gets squeezed and harder to read. Finding the balance between content space and the sidebar is the key to a good layout.

Sidebar vs single column: trends and choice

In recent years, many sites have shifted to a single-column layout focused on content, especially long-form reading blogs and minimal sites. The reason is that a single column helps readers focus on the content with no side distractions, and looks modern and clean. However, the sidebar is not obsolete. It still clearly benefits sites where navigation and content discovery matter, such as sites with hundreds of posts across several categories.

The choice is therefore not right or wrong, but a matter of goals. If your site wants readers to explore many posts and navigate by category, a sidebar helps a lot. But if the goal is for readers to focus on a single article to the end, a single column may fit better. The advantage of BlogKub is that you can choose either and switch as you like. Try which fits your readers and content best.

Common problems and how to fix them

The sidebar is not beside the content

Check that you placed the Sidebar block near the post group (postgrid/postlist/featured), because the system uses this position to arrange the sidebar beside the content. If placed far from the post group, the layout may not be as expected.

The main content is too narrow

You may have set the sidebar width too high. Try reducing the width (such as back to 280px) to return space to the main content.

The sidebar widgets do not show

Check that you enabled the widgets you want and Exported again. Some widgets, such as archive, show only when there are enough posts to group by time.

The sidebar looks cluttered on mobile

Because the sidebar collapses below, having many widgets makes the lower section long. Try reducing the widgets to only the essential ones so mobile stays compact.

Best practices

• Always place the Sidebar block near the post group, so the system arranges it beside the content correctly.
• Choose only widgets readers genuinely benefit from, do not stuff everything until the sidebar is long and cluttered.
• Set a balanced width (around 280px) so it does not squeeze the main content.
• Consider whether your site suits a sidebar or a single column, by the nature of the content.
• Use the search and category widgets together with breadcrumbs for a complete navigation system.

Wrapping up

A sidebar is a classic layout that aids navigation in content-heavy blogs by placing supporting elements like search, categories, archive, and author information beside the main content. With BlogKub you just place the Sidebar block near the post group, choose the left/right side, set the width, and enable the widgets you want, and the system arranges the sidebar beside the content automatically on Export and collapses it below on mobile to preserve the reading experience, with no touching code at all. When you choose genuinely useful widgets and set a balanced width, the sidebar helps readers explore your content more easily, which is especially suited to blogs that have accumulated many posts.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add an image slider/gallery with captions in Blogger articles

Some things are told better with several images than with text, but placing images in a long row makes an article stretch and scroll on and on. An image slider/gallery solves this by gathering several images into one scrollable space. This article teaches you how to add one to a Blogger theme with BlogKub, with captions, navigation buttons, position dots, and swipe support on mobile.

Updated 16 July 2026   About a 9 minute read   Level: Beginner

What an image slider/gallery is, and what it solves

An image slider is a box that shows several images in one space, showing one at a time and letting readers scroll to the next with buttons, swipe, or by tapping the position dots. Instead of placing 6 or 7 images in a row until the article stretches like a kite tail, a slider gathers them all into one compact frame. Interested readers scroll through all of them, while those not interested can scroll past quickly.

This solves the space problem in articles with many images, such as an accommodation review that wants to show several angles, or a travel article with many beautiful images of one place. Using a slider keeps the content concise, smooth to read, and tidy, while still presenting all the images.

How BlogKub's slider works

When you add this block, the system embeds the slider's styles and script in the theme. When you place the slider structure in a post, the system makes it fully functional with these elements.

• Scroll-snap scrolling: each image "snaps" into place when scrolled, so it does not stop halfway, and swiping on mobile is smooth.
• Previous/next buttons: round buttons on both sides for desktop users who want to navigate by clicking.
• Position dots: dots below show which image out of the total you are viewing, and tapping jumps to that image. The current image's dot stretches into a bar to stand out.
• Caption under the image: the text in the figcaption shows over the bottom of the image on a dark gradient bar, easy to read without covering the main image.

All of this works together while you just place a simple HTML structure, and the system handles the interactive part for you.

How to add and use the image slider step by step

1. Add the image slider block. Open the left block library, the "Article & UX" category, and drag the "Image slider/gallery" block in, to embed the slider styles and script in the theme.
2. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
3. Place the slider in a post. In HTML view, place a <div class="bk-slider">, then add several <figure><img src="..."><figcaption>caption</figcaption></figure> in a row for as many images as you want.
4. Test the navigation. Open a live article, click the previous/next buttons, tap the position dots, and try swiping on mobile, to confirm it scrolls smoothly and the captions show correctly.

Captions: adding context to images

An image with a caption is more powerful than a bare image, because the caption tells readers what they are looking at, where, or what is interesting. In BlogKub's slider, the caption sits over the bottom of the image on a gradient from transparent to dark, so the white text reads clearly whether the image behind is bright or dark.

Beyond helping readers, captions and image alt text are also good for accessibility and image SEO. When you describe images meaningfully, both screen reader users and image search engines understand the content better. If you are interested in making images discoverable, read the guidance on making images show in Google in the Lightbox guide too, since both are about presenting images in articles.

Slider vs Lightbox: they can be used together

Many readers wonder how a slider differs from a Lightbox. The answer is that the two do different jobs and complement each other.

• Slider: gathers several images in one space in the content, scrolling one at a time, ideal for presenting a set of images concisely.
• Lightbox: clicking an image to expand it full screen on a dark background, ideal when a reader wants to see the details of one image large.

Used together, readers can scroll through images in the slider for an overview, then click an image of interest to expand and see the details full screen, a complete image-viewing experience, ideal for articles where images are the star, such as travel, food, and accommodation reviews.

Considerations for speed and images

The slider itself is CSS and a small script, so it barely affects speed. But what really matters is the file size of the images, because a slider often has several images. If each is very large, the page loads slower. We recommend resizing and compressing images suitably before uploading, and setting meaningful file names and alt text.

Another technique is that Blogger already supports lazy loading in many cases, so images not yet scrolled to do not load immediately, helping the first page open faster. Managing images well is therefore the key to a slider that is both beautiful and fast, which is good for both readers and Core Web Vitals scores.

Examples of using the slider in different kinds of blogs

• Travel blogs: gather several angles of one place in a slider, with captions naming the spot or the best time to go.
• Accommodation/hotel reviews: show the room, view, and amenities in one slider, helping readers get an overview before deciding.
• Food blogs: images of cooking steps or several dishes at a restaurant, scrollable and concise.
• Creative/portfolio blogs: show several works in one gallery, with captions naming each piece.

Every case shares "several related images", which suits gathering into one slider more than a long row, because it keeps the article concise and presents the images with finesse.

When not to use a slider

Although a slider is useful, it is not the answer for every situation. In some cases, placing images normally is better, such as when each image is equally important and you want to be sure readers see all of them. Hiding images in a slider may leave some readers not scrolling through all of them. In this case, placing images in a row so all are visible may fit better.

Another case is when images are part of a sequence that must be read in order with accompanying text for each image. Splitting the images into a slider may break the connection between the image and its explanation. In short, use a slider when images are a "set viewed together" and readers can choose what to view, but if every image must be seen and tied to specific text, placing them normally communicates better. Choosing the right tool for the job is the heart of good presentation.

Common problems and how to fix them

The slider does not scroll or has no buttons

Check that you added the slider block and Exported again, and used the correct structure, that is bk-slider wrapping several figure elements, written in the post's HTML view. If you use the compose view, the structure may get converted so the slider does not work.

The images are cropped too much

The slider sets a consistent aspect ratio for tidiness. If source images differ a lot from the frame's ratio, they get cropped a lot. We recommend using images with similar ratios or close to the frame to reduce cropping.

The captions do not show

Check that you added text in the figcaption of each figure. If there is no figcaption, there is no caption to show, which is normal behavior.

The slider loads slowly

This is usually from image files being too large. Resize and compress images before uploading, because the number and size of images affects speed more than the slider itself.

Best practices

• Use images with similar ratios so the slider looks tidy and gets cropped less.
• Add meaningful captions and alt text to every image, for readers and image SEO.
• Resize and compress images before uploading to keep page speed.
• Use a slider for "a set of related images", not single images that do not need scrolling.
• Pair it with a Lightbox so readers can scroll through an overview and click to expand an image of interest.

Wrapping up

An image slider/gallery is a tool that keeps image-heavy articles concise, smooth to read, and presents images with finesse. With BlogKub you just add the slider block and Export it to use, then place a bk-slider structure with several figures, each with an img and a figcaption, and the system adds navigation buttons, position dots, captions under the images, and swipe support on mobile automatically. When you manage images at suitable sizes and add good captions, the slider tells a story with images beautifully and fast, especially in travel, food, review, and portfolio articles where images are the heart of the content.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

All 8 BlogKub Blogger theme templates and how to choose the right one

Starting a site with a template that fits your kind of site saves time and gets better results. BlogKub has 8 templates designed for different kinds of site, each with blocks and features installed to match. This article introduces all 8, who they suit, what they include, and how to choose the one that fits your site.

Updated 16 July 2026   About an 11 minute read   Level: Beginner

Why choosing the right template matters

A template is not just a "look", it is the starting point that sets what structure and features your site has. Choosing a template that matches your kind of site gives you the right elements from the start, without assembling them yourself. For example, if you build a review site, starting with the review template that has a rating bar and Pros/Cons box is faster than starting from scratch and adding each piece.

In BlogKub, choosing a template installs the blocks and features suited to that kind of site automatically. Then you customize the text, colors, fonts, and turn features on or off by dragging, with no coding. A template is therefore a "good starting point" that gets you to the site you want faster. Let us look at who each of the 8 suits.

Blog category: Personal, Travel, Tech, Classic + Sidebar

1. Personal Blog

A personal blog template emphasizing warmth and approachability, good for people who want to share stories, thoughts, or general knowledge. It has a welcoming Hero with a circular profile image, and a post grid that shows content beautifully. A good starting point for general bloggers who want a good-looking site without complexity.

2. Travel Blog

A travel blog template emphasizing images and atmosphere, good for people writing place reviews, travel journals, or destination guides. The design favors showing beautiful photos, pairing well with an image slider and Lightbox, making travel articles attractive and telling stories through images fully.

3. Tech Blog

A tech blog template that looks modern and clean, good for people writing technology articles, coding tutorials, or gadget reviews. It pairs neatly with a copy code button and Callout box, suited to content with code and technical information.

4. Classic + Sidebar

A classic blog template with a sidebar beside the content, good for blogs with many articles and categories, because the sidebar aids navigation by category, search, and an archive. It is a format readers are familiar with and suits sites focused on content discovery.

News/magazine category: Magazine

5. Magazine

A magazine/news style template emphasizing professional media-style content layout. The highlight is a featured article pinned with a label, so you choose which story should be the big headline. It suits sites with varied, frequently updated content, such as news sites, article collections, or sites that want to look like serious media. Arranging a headline with secondary articles creates a hierarchy that makes the homepage interesting.

Business category: Company

6. Company

A template for a company or business site, emphasizing credibility and communicating services. It has a Hero that can include a secondary button (such as Contact us), feature columns to show service highlights, and an About block that can include stats. It suits businesses that want a professional-looking site to describe services and generate leads through a clear CTA.

Education category: Online Course

7. Online Course

A template for an online course or education site, emphasizing persuading people to enroll. It has a Hero that can include a feature list (chips) of the course, a CTA that can include student stats, and an instructor block that adds credibility. It suits people selling courses, teaching online, or building an educational site that wants to turn visitors into students.

Affiliate category: Product Review

8. Product Review

A template for product review and affiliate sites, designed to help readers decide to buy. The highlights are a Hero with a review rating bar, a Pros/Cons box and summary score to summarize the pros and cons, and an author block that can include a verification badge. It suits people building review sites to earn from affiliate, who want to present reviews credibly and lead readers toward a purchase.

How to choose and use a template

1. Choose a template by kind of site. Pick 1 of 8 templates that best matches your kind of site, and the system installs suitable blocks and features.
2. Customize blocks and features. Adjust the text, colors, fonts, reorder blocks by dragging, and turn features on or off as you like.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Check on every screen. Open the live site to confirm the template displays correctly and responsively on both desktop and mobile.

Which template to choose: a short guide

If you are still unsure, ask yourself what your site is "about" and "what you want readers to do". A site sharing personal stories suits Personal, a site where images are the star suits Travel, a technical site suits Tech, a site with many articles suits Classic + Sidebar, a news site suits Magazine, a business site suits Company, a teaching site suits Online Course, and a review site earning revenue suits Product Review.

The upside is that you do not have to decide permanently from the start. You can try different templates in BlogKub before exporting to use, and customize everything as you like. A template is just a good starting point, not a fixed frame. Importantly, every template ships with SEO structure, schema, and responsive design out of the box, so whichever you choose, you get a site that is search-friendly and displays well on every device as a foundation.

Every template has the same good foundation

Even though each template has its own design and specific features, all of them share the same quality foundation: a search-friendly structure, schema data that helps the site display well in search, responsive design that renders well on every device, and experience-raising features like dark mode and a table of contents that every template can enable.

That means choosing a template is about "kind and starting point" more than about the underlying quality. You do not have to worry that choosing wrong gets you an inferior site, because all of them are built on the same standard. So choose by the kind closest to your site, then customize with confidence. To dive into each feature installed with a template, see all the guides in the BlogKub Learning Center, and if you are just starting a blog, read the guide to starting a free Blogger blog from scratch to a beautiful theme to lay a complete foundation first.

Common problems and how to fix them

You chose the wrong-kind template

No problem. You can choose another template in BlogKub before exporting. Changing the template installs the blocks and features suited to the new kind.

You want a feature from another template

Most features can be turned on or off in every template by adding a block. Even though some specialized elements (such as the rating bar in the Hero) are in specific templates, the basic features are available generally.

You customized and want to revert

You can always start over from the template. Customizing builds on the template and does not destroy the underlying structure.

Not sure whether the template supports SEO

Every template ships with SEO structure and schema out of the box, so it is friendly to every search engine.

Best practices

• Choose the template closest to your kind of site as a starting point, then customize further.
• Use the template's specialized features (such as review scores, course highlights) to match the site's goal.
• Try several templates before exporting to find the one that best fits your content and brand.
• Adjust the text, colors, and fonts to reflect the site's identity, do not leave them at default.
• Study the feature guides in the Learning Center to use every feature of the template fully.

Wrapping up

BlogKub has 8 templates designed for different kinds of site: Personal, Travel, Tech, Classic + Sidebar for blogs, Magazine for news/magazine, Company for business, Online Course for education, and Product Review for affiliate. Each installs the blocks and features suited to that kind automatically, so you start fast and on target. Choosing a template is about the kind and the starting point, because all of them are built on the same standard for SEO, schema, and responsiveness. So choose by the kind closest to your site, try several before exporting, and customize everything with no coding. When you choose a fitting template and use its features fully, you get a Blogger site that is beautiful, easy to use, and search-friendly from day one.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build an AEO summary box in a Blogger theme, so AI and Google cite you

In an age where more people ask AI their questions, having an "answer summary box" at the top of an article is one of the most powerful ways to get your content cited. This article teaches you how to add an AEO summary box to a Blogger theme with BlogKub in detail, without any API or AI.

Updated 14 July 2026   About a 10 minute read   Level: Intermediate

What AEO is, and how it differs from SEO

AEO (Answer Engine Optimization) is tuning your content so "answer engines" can pull it straight into their answer to a user. Unlike traditional SEO, which aims to rank a link and wait for a click, AEO aims to get your answer to appear directly in answer boxes such as Google AI Overviews, ChatGPT Search, Perplexity, or a featured snippet. Behavior has changed, and many people now get a complete answer right on the search page without even clicking through.

The heart of AEO is "answer first, explain later". AI tools favor content that gives a clear, concise answer in a place that is easy to find. A summary box at the top of the article is therefore the most on-point AEO tool, because it places the main answer right at the top in a form that both people and machines understand immediately.

How BlogKub's AEO summary box works (no API needed)

A common misconception is thinking you have to connect an AI to summarize the article. In reality, BlogKub's summary box pulls its text straight from the "Search Description" you fill in on the post, which is the same value Blogger uses to build the meta description. The upside is that you write the summary yourself, so you control quality and accuracy 100%, pay no API cost, and never risk AI inventing something wrong.

Technically, this box reads data:view.description, which holds the post's Search Description on a single article page. If a post has none filled in, the system trims the first paragraph of the content and shows it automatically on the server side, so it can never be an empty box. The box also carries the class .qt-aeo-summary, paired with a SpeakableSpecification in the structured data, which tells Google and voice assistants which part is the readable summary.

How to add the AEO summary box in BlogKub, step by step

1. Add the AEO Summary Box block. Many templates install it already. If yours does not, open the left library, category "Article & UX", and drag the "AEO Summary Box" block in. The system places it at the top of the article automatically.
2. Set the box heading and style. Click the block to set a heading, such as "Summary" or "Short answer", and pick a box style (card / highlight / minimal) to match your site's design.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Fill in the Search Description on every post. In the Blogger post editor, open the settings panel on the right → "Search Description", and write a short 1 to 2 sentence summary of the article's main answer (about 40 to 60 words). This is the most important step.
5. Check the display. Open the actual article page and confirm the box shows the text you wrote, not a first paragraph the system trimmed. If you see the first paragraph, it means the description is not filled in.

The AEO box is placed in the post's includable and wrapped in a data:view.isSingleItem condition, so it appears only on single article pages, keeping the homepage and list pages clean.

How to write an AEO summary that AI will cite

The quality of the box text is everything. Follow these principles when writing the Search Description:

• Answer the main question in the first sentence. Do not preamble, give the answer right away. For an article on "how to soft-boil an egg", open with "A soft-boiled egg takes 6 minutes in boiling water, then straight into cold water", not "The soft-boiled egg is a popular dish...".
• Keep it 40 to 60 words. Long enough to have substance, short enough for AI to lift the whole thing. A summary that runs too long gets truncated and loses the point.
• Include the keywords and numbers that are the answer. Numbers, durations, steps, or a specific conclusion help AI be confident this is the answer.
• Write it as complete sentences, not strung-together keywords, because AI and voice assistants read aloud straight from this text.
• Do not just repeat the title. Add substance the title does not state, to increase value.

AEO vs meta description vs featured snippet

These three are related but not the same. Understanding the difference helps you use the summary box to its full potential.

• The meta description is text hidden in the code to show under a search result. Readers do not see it on the page.
• The AEO summary box takes that same text and "shows it on the page", clearly for both readers and AI at the top of the article, with speakable markup.
• The featured snippet / AI Overviews is the result Google or AI pulls the answer into, and a well-written summary box improves the odds of being chosen.

Put simply, the AEO box is the bridge that makes your Search Description do two jobs at once: it gives a new reader the overview immediately, and it helps AI understand what the article answers.

The AEO box with GEO and voice assistants

GEO (Generative Engine Optimization) is getting your content cited in the answers of generative AI. The summary box plays a big role because it places the answer in the position and format language models like, which is short, clear, and factual. When ChatGPT Search or Perplexity reads a page, they look for the section that summarizes the point best to lift into an answer with a citation, and the box at the top of the article is the first thing scanned.

On top of that, the speakable markup tied to the box helps voice assistants like Google Assistant choose to read this summary when a user asks by voice, making your content more reachable in contexts without a screen.

Common problems and how to fix them

The box shows the first paragraph instead of the summary you intended

It means that post has no Search Description filled in, so the system trims the first paragraph and shows it instead. The fix is to open the post and fill in the description. This is the most common cause.

The box does not show at all

Check that you are viewing a single article page (not the homepage or a label page), because the box shows only on article pages, and check that the AEO block is still in the theme structure.

The box content is too long or too short

Adjust the post's Search Description to land in the 40 to 60 word range, which is comfortable to read and well suited to being lifted into an answer.

Best practices

• Fill in the Search Description on every post, never leave it blank, because it is both the meta description and the AEO box content in one.
• Place the box at the top of the article above the table of contents, so it is the first thing people and AI see (BlogKub positions it automatically).
• Write answer-first summaries, with specific numbers or conclusions, and avoid preamble.
• Pair it with an FAQ in the article, so you have both a main summary and sub-questions AI can cite from several angles.
• Review and update the summary when you edit the article, so the answer always matches the current content.

Example AEO summaries: well written vs missed

Theory can feel abstract, so look at a real example to see the difference between a summary AI wants to cite and one that gets overlooked. Say the article is "How often should I water my houseplants".

• Missed: "Houseplants are something many people love. This article walks through tips for keeping plants beautiful." This sentence answers nothing, it is just a preamble, so AI has nothing to pick up.
• Well written: "Most houseplants should be watered 1 to 2 times a week, when the top 2 to 3 cm of soil has dried out. Succulents like cacti need less, while large-leaf plants need water more often." It answers immediately, has numbers and conditions, and AI can lift it straight into an answer.

Notice the difference is not length, but "answers or does not answer". A good summary gives a usable answer from the first sentence. This is the heart of writing an AEO summary, and it is what separates an article cited in the answer box from one that gets scrolled past.

Pair the AEO box with an FAQ to cover multiple questions

The summary box answers one main question well, but a single article usually has several sub-questions people wonder about. Adding an FAQ section helps here, because each question and answer in the FAQ is also an answer-first unit AI can cite. Using both a summary box at the top and an FAQ at the end covers both the main and the secondary questions, expanding the space where your content can be cited.

Importantly, BlogKub's FAQ also embeds FAQPage schema automatically, so both the summary box and the FAQ reinforce each other, both as answer-first content and as structured data that search engines understand.

Wrapping up

The AEO summary box is one of the most worthwhile features for the AI search era, because it makes the Search Description you already write work harder, both helping readers see the answer immediately and opening the door for Google AI Overviews, ChatGPT, and Perplexity to cite your content. What you need to do is add the AEO block in BlogKub and have the discipline to write a good short answer summary on every post, without relying on any API or AI. To see the whole SEO picture from the basics to AI Search, read the guide to Blogger SEO and ranking on Google's first page.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build anchor links (copy a link to a heading) in Blogger

In a long article, sending the whole-page link and making the other person scroll to find a heading is annoying. Anchor links solve this by letting readers copy a link that points straight to the heading they want. This article teaches you how to add it to a Blogger theme with BlogKub, which generates ids automatically and supports Thai.

Updated 14 July 2026   About a 9 minute read   Level: Beginner

What an anchor link is, and what problem it solves

An anchor link (heading link) is a link that points straight to a specific heading on the page. When you open that link, the browser scrolls to the specified heading immediately, instead of opening at the top of the page and leaving the reader to scroll and find it. The technique relies on an id attached to the heading and a # in the link to say where to jump.

The clearest problem anchor links solve is sharing content in a long article. Imagine a 3,000-word guide with 15 headings. When a friend asks a question you already answered in heading 9, you want to send a link that takes them straight there, not a bare page link with "scroll down to the section on...". Anchor links make sharing precise and professional.

How BlogKub's anchor links work

When you add this block, the system embeds a script that scans every H2, H3, and H4 heading in the article content and does two things automatically. First, it generates an id for the heading if it does not have one, and second, it adds a small link icon beside the heading. When the reader hovers over the heading, the icon appears faintly, and clicking it copies the heading's full link to the clipboard, while updating the URL in the address bar to match.

The refined part is generating ids without clashes. The system converts the heading text into a usable id string (keeping Thai and English characters, turning spaces into dashes), and if an article has several headings with the same name, it appends a number so they do not collide, such as summary, summary-2, so each heading's link always points to the right spot.

On mobile, where there is no hover, the system shows the link icon faintly beside the heading anyway, so mobile users can tap to use it and it is not missed for lack of a mouse.

How to add anchor links in BlogKub, step by step

1. Add the Anchor Link block. Open the left block library, category "Article & UX", and drag the "Anchor Link" block in to enable it across the theme.
2. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
3. Test on a heading. Open a live article, hover over a heading until the link icon appears (on mobile you already see a faint icon), then click it to copy the link.
4. Check the jump to the heading. Open a new tab and paste the copied link, confirming the page scrolls to the correct heading immediately.

Anchor links vs a table of contents: the difference, and using both

Many people confuse anchor links with a table of contents, because both concern in-page navigation and use heading ids, but their roles differ.

• Table of contents: a combined list of links to all headings placed at the top of the article, letting readers see the overview and jump to a section of interest from one place. An "in-page navigation" tool.
• Anchor link: an icon on each heading that lets readers "copy that heading's link" to share externally. A "share a precise spot" tool for others.

The two do not compete, they complement each other neatly, and because both use heading ids, enabling both features makes your article's navigation system complete. If you have not set up a table of contents, we recommend reading how in the table of contents guide to use it alongside anchor links.

Anchor links, SEO, and content discovery

Having an id on every heading benefits SEO more than many people think, because it enables "deep links" to a section of the page, which is the basis of features like Google showing jump-to links to the section matching a query in the results. When your headings have clear, meaningful ids, the chance that a sub-section is linked directly increases.

Moreover, when a reader shares a deep link to a useful heading, whoever clicks in finds the answer immediately without scrolling to find it. This good experience raises the chance they read on and come back to your site. Used with an answer-first AEO summary box and a breadcrumb that helps convey the site structure, your content becomes both easy to discover and easy to navigate.

Why Thai-supporting ids matter

Most Thai blogs have Thai headings, so generating ids that support Thai characters is necessary. If the system dropped Thai characters to make English-only ids, many Thai headings would end up with empty or duplicate ids and broken links. BlogKub's system is therefore designed to keep Thai characters in id generation and turn spaces into dashes, so links to Thai headings genuinely work.

The result is that whether your headings are in Thai, English, or a mix, anchor links generate correct, non-clashing ids automatically. So you never have to set ids yourself in HTML view heading by heading, a tedious and error-prone task if done by hand.

Examples of using anchor links in different kinds of blog

Anchor links are especially valuable for long content with many sections. Look at some examples.

• Guide and how-to blogs: readers or a team can share a link straight to a problematic step, such as sending a link to the "How to fix X" heading to a colleague at once.
• FAQ collection blogs: each question is a heading, so when someone asks the same question, you send a link to that answer, saving time and looking systematic.
• Long review blogs: readers share a link to the "Pros and cons" or "Price and value" heading with a friend deciding to buy.
• Technical docs and manuals: deep links to a specific section are a standard of good documentation, helping cross-reference precisely.

The common thread is "long content that needs to point to a specific section". The longer and more valuable the article, the more anchor links help it get shared and used.

Common problems and how to fix them

The link icon does not appear

Check that you added the anchor link block and Exported again. The icon appears on hover over a heading on desktop, while on mobile you see a faint icon beside the heading. If you see nothing at all, confirm the heading uses an actual H2/H3/H4 tag.

Clicking does not scroll to the heading

Check that the copied link has a # followed by the heading's id. If you paste the link in an app that strips the #, the jump will not work. Try pasting in the browser directly to test.

The Thai heading id looks strange

It is normal for a Thai id to contain Thai characters, which genuinely work. The system is designed to keep Thai characters and avoid clashes, so do not worry about the id's shape as long as the link jumps to the right heading.

Headings where you set an id yourself

If you set an id on a heading yourself in HTML view, the system respects the existing id and does not overwrite it, so links you already shared keep working and do not break.

Best practices

• Name headings clearly and meaningfully, because the id is generated from the heading text. Good headings make the link easier to read.
• Enable anchor links alongside the table of contents, so long articles have both in-page navigation and precise-spot sharing.
• Test copying and jumping on both desktop and mobile after setup.
• Use it with the copy code button in tech articles, so readers can both jump to a heading and copy the code in that section conveniently.

Wrapping up

Anchor links are a small feature that makes your long articles much easier to share and more systematic. With BlogKub, you just add the anchor link block once and Export it, and the system adds a link icon to every H2/H3/H4 heading, generates ids automatically with Thai support and no clashes. Readers can copy a link to the heading they want at once, sharing a precise spot, supporting content discovery, and pairing with a table of contents for complete navigation, without you setting a single id yourself.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add a Back to Top button in a Blogger theme: a step by step guide

A small floating button that carries readers back to the top in a single tap is the kind of detail that makes long articles far more comfortable to use, especially on mobile. This article shows you how to add a Back to Top button to a Blogger theme with BlogKub, one that appears as you scroll down and scrolls up smoothly, along with the UX reasoning and the settings.

Updated 14 July 2026   About an 8 minute read   Level: Beginner

What a Back to Top button is, and why it matters

A Back to Top button is a floating button, usually in the lower corner of the screen, that returns the reader to the very top of the page the moment they click it. The button stays hidden while the reader is near the top, and appears once they have scrolled down a fair amount, so it does not get in the way when it is not yet needed.

Its value is clearest with long articles. When a reader has scrolled all the way to the end and wants to get back to the table of contents, the menu, or a heading up top, scrolling back by hand a little at a time is tedious and tiring, especially on mobile where a long article stretches far down the screen. The Back to Top button solves this by offering a shortcut back to the start in a single tap.

The small details that separate a good button from an ordinary one

A Back to Top button may look like a basic feature, but the details of doing it well matter a great deal to how it feels. BlogKub pays attention to these three points.

1. Appears only when needed

The button does not show while you are at the top of the page, because there is no reason to go up when you are already up there. It appears with a soft transition once the reader has scrolled down a certain distance, so the button never distracts the eye unnecessarily.

2. Scrolls up smoothly

When clicked, the page scrolls back to the top with a smooth scroll rather than jumping instantly. This kind of motion helps the reader sense the direction and avoid confusion about what just happened, unlike an instant snap that costs them their sense of position.

3. Choose a side so it does not clash with other buttons

Because a site may have several floating buttons, such as a dark mode toggle, the Back to Top button can be set to the right or left side, preventing an overlap that leads to mis-taps.

How to add the Back to Top button in BlogKub, step by step

1. Add the Back to Top block. Many templates already include it. If yours does not, open the left library, the "Article & UX" category, and drag the "Back to Top" block in.
2. Choose the button position. Click the block to set the button to the bottom-right or bottom-left corner, picking the side that does not overlap other floating buttons on the site.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Test the scrolling. Open a long article, scroll down to see the button appear, then click it to confirm the page scrolls back to the top smoothly.

The Back to Top button alongside other reading features

The Back to Top button pairs perfectly with other reading aids. Used together with a table of contents at the start of the article, readers can click Back to Top to return to the table of contents and jump quickly to another section. Used together with a reading progress bar, readers get both a position indicator and a shortcut back to the start, making navigation in a long article complete.

The one caution is that if you enable several floating buttons at once, such as Back to Top, a dark mode toggle, and a share bar, you should position them so they do not overlap, choosing left and right sides appropriately, so each button is easy to tap and not confusing.

Back to Top vs other ways to navigate back up

Besides the Back to Top button, there are other ways to help readers return to the top. Understanding the pros and cons of each helps you choose what fits your site.

• Sticky header: the menu stays fixed at the top at all times, so the menu is always reachable, but it takes up screen space, especially on mobile, and it does not actually take you back to the very "top" of the article.
• Table of contents at the start of the article: it helps jump to a heading, but the reader has to scroll back up to find the table of contents first, which loops back to the original problem.
• Back to Top button: takes no space when unused (it stays hidden), appears when needed, and returns you to the top in a single tap, making it the most balanced choice for long articles.

The best approach is often to use them together, for example a sticky header for the main menu plus a Back to Top button for a quick return to the start of the article. The two complement each other without overlapping.

The Back to Top button on the modern web

If you look at leading article sites, you will see the Back to Top button has become a standard element of long-form pages. The reason is not just following a trend, but that reading habits on the web have changed. People read on mobile more, and articles have grown longer to answer questions thoroughly and stay search-friendly. As articles get longer, the need for a shortcut back to the top only rises.

Small details like this are what separate a site that "cares about readers" from one that merely has content. Because BlogKub builds a carefully made Back to Top button into the theme, your Blogger blog looks and works on the same level as a professional site, without you having to write any script yourself.

The Back to Top button, SEO, and user experience

The Back to Top button is not a direct ranking factor, but it helps indirectly through a better user experience. When readers can navigate a long article comfortably, they are more likely to keep exploring the content, open the table of contents, or go back to reread a section of interest, instead of leaving because they feel stuck at the bottom of an endless page. Those behaviors reflect user satisfaction, which is a positive signal.

Importantly, BlogKub builds this button with a small script that loads no external files and does not affect site speed, so you gain the UX benefit without trading away your Core Web Vitals scores, the same philosophy as the theme's other features.

Another angle not to overlook is how readers feel. A button that appears smoothly and carries them back up fluidly creates a small good impression that accumulates into an image of a site that is polished and attentive to detail, something readers remember and that makes the site feel more trustworthy without their realizing it.

Common problems and how to fix them

The button does not appear

It may be because the page content is too short to scroll, so the button does not show. Try testing on an article that is long enough, or check that you added the Back to Top block to the theme.

The button overlaps another floating button

If the Back to Top button overlaps the dark mode toggle or the share bar, move the button to the other side in the block settings.

It snaps up instantly instead of scrolling smoothly

Normally BlogKub's button scrolls smoothly. If it snaps instantly, it may be because a browser or system setting has motion turned off (reduced motion), which is the correct behavior for accessibility.

All of this reflects the idea that a good feature does not have to be flashy or complex, it just has to be in the right place at the right time. The Back to Top button is a clear example of a quiet feature that works when the reader needs it and steps out of the way when they do not, which is the heart of design that truly cares about users.

Best practices

• Enable the Back to Top button on sites with long articles, where it is most useful, especially for mobile readers.
• Choose a side that does not overlap other floating buttons such as the dark mode toggle, to avoid mis-taps.
• Use it together with a table of contents and a reading progress bar for complete navigation in long articles.
• Test on a real phone, since that is the device where this button is used most.

Wrapping up

The Back to Top button is a small detail that genuinely raises the comfort of reading long articles, especially on mobile where scrolling back by hand is tiring. With BlogKub you simply add the Back to Top block, choose the position you like, and Export it to use. You get a button that appears when needed, scrolls up smoothly, stays light on speed, and paired with a table of contents and a reading progress bar, your long articles become easy to navigate and comfortable to use at a professional level.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a bookmark (save articles for later) in a Blogger theme

Often a reader finds an interesting article but has no time to read it right then. Letting them save it for later in one click helps draw them back to the site. This article teaches you how to add a bookmark to a Blogger theme with BlogKub, stored in the browser with no login, along with the reasoning and settings.

Updated 14 July 2026   About a 9 minute read   Level: Beginner

What a bookmark is, and why a blog should have one

A bookmark is a feature that lets readers tap to save an interesting article to come back and read later, without remembering the URL or searching again. The reader just taps a bookmark or heart icon, and that article is stored in a saved list, ready to reopen any time.

The reason this feature is valuable is real reader behavior. Many people find a good article during a break or while scrolling quickly but have no time to read it properly. With no way to save it, they close it and forget. But if saving is easy, they come back to read it and return to your site. A bookmark is therefore the bridge that turns "interested but not free now" into "actually comes back to read".

How BlogKub's bookmark works (no login)

The key highlight is that readers do not need to sign up or log in, because the bookmark stores data in the reader's own browser. When they tap the save icon, that article is added to the saved list at once, with a counter showing how many are stored. Readers open the list to view and go back to read the saved articles anytime.

The bookmark button can appear in several spots for convenience, on the article cards in list pages, and within the article itself. When tapped, the icon changes state to clearly show it is saved, and tapping again removes it. All of this works reader-side with no membership system or back-end database.

How to add a bookmark in BlogKub, step by step

1. Add the Bookmark block. Open the left library, category "Article & UX", and drag the "Bookmark" block in to embed the icon and save system in the theme.
2. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
3. Test saving. Open the site, tap the bookmark icon on an article card or within an article, then check that the counter increases and the article appears in the saved list.
4. Check persistence after refresh. Refresh the page to confirm the saved list is still there, because the data is stored in the reader's browser.

The theme's bookmark vs the browser's bookmark

Many people wonder why not let readers use the browser's existing bookmark function. The answer is about experience and context.

• Easy to tap in the content context. The theme's bookmark icon is on cards and within articles, tappable the moment they are interested, unlike the browser bookmark that requires opening a menu and can be several steps on mobile.
• Gathers the list on the site. All saved articles are collected in one list on your site, so readers come back to the site to view the list, drawing them back directly.
• Designed to fit the design. The icon and saved state blend with the theme, feeling like part of the site, not a separate browser function.

The two do not entirely replace each other, but the theme's bookmark is designed specifically to encourage coming back to read and engaging with your site.

A limitation to understand: reader-side storage

Because the bookmark is stored in the reader's browser without an account, there is a limitation worth stating clearly to set the right expectations. The saved list is tied to that browser and device, meaning if the reader switches to another device, or clears the site's data in the browser, the saved list does not carry over.

This is a worthwhile trade-off for a typical blog, because the upside is it works immediately with no complex membership system, no storing personal data, and no added privacy burden. Most readers who save an article usually come back to read it within a short time on the same device, so this limitation barely affects real use.

The bookmark, drawing readers back, and engagement

From a site-growth angle, a repeat reader is worth more than a one-time visitor, because they are familiar with the site, tend to read several articles, and may become a regular follower. A bookmark helps create a reason for readers to return, because saving is an intention to come back and keep reading.

Used with other read-on features, like related posts and an easy-on-the-eyes dark mode, the bookmark reinforces an overall experience that is impressive and inviting to return to, which is the foundation of building a stable reader base over the long term.

Examples of using bookmarks in different kinds of blog

Bookmarks help differently by kind of content. Look at some examples to see how it helps your readers.

• Recipe blogs: readers often save recipes they want to try another day, then come back when heading to the kitchen. The bookmark is like a personal recipe book on your site.
• Travel blogs: trip planners often save several articles about places, stays, and restaurants first, then come back to read them together when planning for real.
• Tutorial / how-to blogs: readers save lessons they want to follow later when they have time and the right tools, bringing them back to your site to actually do it.
• Review blogs: people deciding to buy often save several reviews to compare before deciding later.

Notice the common thread is "interested now, but will use it later", a behavior found in almost every kind of blog. So the bookmark is a feature that raises the chance readers return no matter what you write about.

Overall, a bookmark is a small investment that pays off in long-term reader retention. The more quality content your site has to save, the more valuable this feature is, because it helps turn passing readers into repeat readers.

Common problems and how to fix them

Saved articles disappear after clearing browser data

This is normal, because the data is stored in the browser. If the reader clears the site's data, the list is gone. Let readers know the bookmark is tied to that device and browser.

The bookmark icon does not show

Check that you added the bookmark block in the theme and Exported again. If you use a template without article cards, the icon may not appear in some spots.

The state does not change when tapped

It may be because the browser blocks storage in some private modes. Try testing in normal mode to confirm it works.

Best practices

• Enable the bookmark on sites with many articles, so readers have a reason to save and come back.
• Use it with related posts to encourage reading and saving several articles at once.
• Test saving and persistence after refresh on both desktop and mobile.
• Communicate to readers that the bookmark is tied to the device and browser, to set the right expectation.

Wrapping up

A bookmark is a feature that turns a passing interest into an actual return, letting readers save an article for later in one click. With BlogKub, you just add the bookmark block and Export it, and readers save and come back to read with no login, because the data is stored in their own browser. Even with the device-tied limitation, it trades for ease of use and no privacy burden, making it a good tool for drawing readers back and building a stable reader base.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build breadcrumbs with schema in a Blogger theme, a detailed guide

A breadcrumb is the small trail that tells readers where they are on your site, and it is one of the markups Google likes to show in the results. This article teaches you how to add breadcrumbs with BreadcrumbList JSON-LD to a Blogger theme with BlogKub, covering every step.

Updated 14 July 2026   About a 9 minute read   Level: Beginner to Intermediate

What a breadcrumb is

A breadcrumb is a small row of links that shows the current page's place in the site hierarchy. It usually sits above the article heading and looks like this:

The name "breadcrumb" comes from the fairy tale of scattering breadcrumbs to find the way back. The web uses the same idea, letting readers know where they came from and return to the main category in one click. It looks simple, but it has a significant effect on both user experience and SEO.

Why breadcrumbs matter for SEO

• Google shows them in place of the URL: in the results, Google often replaces a long URL with an easy-to-read breadcrumb path, such as blogkub.com › Travel › Chiang Mai, making results look tidy and more clickable.
• Helps bots understand the site structure: breadcrumbs connect an article to its category, so Google understands which larger topic this content belongs to, which helps topical grouping and ranking (topical authority).
• Adds meaningful internal links: a link back to the category spreads internal link equity and opens a path for readers to explore related content.
• Lowers immediate bounce: when readers see a path to a category they are interested in, they have another option besides closing, so they stay longer.

The difference between the "displayed" breadcrumb and the "schema"

A good breadcrumb has two parts working together. The first is the path the reader sees on the page. The other is the BreadcrumbList JSON-LD hidden in the code for Google to read. Many sites do only the visible part but forget the schema, so they never get the nice path in the results. BlogKub's strength is that it builds both parts to match, automatically, on every article, so you never have to worry whether it is complete.

How to add a breadcrumb in BlogKub, step by step

1. Add the Breadcrumb block. Open the left library, category "Article & UX", and drag the "Breadcrumb" block in. The system places it at the top of the article automatically.
2. Set the first item text. Click the block to set the first item text, such as "Home", to match your site's language.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Add a label to every post. In the post editor's "Labels" field, add the article's category, such as "Travel", because the breadcrumb uses the first label as the category name in the path.
5. Verify with the Rich Results Test. Put the article URL into Google's Rich Results Test to confirm the BreadcrumbList reads correctly with no errors.

BlogKub's breadcrumb sits in the post's includable, so it has data:post.labels in scope, letting it pull the category from the label correctly, and the displayed path always matches the schema.

How to write and categorize so breadcrumbs are most useful

• Use labels that are real categories, such as "Travel", "Reviews", "Health", not scattered terms like a specific place name. The first label should be a category broad enough to hold several articles.
• Use your labeling system consistently. Plan the site's main categories in advance (say 5 to 8) and sort every post into them, for a site structure Google understands easily.
• Do not add too many labels. The first label is the category in the path, so if you use several, order them so the main category label is in the right position.

Common problems and how to fix them

The path has no category (only Home › Article)

This happens when the post has no label. Open the post in the Blogger editor, add a category label in the Labels field, then save again, and the path is complete immediately.

The Rich Results Test shows a warning

BlogKub's breadcrumb usually passes the test. If there is a warning, it is often because the Blogger category URL has no articles yet. Publish at least one article in that category first.

Breadcrumbs do not show in the results right away

Google has to crawl the new page first, so it can take several days to weeks to show the path in the results. You can speed it up by submitting the URL through Search Console.

Best practices

• Use breadcrumbs together with a well-planned label structure, to benefit both navigation and topical SEO.
• Set the first item text to match your site's language and keep it consistent. Do not switch between "Home" and other words.
• Pair it with a table of contents and related posts to build a web of internal links that helps both readers and rankings.
• Check the Rich Results Test after your first theme upload to confirm the schema works.

Examples of real site category structures

Breadcrumbs are powerful only when the site's category structure is well planned. Look at examples of category layouts for three different kinds of blog, as a guide for designing your own labels.

• Travel blog: main categories might be "Domestic", "International", "Short trips", "Cafes", "Stays". Each article carries the one category label that fits best, and the path becomes Home › Domestic › 3 days 2 nights in Nan.
• Product review blog: organize by product type, such as "Appliances", "Gadgets", "Home goods", "Beauty". A path like Home › Gadgets › Review of the new wireless earbuds tells both people and Google at once which group the content is in.
• Health blog: split by topic, such as "Nutrition", "Exercise", "Mental health", "Conditions and symptoms", which builds topical authority that Google values for YMYL content.

The principle is to choose main categories that are "broad enough to hold several articles, but narrow enough to convey meaning", roughly 5 to 8 for a typical blog. Too many gets scattered, too few gets so broad it means nothing.

Breadcrumbs and E-E-A-T and topical authority

Google assesses sites with the E-E-A-T idea (Experience, Expertise, Authoritativeness, and Trust), and one signal of expertise is a site covering a topic systematically. Breadcrumbs paired with a good category structure help show that your site groups content in an organized way, not scattered articles with no connection.

When a reader or bot clicks from an article back to a category page and sees other articles on the same topic grouped together, that is structural evidence your site goes deep on that subject. The more articles you write in the same category and the better they interconnect through breadcrumbs, related posts, and internal links, the more the site accumulates topical authority, which affects the rankings of the whole category over the long term.

Breadcrumbs on mobile and common misconceptions

On a narrow mobile screen, a long path can wrap or feel cramped. The good fix is to keep the path short and meaningful. Generally three levels (Home › Category › Article) is just right. Do not nest several sub-category levels so the path gets too long, because it wastes space on mobile and confuses readers more than it helps.

The first common misconception is thinking breadcrumbs must mirror the URL structure exactly. In reality, breadcrumbs reflect the "logical hierarchy of the content", which can differ from the URL. For example, Blogger's URL is date-based, but the breadcrumb shows the category from the label, which is more useful to the reader. The second misconception is thinking that adding a breadcrumb gets you the path in the results immediately. In reality, you have to wait for Google to crawl and process, which takes time. The last is doing only the visible path and forgetting the schema, which sadly misses the chance for a rich result. BlogKub handles all three correctly from the start.

Wrapping up

The breadcrumb is a small element with a big payoff. It keeps readers from getting lost, helps Google understand the site structure, and makes your results look tidy and clickable. With BlogKub, you just add the breadcrumb block, set the first item text, and label your posts with discipline, and the system builds the BreadcrumbList schema to match the displayed path automatically, so your Blogger site is ready for rich results from day one.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add a cookie consent bar in a Blogger theme (supports PDPA and AdSense)

If your site uses Analytics or AdSense, informing visitors and requesting consent for cookies is not just a matter of courtesy, it is a requirement of both the law and the ad platform. This article teaches you how to add a cookie bar to a Blogger theme with BlogKub, one that remembers acceptance and is customizable, and explains PDPA and AdSense along the way.

Updated 14 July 2026   About a 9 minute read   Level: Beginner

Why a Blogger site with ads or Analytics needs a cookie bar

A cookie bar is a notice to visitors that the site uses cookies, with a button to accept. Cookies are small files a site stores in the browser to remember information, such as settings, visit statistics, or the display of relevant ads. When your site installs Google Analytics or AdSense, it means cookies are being used to collect visitor data, which must be disclosed.

For site owners in Thailand, this relates to PDPA (the Personal Data Protection Act), which emphasizes informing and requesting consent before collecting data. And if you use AdSense, Google's own policy requires publishers to obtain consent for the use of cookies from users in many regions. Having a cookie bar is therefore both compliance with requirements and a way to build trust in your site.

This article gives general information for understanding, not legal advice. If your site collects sensitive data or has a large audience, you should consult a PDPA expert to prepare a complete policy.

How BlogKub's cookie bar works

BlogKub's cookie bar shows as a floating card in the bottom-left of the screen, with text announcing the use of cookies, a link to the privacy policy page, and an accept button. The highlight is that when a visitor clicks accept, the system remembers it in the browser and does not show the bar again on later visits, so it does not repeatedly bother readers.

Because it is a fixed floating card, it does not push the main content around, so it does not affect the layout or the speed score. On mobile the bar spans the full width along the edge for easy reading and tapping (the same approach as the language menu), without covering important content.

How to add the cookie bar in BlogKub, step by step

1. Add the cookie bar block. Open the left library, the "Add-ons" category, and drag the "Cookie bar (Consent)" block in.
2. Set the text, policy link, and color. Click the block to set the cookie notice text, the accept button text, the policy link text, the policy page URL, and the bar background color to match your site's design.
3. Create a privacy policy page. In Blogger, create a new page called "Privacy Policy" explaining how the site collects and uses data, then take that page's URL into the policy link of the cookie bar.
4. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.

How to write appropriate cookie bar text

The text in the bar should not be long or vague. Communicate directly what the site uses cookies for. A good example is "This website uses cookies to improve your experience and analyze traffic", followed by a "Privacy Policy" link and an "Accept" button. The principles are:

• State the purpose briefly, such as to analyze traffic or show ads, so users understand what they are accepting.
• Include a link to the full policy, for those who want to read more detail.
• Make the accept button clear, using easy words like "Accept" or "OK".

The cookie bar and AdSense: points to watch

If you intend to earn from AdSense on your Blogger site, cookie consent matters even more, because Google requires publishers to obtain consent for the use of cookies for personalized advertising in many regions. Having a cookie bar together with a clear policy page helps your site comply with requirements and reduces the risk around the approval or standing of your AdSense account.

Besides the cookie bar, the privacy policy page should also state that the site uses AdSense and that third parties may use cookies to show interest-based ads, which is standard wording AdSense recommends having.

Another point worth knowing is that in some regions with strict laws, such as the European Union, Google requires publishers to use a certified consent management system. If many of your readers come from those regions, you should study AdSense's additional requirements. But for a blog focused mainly on Thai readers, a cookie bar with a clear policy page is a suitable starting point that covers the basic needs well.

PDPA basics for bloggers

PDPA, or the Personal Data Protection Act, is a Thai law that sets principles for the collection, use, and disclosure of personal data. For a general blogger, what to understand is that when your site collects visitor data, for example through Analytics or advertising cookies, you should inform users and give them the chance to know what is happening with their data.

The key principles the cookie bar helps address are "transparency" and "notice". A bar that shows clear text with a link to the full policy is the first step to making your site communicate with users honestly. Even a small personal blog may have low legal risk, but building good habits from the start helps the site grow with confidence, and be ready when visitors increase or when you start earning from ads.

What should be in the privacy policy page

The privacy policy page is the companion to the cookie bar, because the bar links to it. Here are the basic topics it should include to be complete and credible.

• What data the site collects, such as visit data through cookies, statistics from Analytics, or data users enter themselves (if any).
• What the data is used for, such as improving content, analyzing traffic, or showing relevant ads.
• Third parties involved, such as stating that the site uses Google Analytics and AdSense, which may use cookies to show interest-based ads (standard wording AdSense recommends).
• Users' rights and a contact channel, such as how to turn off cookies in the browser, and a channel to ask about data.

You can create this page easily as a page in Blogger, then take the URL into the policy link of the cookie bar. When both parts work together, your site communicates about data with users completely and professionally.

Common problems and how to fix them

The cookie bar does not show

It may be because you already clicked accept, so the system remembers it. Try opening in incognito mode or clearing the site data in your browser, and the bar will show again.

The bar overlaps another floating button

The bar sits in the bottom-left. If there is another floating button nearby, move that button to the right side so they do not overlap.

The policy link goes to a blank page

Check that you created the privacy policy page in Blogger and copied the correct URL into it. If there is no page yet, create it first.

Best practices

• Always enable the cookie bar if the site uses Analytics or AdSense, for compliance with PDPA and ad policy.
• Create and link a privacy policy page that fully explains data collection and use.
• Write the bar text short, clear, direct, and unambiguous.
• Test on both desktop and mobile to make sure the bar does not cover important content and accept is easy to click.

Wrapping up

The cookie bar is a basic element that a site using Analytics or AdSense should have, both to comply with PDPA and the ad platform's policy, and to build trust with readers. With BlogKub you just add the cookie bar block, set the text and policy link, and Export it to use. The system shows a bar that remembers acceptance and does not bother readers again, working well on both desktop and mobile. Do not forget to pair it with a fully written privacy policy page.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build a copy code button in Blogger code blocks

For blogs with code samples, letting readers copy the whole block in one click is a small detail that makes a huge difference. This article teaches you how to add a copy code button to a Blogger theme with BlogKub that works automatically on every code block, along with the reasoning, settings, and common fixes.

Updated 14 July 2026   About a 9 minute read   Level: Beginner

What a copy code button is, and why tech blogs cannot do without it

A copy code button is a small button on the corner of a code block that, when a reader clicks it, copies all the code in that block to the clipboard at once, without dragging the mouse to select line by line, without fear of missing lines or accidentally selecting line numbers. Just click once and paste in your own program.

For blogs that teach coding, share scripts, or write tech how-tos, this button is something readers expect to be there, because leading documentation sites and developer communities all have a copy button on every code block. When your blog has it, readers immediately feel the site looks professional and cares about their experience. Conversely, if they have to drag-select themselves on mobile, which is very hard, plenty of readers will give up and leave the page.

Behaviorally, copying code is one of the most frequent actions a tech reader takes. Every time they fight with drag-selecting is friction that erodes their good feeling toward the site. A copy button is therefore a small investment with a high return in satisfaction and repeat reading.

How BlogKub's copy code button works

The highlight is that it works automatically on every code block without you touching the theme's code at all. When you add this block, the system embeds a tiny script that scans every <pre> tag in the article content and adds a "Copy" button with an icon in the top-right of each block. So you write articles and place code as usual, without adding a button per block.

When a reader clicks the button, the system takes the text in the block (from the inner <code>, or the whole block if none) and writes it to the clipboard via the modern Clipboard API. The button then changes its text to "Copied" and changes color briefly to confirm success, before returning to normal on its own, giving clear feedback without disrupting the eye.

Importantly, the system has a fallback. If the reader's browser does not support the modern Clipboard API, it switches to the older copy technique automatically, so most readers can copy even on older browsers or restricted environments.

How to add the copy code button in BlogKub, step by step

1. Add the copy code button block. Open the left block library, category "Article & UX", and drag the "Copy code button" block in to enable the automatic button system across the theme.
2. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file to upload the new theme.
3. Put code in the post with a pre block. When writing an article, put your code in a <pre><code>...</code></pre> tag, and the system recognizes it as a code block and adds the copy button itself.
4. Test copying. Open the live article, click the copy button in the top-right of the code block, then paste it into a text editor to confirm you got every line with no odd characters.

Why code blocks must use the <pre> tag

The <pre> (preformatted text) tag is the web standard for showing text that must keep its spacing and line breaks as in the source, which is essential for code where indentation has meaning. The copy button system relies on this tag as the signal that "this is a code block", so it does not add a button in the wrong place on a normal paragraph.

The benefit of using <pre> with <code> also includes semantic meaning, letting search engines and screen readers understand that this section is code, helping your content be friendly to both SEO and accessibility. When you set the structure correctly, the copy button works precisely and automatically.

If you paste code into Blogger and it becomes one long line, check that the editor is in "HTML view" and the code is genuinely wrapped in <pre>, because the "compose" mode sometimes strips line breaks, distorting both the display and the copy.

Details that make the copy button look good and easy to use

A good button is not just "click and it copies", it must communicate its state so readers are confident. BlogKub's copy button has these small details designed in.

• Fixed top-right position. Placed where readers expect by tech-web convention, recognizable at a glance as a copy button.
• A document-pair icon. Uses the two-overlapping-sheets icon that is the universal symbol for copying, conveying meaning even without reading text.
• "Copied" feedback. On success, the button changes text and color briefly, then returns to normal on its own, giving confidence with no disruptive popup.
• Blends with the theme. The button uses your theme's colors and rounded corners, in both light and dark mode, so it looks like part of the site, not a foreign element.

These details may seem small, but together they make readers feel your site is refined and credible, a feeling that carries over to the credibility of the content too.

The copy code button and the mobile experience

On mobile, drag-selecting text in a horizontally scrolling code block is extremely frustrating. Readers often fail to select all of it, or accidentally scroll the screen instead. The copy button is therefore even more valuable on mobile than desktop, because it turns a near-impossible task into a single tap.

Considering that most blog readers today come from mobile, having a copy button is not a gimmick but a fix for a real usability problem affecting many readers, reducing the mid-page exit rate of those who came to use the code.

The copy code button, SEO, and time on page

Even though the copy button is not a direct ranking factor, it has a valuable indirect effect on SEO through user-experience signals. When readers copy code conveniently, they tend to stay on the page longer, read to the end, and come back when they need the code again. These behaviors are quality signals search engines value.

Beyond that, blogs with genuinely usable, easy-to-copy code samples tend to get shared and cited more, leading to more links and traffic naturally. Used with good content structure, such as a table of contents that helps readers jump to the code section they want, and an AEO summary box that answers concisely, your site becomes friendly to both readers and search engines at once.

Examples of use in different kinds of blog

The copy code button is more broadly useful than you might think, not limited to coding blogs.

• Coding tutorial blogs: readers copy sample scripts to run or adapt at once, cutting steps and typing errors.
• Template and snippet blogs: sites giving away CSS, HTML, or various recipes, where the copy button makes them easy to use and raises the chance readers come back for code.
• Blogger/web technique blogs: articles recommending decoration or theme-fix code, where readers copy and paste precisely, reducing broken code from missing pieces.
• Command and config blogs: sites sharing command-line commands or config files, where copying it all correctly matters greatly, because one wrong character fails to run.

The common thread is that readers want to "use the code", and the copy button helps them succeed smoothly, which adds value to your content in readers' eyes.

Common problems and how to fix them

Clicking copy gives incomplete code or odd characters

This usually happens because the code is not correctly in a <pre> tag, or there is nested formatting inserting special characters. Check in HTML view that the code is wrapped in <pre><code> with no odd formatting tags in between.

The copy button does not appear

Check that you added the copy code button block in the theme and re-exported, then confirm the code block genuinely uses a <pre> tag, because the system only adds a button to <pre> blocks.

Clicking does not copy on some browsers

Normally the system switches to the fallback itself, but some restricted environments (such as a non-HTTPS page) may block clipboard access. Make sure your site is served over HTTPS, which Blogger already supports.

The button overlaps the first line of code

The button floats in the top-right of the block. If the first line is long enough to hit the button, readers can still scroll to read normally, but if you want, add a blank line at the top of the code for tidiness.

Best practices

• Always wrap code in <pre><code> in HTML view, so the copy button and display are correct.
• Test copying on both desktop and mobile, especially articles with multiple code blocks.
• Place code that is genuinely usable once copied, with no special characters from web formatting mixed in.
• Use it with anchor links so readers can share a link straight to the section with the code they want.
• For long articles with many code sections, add a table of contents to help readers jump to the relevant code block faster.

Wrapping up

The copy code button is a small detail that instantly raises a tech blog's professionalism and usability. With BlogKub, you just add the copy code button block once and Export it, and the system adds a button to every <pre> code block in every article automatically. Readers copy in one click with a confirmation state, and there is a fallback for older browsers, reducing friction, raising satisfaction, and giving readers a reason to come back for code from your site, without you writing any theme code yourself.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build dark mode in a Blogger theme, a detailed step-by-step guide

Dark mode has become a feature readers now expect, especially those reading at night or on mobile. This article teaches you how to add a dark mode button to a Blogger theme with BlogKub that remembers the reader's choice, syncs across the site, and does not flash on load, along with the UX reasoning and fixes.

Updated 14 July 2026   About an 8 minute read   Level: Beginner

Why a modern Blogger site should have dark mode

Dark mode lets readers choose to view the site with a dark background and light text, instead of the standard white. It is not just a beauty trend, it solves real problems. Many people read blogs at night in bed, where a bright white background strains the eyes and makes long reading hard. Dark mode reduces eye fatigue in low light, and on OLED screens it also saves battery.

In terms of user experience, having a button to choose signals that the site cares about details and is modern, which affects the first impression and credibility. Readers who feel comfortable tend to stay longer and return.

The three keys to dark mode done right

Good dark mode is not just "inverting colors", it has to pass these three, which BlogKub handles fully:

1. Remember the reader's choice (persistence)

When a reader taps dark mode, the site must remember this person likes dark mode, then show dark mode on the next page and the next visit, always. If it does not remember, the reader has to tap again on every page, which is very annoying.

2. No flash on load (no FOUC)

The classic dark mode problem is the page loading white for a moment before jumping to dark, called Flash of Unstyled Content, which strains the eyes and looks unprofessional. BlogKub sets the theme before the page renders, so someone who chose dark mode sees a dark background immediately with no white flash.

3. Sync across the site consistently

When you toggle, every part must change together, the header, content, cards, footer, and extra features, because BlogKub sets colors through one set of theme variables. So toggling changes the whole site to be readable in both modes, with no spot where text sinks into the background.

How to add dark mode in BlogKub, step by step

1. Add the Dark Mode Toggle block. Many templates install it already. If yours does not, open the left library, category "Article & UX", and drag the "Dark Mode Toggle" block in.
2. Choose the button position. Click the block to set the position, such as a floating button in the bottom-right corner, or shown in the header, as well as in the mobile bottom bar.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Test the toggle and persistence. Open the live site, tap the toggle, then refresh the page. Confirm the site remembers your choice with no white flash on load. Try switching to another page to see the mode stays.

BlogKub's dark mode button works with the site's central theme controller, so it syncs consistently with the dark mode button in the bottom bar and other features, without conflicting.

Dark mode and the device setting

Some readers already set their device to dark mode system-wide. BlogKub respects this. If a reader has never chosen on your site, the site starts by following the device setting (prefers-color-scheme) automatically, but when the reader taps to choose, that choice is remembered and takes priority over the system setting. This is the correct behavior by modern web standards.

Does dark mode affect SEO?

Dark mode is not a direct ranking factor, but it has a good indirect effect, because it reduces eye fatigue and increases reading comfort, so readers stay longer and bounce less, which is a behavioral quality signal. Importantly, BlogKub builds dark mode without hiding or duplicating content and without affecting page speed, so it is completely safe for SEO.

Common problems and how to fix them

Some images or boxes are glaringly bright in dark mode

This usually happens with transparent-background images or PNGs that have a white background. Use images with a genuinely transparent background, or images that look good in both modes, and avoid embedding fixed white in article content.

Some text is hard to read in dark mode

This happens when you set a fixed text color (such as black) in the post yourself. Leave the color as the theme default, so the system switches colors to be readable in both modes automatically.

The button overlaps another floating button

If you enable several floating buttons at once (such as back-to-top and dark mode), choose opposite sides in the block settings so they do not stack.

Best practices

• Enable dark mode as a standard feature of the site, especially blogs people read at length or at night.
• Do not embed fixed text/background colors in post content. Let the theme control the color so toggling looks good.
• Use images that look good in both modes, or transparent-background images, so there is no odd white frame in dark mode.
• Test both modes before publishing every time, especially the live article page with images and boxes.
• To let readers customize more, try adding a theme color picker alongside, so they can adjust both brightness and accent tone.

Color theory and contrast for comfortable dark mode

Good dark mode is not just inverting white to pure black. A pure black background (#000000) with glaring white text (#ffffff) gives contrast so high it causes "halation", where text seems to glow and blur, especially for people with astigmatism. A good standard uses a dark blue-gray background (such as a #0f172a tone) and soft white text instead of glaring white, keeping contrast at a comfortable level.

BlogKub designs its dark mode palette to pass accessibility contrast (WCAG), with the main text and background different enough for continuous reading while not so glaring it tires the eyes. Accent colors and links are tuned to still stand out on a dark background without disappearing. This is the detail people often overlook when making dark mode themselves, but it is what makes dark mode "genuinely comfortable to read" rather than just "there to tap".

The caution on the writer's side is: do not set fixed text or background colors in post content, because embedded colors do not adapt to the mode, making some paragraphs unreadable in dark mode. Letting the theme control the color is the safest path.

Dark mode and site speed (Core Web Vitals)

A common question is whether adding dark mode slows the site. The answer is that it has almost no effect, because BlogKub does dark mode by switching CSS color variables, not loading a second stylesheet or calling extra external files. The script that sets the theme before rendering is tiny and fast, so it does not significantly affect Largest Contentful Paint (LCP) or Interaction to Next Paint (INP).

Importantly, setting the theme before rendering prevents a layout shift from the page changing color mid-load, which is also good for the Cumulative Layout Shift (CLS) score. You could say BlogKub's dark mode is designed to be "light and fast", in line with the whole theme's philosophy of embedding CSS in b:skin and not relying on external resources.

A pre-publish checklist for dark mode

• Open the live article page in dark mode and read every part: headings, paragraphs, links, callout boxes, tables, and image captions, and check they are all clear.
• Check images for no odd white frame or white background clashing with the dark background.
• Toggle the mode and refresh, confirming the site remembers the choice and does not flash.
• Test on a real phone, because most people use dark mode on mobile the most.
• Check the dark mode button does not overlap another floating button, such as back-to-top.
• Visit the site for the first time in dark mode (from a device set to dark system-wide) to see the system default works.

Once you pass this checklist, you can be confident your dark mode is ready in every situation, both for readers who deliberately choose and readers who let the site follow their device. This one round of testing prevents the annoying issues that often appear after publishing, such as an unreadable paragraph or an image that stands out, which are harder to fix later than checking thoroughly from the start.

Wrapping up

Dark mode is a feature that instantly lifts reading comfort and the site's modern image. The keys are remembering the reader's choice, no flash on load, and syncing colors across the site consistently, all three of which BlogKub handles automatically. You just add the Dark Mode Toggle block, choose the button position, and Export it. With that, your readers get a better reading experience day and night. And to raise long-article reading further, try adding a reading progress bar alongside.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add a magazine-style dropcap in Blogger articles

A dropcap is a classic layout flourish from the world of magazines and books that makes the first letter of an article large and striking. This article teaches you how to add a dropcap to a Blogger theme with BlogKub, one that picks the real first paragraph automatically and lets you adjust the color, along with the design reasoning and how to fix problems.

Updated 14 July 2026   About an 8 minute read   Level: Beginner

What a dropcap is, and where it comes from

A dropcap is the first letter of a paragraph enlarged several times and spanning several lines downward. It is a layout technique that dates back to the era of illuminated manuscripts and carried through to quality magazines, books, and newspapers. Its original purpose was to draw the reader's eye to say "start reading here" and to give the page a refined feel.

In the modern web, the dropcap keeps that same value. It turns an ordinary opening paragraph into a distinctive start, making an article look like deliberate writing rather than just text placed in a row. For a blog that wants to project a magazine image or a premium lifestyle feel, the dropcap is a small detail that clearly raises the overall impression.

Why "automatic" paragraph selection matters

The real challenge of a dropcap on the web is not making the letter large, it is picking the correct paragraph. Simple dropcap methods using CSS alone (such as :first-of-type) often miss, because a real Blogger article does not always start with a text paragraph. Often the first paragraph is an image, a summary box, or a table of contents, which makes the dropcap land in the wrong place or not appear at all.

BlogKub solves this with a small script that searches for the first content paragraph that is real text, skipping image-only paragraphs, skipping AEO summary boxes, and skipping the table of contents, then adds the dropcap class to that paragraph. The result is that the large first letter always lands on real text, whatever the article's opening structure, so you never have to fix it article by article.

How to add the dropcap in BlogKub, step by step

1. Add the Dropcap block. Open the left block library, the "Article & UX" category, and drag the "Large first letter" block into the page to enable it across the whole theme.
2. Choose the letter color. In the block settings, choose "Accent" to make the first letter use the theme's main color for prominence, or "Normal text color" for an understated, blended look.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Check the first paragraph. Open a real article to confirm the first letter of the first content paragraph is enlarged nicely and does not land on an image or a summary box.

Which color to choose: accent vs normal text color

Choosing the dropcap color affects the mood of the article more than you might think. The two options suit different situations.

• Accent: the first letter uses the theme's main color, making the start of the article prominent and lively. It suits lifestyle, travel, or any site that wants brightness and wants the dropcap to be an eye-catching spot of color.
• Normal text color: the first letter is enlarged but uses the same color as the content, giving a classic, refined, formal feel. It suits academic blogs, company sites, or content that wants a composed tone.

A simple recommendation: if your site has a clear brand color and you want to reinforce your identity, choose the accent. But if you emphasize easy reading and formality, the normal text color blends better. Try both in a real article and choose the one that best fits your site's overall look.

The dropcap and Thai: things to watch

The dropcap was designed from Latin letters, which have consistent height. Applied to Thai, there are extra considerations, because many Thai consonants have upper vowels, lower vowels, or tone marks that take up vertical space. When you enlarge the first letter, these elements grow too and may crowd the neighboring lines.

In practice, BlogKub's dropcap works with Thai and automatically scales smaller on mobile screens to reduce crowding, but we recommend checking the opening paragraph of Thai articles after setup, especially if the first letter is a consonant with a vowel or tone mark attached. If it feels too tight, starting the first paragraph with a consonant of a simpler shape helps the dropcap look nicer.

The dropcap, reading, and good design

A dropcap is not just decoration, it plays a role in visual hierarchy. It quietly tells the reader that the content starts here, and creates a gentler entry into the article than jumping straight into the text. Used in moderation, the dropcap makes the article page look deliberately laid out and professional.

That said, the key is moderation. A dropcap suits "a single opening paragraph" of an article, and should not be added to every paragraph, which would look cluttered. BlogKub is therefore designed to apply it only to the first content paragraph, to preserve the elegance of the technique and let it draw the eye to the start without stealing attention from the rest of the content.

When you pair the dropcap with other reading elements, such as dark mode, which helps reading in low light, and a progress bar, which shows how far along you are, your article becomes both beautiful and easy to read at once.

Examples of using the dropcap in different kinds of blogs

The dropcap fits certain content types especially well. Look at these examples to picture how to use it aptly.

• Story/essay blogs: the dropcap fits descriptive writing beautifully, because it creates a literary atmosphere from the very first line.
• Lifestyle and fashion blogs: the magazine tone of the dropcap reinforces a premium image well, especially when you choose an accent color to match your brand color.
• Travel blogs: an opening paragraph describing a destination becomes more inviting when a large first letter leads the eye.
• Academic or analytical blogs: choose the normal text color for formality, and the dropcap adds refinement without looking too playful.

Notice the dropcap suits content that has a clear "text opening paragraph". If your articles often start with a large image first, BlogKub's automatic paragraph selection still ensures the dropcap lands on the first text paragraph correctly.

Common problems and how to fix them

The dropcap does not appear

Check that you added the Dropcap block and Exported again. If an article has no real text paragraph at all (for example only images or a list), the system has no paragraph to apply the dropcap to. Make sure the article has at least one content paragraph.

The dropcap lands on a summary box or the table of contents

Normally the system skips these elements. If you still see the problem, check that the summary box or table of contents was added via a real BlogKub block, not a structure you laid out yourself that the system does not recognize.

The Thai first letter looks crowded with its vowel or tone mark

This is natural for Thai when a letter is enlarged. Try checking the display on mobile, where the system already reduces the size, or adjust the opening paragraph to start with a consonant of a simpler shape for a better look.

You want to turn the dropcap off for certain articles

The dropcap is a theme-level setting that applies to the first paragraph of every article. If you need per-article control, plan your article openings to be consistent, or consider which article types should have a dropcap from the start.

Best practices

• Use the dropcap to reinforce a magazine image, not everywhere, and choose a color that fits your site's overall tone.
• Check the opening paragraph of Thai articles after setup, especially when the first letter has a vowel or tone mark.
• Test the display on both desktop and mobile, since the dropcap size scales with the screen.
• Pair it with other reading elements such as a table of contents and related articles so it is both beautiful and easy to use.

Wrapping up

The dropcap is a small design detail that gives your articles a premium, magazine feel from the very first line. BlogKub's strength is picking the real first content paragraph automatically, skipping images, summary boxes, and the table of contents, so the dropcap always lands in the right place without you fixing it article by article. Just add the block, choose an accent or normal color, and Export it, and every article gets an elegant, distinctive start that raises your site's image to look deliberate and professional.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build an FAQ with FAQPage schema in a Blogger theme

A frequently asked questions section not only clears up readers' doubts, it is also an answer-first content unit that AI and Google like to cite. This article teaches you how to add an accordion FAQ with automatic FAQPage schema to a Blogger theme with BlogKub, along with the latest things to know about rich results.

Updated 14 July 2026   About a 10 minute read   Level: Intermediate

What an FAQ is, and why it is powerful in the AI era

An FAQ (Frequently Asked Questions) section is a set of short questions and answers collecting the common doubts about a topic. It usually sits at the end of an article as an accordion you can open and close. The upside is that it answers specific questions the main content may not cover directly, and each question is an "answer-first" content unit in itself.

In an age where people type full-sentence questions into search and ask AI directly, an FAQ becomes a real asset, because the question-and-answer format matches how users ask and how AI looks for answers. When an article has a well-written FAQ, the odds that one of its questions matches what someone searches and gets cited go up.

The latest to know: how FAQ rich results changed

For transparency, it has to be said plainly that since mid-2023 Google reduced the display of FAQ rich results (the dropdown under a result), limiting them mainly to trusted health and government sites. So general sites may not see that dropdown in the results the way they used to.

That said, adding FAQPage schema still has value, for reasons broader than showing a rich result alone. It helps search engines, and especially AI Search, understand which part is a question and which is an answer, giving the content a structure answer engines can use easily. The accordion itself also helps UX directly, rich result or not. In short, keep doing FAQs fully, just set your expectations about the search-result dropdown to match reality.

How BlogKub's FAQ works

BlogKub splits two parts that work together. The first is the accordion style and script installed in the theme when you add the FAQ block. The second is the FAQ content you write in each post using the .bk-faq structure. When the two meet, the script makes the questions open and close, and reads the actually-displayed questions and answers to build matching FAQPage JSON-LD automatically.

The upside of this approach is that the schema always matches what the reader sees, which is a key Google requirement forbidding FAQ content in structured data that does not appear on the page. So you never risk hand-writing schema and breaking policy.

How to add an FAQ in BlogKub, step by step

1. Enable the FAQ feature in the theme. Open the left library, category "Article & UX", and drag the "FAQ" block in to embed the FAQ styles and script in the theme.
2. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
3. Write questions and answers in the post. In the post editor, switch to HTML view and place the FAQ block as in this example, wrapping it in <div class="bk-faq"> with each question as a <details>:

   <div class="bk-faq">
     <details>
       <summary>How many minutes to soft-boil an egg?</summary>
       <p>Boil for 6 minutes, then straight into cold water.</p>
     </details>
     <details>
       <summary>How long do soft-boiled eggs keep?</summary>
       <p>1 to 2 days in the fridge, and reheat before eating.</p>
     </details>
   </div>

4. Publish and check Rich Results. Publish the post, then put the URL into Google's Rich Results Test to confirm the FAQPage reads correctly with no errors.

Each question is one <details>, where <summary> is the question and the following paragraph is the answer. BlogKub's script pairs these questions and answers to build matching schema.

How to write a quality FAQ that gets cited

• Use real questions people ask. Think about what readers genuinely wonder after the article, or the words people type to search. Do not invent questions no one asks.
• Answer completely in one answer. The answer should be concise and to the point, 1 to 3 sentences, so people get the answer at once without clicking elsewhere.
• One question per point. Do not stuff several questions into one, because it is both hard to read and confuses the schema.
• Relevant to the article. The FAQ should build on the main content, not be a floating unrelated question hoping for schema.
• Write complete sentences, because AI and voice assistants read the answer straight from this text.

The FAQ with AEO/GEO and the summary box

An FAQ pairs neatly with the AEO summary box. The summary box answers one main question at the top of the article, and the FAQ answers several secondary questions at the end. Using both, your content covers the big question and the smaller ones, expanding the space where AI Search can cite you with a link back to your site.

For GEO in particular, the question-and-answer format is a language model's favorite food, because it is clear what is a question and what is an answer. When ChatGPT Search or Perplexity scans a page, a well-structured FAQ is a spot that gets pulled in often.

Another angle not to miss is that an FAQ captures "long-tail" searches the main article may not target specifically. People may not search just a broad topic title but a specific question. When your FAQ has a question that matches what they typed, your page has a chance to appear and answer it precisely. The more articles you accumulate with FAQs covering varied questions, the wider your site catches searches, without writing a new article for every question.

Common problems and how to fix them

The Rich Results Test does not find FAQPage

Check that you wrapped all questions in <div class="bk-faq"> and each question is a correct <details><summary>. If the structure is off, the script cannot build the schema.

Questions do not open and close

It means the FAQ block is not added in the theme yet (the script and styles are not embedded). Add the FAQ block in BlogKub and Export again.

Answers too long in the box

Trim to a concise 1 to 3 sentences. If there is a lot of detail, put it in the main content and summarize briefly in the FAQ.

Best practices

• Include 3 to 8 real, relevant questions. Quality matters more than quantity.
• Place the FAQ at the end of the article after the main content, to answer remaining doubts before the reader leaves.
• Do not repeat an answer from the content word for word. Summarize or add a new angle.
• Review the FAQ when you update the article, so answers match the current information.
• Check the Rich Results Test after publishing to confirm the schema works.

Example FAQs for different kinds of blog

A good FAQ starts from understanding what your readers genuinely wonder. Here are question styles that tend to work well in each kind of blog, as inspiration for writing your own.

• Travel blog: "When is the best time to visit", "How do I get there from downtown", "How many hours should I allow", "Is there an entry fee". Practical questions trip planners want answered right away.
• Product review blog: "How is this model different from the last", "Is it worth the price", "What does it work with", "How many years of warranty". Questions that help people decide to buy.
• How-to / tutorial blog: "How long does it take", "What equipment do I need", "Can a beginner do it", "What if I miss this step". Questions that unblock the person following along.
• Health blog: "Who is it for", "Are there precautions", "When will I see results", emphasizing accuracy and citing credible sources, because it is YMYL content.

Notice that good questions often start with how, when, why, or whether, matching how people type searches and ask AI. Phrasing questions to match the language your readers actually use is the key to getting your FAQ cited.

Wrapping up

An FAQ section is a worthwhile investment for both the reader experience and AI-era search. Even though the FAQ rich result in the results has been limited, FAQPage schema still gives your content a structure that AI and search engines understand. With BlogKub, you just add the FAQ block to enable the styles and script in the theme, then write real questions and answers in the .bk-faq block, and the schema matching what is displayed is built for you automatically, so every article is ready to answer both readers and AI at once.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add image zoom (Lightbox) in Blogger articles: click to expand full screen

Many kinds of images in an article, whether photos, infographics, or screenshots, often have details readers want to see up close. Letting them click an image to expand it full screen is a flourish that instantly raises the reading experience. This article teaches you how to add a Lightbox to a Blogger theme with BlogKub automatically, along with the reasoning and the settings.

Updated 14 July 2026   About an 8 minute read   Level: Beginner

What a Lightbox is

A Lightbox is a feature where, when a reader clicks an image in an article, the image expands to full screen on a dark background so the details are clearer, then closes back to the article by clicking the background or a close button. The name Lightbox comes from the light box photographers use to view film. The idea is to isolate an image to view it alone with nothing else distracting the eye.

On a web page, images are usually scaled to fit the content width, which may be too small to see some details. A Lightbox solves this by letting readers expand an image full screen when they want, then return to reading immediately. It offers the option to "look closely" without affecting the article's layout.

Why articles with many images should have a Lightbox

A Lightbox is not necessary for every site, but it is very valuable for certain kinds of articles where images carry important details.

• Photos: travel, food, or fashion blogs where readers want to see the beauty and detail of an image in full.
• Infographics and charts: images with small text or numbers that cannot be read at reduced size and must be enlarged to see clearly.
• Screenshots: tutorials or reviews with step images, where readers often need to expand to see a button or menu in the image.
• Work and examples: sites showing design work or results where detail is everything.

In these cases, without a Lightbox, readers have to open the image in a new tab or pinch zoom on mobile, which is inconvenient and takes them out of the article. A Lightbox makes it all happen on one page smoothly.

How BlogKub's Lightbox works (automatically)

The highlight is that it works automatically with the images in the article content. Once you add the image zoom block to the theme, you just insert images in the post as usual through the Blogger editor, and those images become click-to-expand on their own with no per-image setup, no special code or extra tags needed.

When a reader clicks an image, the system shows the image full screen on a dark background, with a close button in the top corner. Readers can close by clicking the background, pressing the close button, or pressing the Esc key. It all uses a small script that loads no external files, and the image shown is the same one in the article, so it adds no loading burden and does not affect speed.

How to add the Lightbox in BlogKub, step by step

1. Add the image zoom block. Many templates already include it. If yours does not, open the left library, the "Article & UX" category, and drag the "Image zoom (Lightbox)" block in.
2. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
3. Insert images in the article as usual. Insert images in the post through the Blogger editor as normal, and the content images become click-to-expand automatically with no extra setup.
4. Test the zoom. Open a live article, click an image to see it expand full screen on the dark background, then close by clicking the background or the close button.

Lightbox and image SEO

A Lightbox does not replace image SEO, but the two work well together. What gets an image into Google Images is a crawlable image URL, meaningful ALT text, and references in the content, which is about inserting images correctly. The Lightbox is about the user experience when viewing images on the page.

Because the Lightbox shows the same image that is in the article, without hiding or replacing it with something else, it does not affect how Google collects image data. You should still write good ALT text and use suitably high-quality images per image SEO principles, and let the Lightbox add a layer of viewing experience.

Lightbox vs galleries and image sliders

A Lightbox is often confused with a gallery or an image slider, but all three do different jobs and can complement each other. A Lightbox is clicking a single image to expand and view it closely. An image slider is arranging several images to scroll through in one area. A gallery is laying out several images as a grid. Each suits a different situation.

In practice, one article may use several together, such as an image slider to show a set of images concisely, and a Lightbox to expand and see the detail when a reader is especially interested in one image. Understanding the role of each feature helps you choose the right one for the content, instead of using everything at once until it is cluttered.

Tips for preparing images for a Lightbox

Because a Lightbox expands images full screen, the quality of the source image matters more than usual. Follow these principles so images still look good when expanded.

• Upload a reasonable resolution. An image to be expanded should be wide enough (for example at least 1200 to 1600 pixels for important images) so it stays sharp full screen, but not so large that the file is heavy.
• Balance sharpness and file size. Compress images suitably and use an appropriate image format so the page does not load slowly, especially articles with many images.
• Make infographic text readable when expanded. If an image has text, check that it is actually readable when expanded full screen, because that is the main reason people expand it.
• Write meaningful ALT for every image, for the benefit of both accessibility and image SEO.

Lightbox, speed, and accessibility

A common worry is whether a feature like this will slow the site down. The answer is no, because BlogKub builds the Lightbox with a small script that catches the click and shows the expanded view. It does not load a heavy external library, and it does nothing until the reader clicks an image, so readers who do not click are not affected by speed at all.

On accessibility, offering several ways to close, clicking the background, the close button, and the Esc key, helps users with different preferences leave the expanded view easily. And because the image shown is the same one with the same ALT, the information for screen reader users remains complete.

In experience terms, in short, a Lightbox turns images from something glanced at into something readers can interact with. Being able to click and expand for a closer look makes readers stop and spend more time with the content, which is good for both reader understanding and the page's engagement signals.

Common problems and how to fix them

Clicking an image does not expand it

Check that you added the image zoom block to the theme and Exported again. Images outside the article content (such as a logo or a UI icon) may not be set to expand, which is correct behavior.

The expanded image is blurry

This is because the source image is low resolution, so expanding it full screen is not sharp. We recommend uploading a sufficiently high resolution image, especially infographics and screenshots with text.

You cannot close the Lightbox

Normally you close by clicking the background, the close button, or Esc. If it sticks, check that there is no duplicate Lightbox script from elsewhere that might conflict.

Best practices

• Enable the Lightbox for blogs with high-detail images, such as photos, infographics, or screenshots.
• Upload sufficiently high resolution images so they stay sharp when expanded, especially images with text.
• Write meaningful ALT for every image per image SEO principles, so both search and accessibility benefit, and if you want readers to navigate long articles easily, try pairing it with a Back to Top button.
• Test clicking and closing on both desktop and mobile, since tapping to expand is used even more on mobile.
• If you have several related images, try grouping them in an image slider/gallery and let readers expand them with the Lightbox for a complete viewing experience.

Wrapping up

A Lightbox is a flourish that raises image viewing in an article to something convenient and professional, especially for photos, infographics, and screenshots with details to see up close. With BlogKub you just add the image zoom block and Export it to use, and the content images become click-to-expand full screen automatically, easy to close in several ways, using a light script that does not affect speed, and working well on both desktop and mobile, so readers can fully enjoy the images in your articles without leaving the page.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add a reading progress bar in a Blogger theme

A thin bar at the top of the screen that fills as you scroll is a small detail that makes long articles feel manageable. This article teaches you how to add a reading progress bar to a Blogger theme with BlogKub, one whose color and height you can adjust, light and not affecting speed, along with the UX reasoning and the settings.

Updated 14 July 2026   About an 8 minute read   Level: Beginner

What a reading progress bar is

A reading progress bar is a thin bar fixed at the very top of the screen that gradually fills from left to right in proportion to how far the reader has scrolled down the article. When you scroll to the end of the article, the bar fills exactly. It acts like a gauge that says "how far you have read, and how much is left".

This idea comes from reading a paper book, where we can see the thickness of the remaining pages with our eyes. But on a screen we have no such signal. The progress bar fills this gap, giving readers a sense of control and a way to predict when they are about to finish.

Why a progress bar helps people read to the end

Behind this small feature is a powerful psychological principle. People tend to want to finish something they have started (the goal-gradient effect). When we see we have read halfway, we are more motivated to keep reading to the end than when we do not know how much is left. The progress bar turns the feeling of "is there still a long way to go?" into "just a little more and it is done".

For long articles, this feeling matters a lot, because an article with no signal of its length may make readers discouraged and quit midway. Conversely, when readers see they are near the end, they usually keep reading to the conclusion and the end sections, which is where you often place read-on links or various invitations.

How BlogKub's progress bar works

BlogKub's bar is a fixed element at the very top of the screen, with a small script that calculates what percentage of the page height the reader has scrolled down, then adjusts the bar's width to match. All of this uses very few resources, loads no external files, and does not affect site speed.

You can adjust both the bar's height (razor thin or slightly thicker) and its color, which can be the theme's primary, accent, or a gradient that feels premium. The bar also uses colors based on theme variables, so it changes automatically when you switch to dark mode or change the theme color.

How to add the progress bar in BlogKub, step by step

1. Add the Progress Bar block. Many templates already include it. If yours does not, open the left library, the "Article & UX" category, and drag the "Progress Bar" block in.
2. Choose the bar height and color. Click the block to set the height (3 pixels is recommended for a nice thin look) and color (primary, accent, or gradient) to match your site's design.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Test the scroll reading. Open a live article, scroll down and check the top bar fills according to how far you go. When you reach the end of the article, the bar should fill exactly.

How to choose a height and color that look good

A good progress bar should be "noticeable but not intrusive". Follow these principles when setting it up.

• Keep the height thin. Around 2 to 4 pixels is just right, thin enough not to steal attention from the content, but thick enough to see.
• Use a color that contrasts with the header, so the bar stands out from the background. The theme's primary or accent color usually works well.
• A gradient adds a premium touch. If you want a modern look, a gradient between the primary and accent colors gives a flowing feel as the bar expands.
• Test both dark mode and light, because the bar is based on theme colors, so make sure it is clearly visible in both modes.

The progress bar and other features that pair with it

The progress bar works best used together with other reading aids in long articles, such as a table of contents to jump to a heading, a back to top button for a quick return, and a read time badge that says in advance how many minutes it takes. Together these create a complete and professional reading experience.

In particular, pairing "read time" at the start of the article with the "progress bar" during reading gives readers two layers of information: knowing from the outset how long it will take, and seeing progress throughout, which reduces hesitation and encourages reading to the end.

Another benefit of seeing these features as a "set" is the consistency of experience. When every article on your site has a progress bar, a table of contents, and a back to top button that all work the same, readers learn how to use them once and become familiar on every page. This familiarity reduces reading friction and makes the site feel systematic and trustworthy, which is what readers remember and return for.

The progress bar on mobile vs desktop

Reading behavior on mobile and desktop differs, and the progress bar plays a different role on these two devices. On mobile, the narrow screen makes the same article run longer vertically, so readers scroll more often and longer. The progress bar is therefore even more useful, because it helps the seemingly endless scrolling feel like it has a visible end.

On desktop, the wide screen shows more content at once, but the bar still helps give an overview of where you are in the article. The advantage of a top-line bar is that it works the same on both devices with no separate adjustment, and because it is thin and at the very top edge, it does not take up valuable reading space on a mobile screen, unlike a circular or numeric progress indicator that may clutter a small screen.

Why leading sites favor the progress bar

If you observe many leading article and online media sites, you will see the progress bar has become a standard element of long-form pages. The reason is not just aesthetics, but that it solves a real problem of on-screen reading, namely the lack of a length signal that a paper book has naturally.

Those sites value metrics like time on page and completion rate, because they relate to revenue and reader engagement. The progress bar is one of the small tools that helps push these numbers up without bothering readers. Because BlogKub builds this same-level feature into the theme, your Blogger blog looks and works on the same level as a professional site, without you having to write any code yourself.

Common problems and how to fix them

The bar does not move

This means the page content is too short to scroll, or you have not added the Progress Bar block to the theme. Check that you added the block and test on an article long enough to scroll.

The bar is hard to see

Increase the height slightly or change to a color that contrasts more with the header, so it is clearly visible in both modes.

The bar overlaps a sticky header

The bar sits at the very top above everything, which is the standard position. If it feels like it overlaps a sticky header, reduce the bar height so it looks like a thin, blending line.

Best practices

• Use the progress bar on long articles that require scrolling, where it is most meaningful.
• Set the height thin (2 to 4 pixels) so it does not steal attention from the content.
• Choose a color clearly visible in both dark and light mode.
• Pair it with a table of contents, a back to top button, and read time for a complete reading experience.

Wrapping up

The reading progress bar is a small detail that has more of a feeling effect than you might think. It tells readers where they are and how much is left, which reduces discouragement and encourages reading to the end. With BlogKub you just add the Progress Bar block, choose the height and color you like, and Export it to use, getting a bar that is light, does not affect speed, and adjusts to the theme automatically. Paired with other reading aids, your long articles instantly look professional and become more enjoyable to read.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build related posts in a Blogger theme, pulled automatically by label

Offering "further reading" at the moment someone just finished reading is the easiest way to raise visits per session. This article teaches you how to add a related posts section to a Blogger theme with BlogKub that pulls posts in the same category automatically, along with the SEO reasoning and fixes.

Updated 14 July 2026   About a 9 minute read   Level: Beginner to Intermediate

What related posts is, and why every blog should have one

Related posts is a section that shows links to other articles on a similar topic, usually at the end of the content. The goal is to catch the moment a reader has just finished, the golden second when they are still interested in the subject, and offer further reading immediately, instead of letting them close the tab.

Think about your own experience. When you finish an article and see "other posts you might like" with a compelling heading, you often click through without realizing it. That is the power of related posts. It turns a single visit into reading several articles, raising both the reader's bond with the site and the chance they remember it and come back.

How BlogKub's related posts works

The highlight is that it pulls data automatically from Blogger's JSON feed by the current post's first label. When a reader opens an article in the "Travel" category, the system calls that category's feed, pulls other posts in the same category, filters out the one being read, and shows them as cards with an image and heading. All of this happens with no database setup, no plugin to install, and no manually picking articles one by one.

Because it is a live pull, every time you publish a new post in a category, the related posts section of the older posts in that category can update automatically. This keeps your content interlinked in a living way, with no need to go back and edit old links.

How related posts helps SEO

• More pages per session: readers click to read on, viewing several pages in one visit, a signal that the site has content people care about.
• Lower immediate bounce: having on-target further reading reduces the chance someone closes the tab after a single article.
• Builds internal links with context: links between posts in the same category help Google understand that this group of content is related, and spread internal link equity.
• Reinforces topical authority: when articles on the same topic interlink densely, the site looks like an in-depth source on that subject, which is good for the rankings of the whole category.

How to add related posts in BlogKub, step by step

1. Add the Related Posts block. Many templates install it already. If yours does not, open the left library, category "Article & UX", and drag the "Related Posts" block in. The system places it at the end of the article automatically.
2. Set the heading, count, and columns. Click the block to set the section heading (such as "Related posts" or "Keep reading"), the number of articles shown, the number of columns, and whether to show images in the cards.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Add a category label to every post. In the post editor's label field, add the post's category, because the system pulls related posts from the first label. A well-planned label makes the recommendations accurate.

The related posts section is wrapped in a data:view.isSingleItem condition, so it shows only on article pages, and if there are no other posts in the category, the system hides the section automatically so it does not leave an empty space.

Plan your labels so related posts are accurate

Because the system uses the first label to find posts in the same category, the quality of your related posts depends on your labeling system. Follow these principles:

• Plan your main categories in advance, roughly 5 to 8 for a typical blog, then sort every post into these categories, so you get clearly connected groups of articles.
• Make the first label the main category, broad enough to hold several articles, not a specific term with a single article, because a category with one article has no recommendations to offer.
• Write enough articles in each category, at least 4 to 5 per category, so the system has options to show.

Related posts vs random/latest, which to use

BlogKub has both a "Related Posts" block (by category) and a "Random/Latest by label" block, which serve different purposes.

• Related posts emphasizes being "on topic", ideal at the end of an article to offer further reading on the same subject, good for topical authority.
• Random/latest emphasizes "variety or freshness", ideal for pulling people to explore the site's other content, or showing the newest articles.

You can use both on one page, such as related posts at the end of the content and random/latest in the sidebar or at the very bottom, so readers have both an on-topic and an exploratory path to read on.

Common problems and how to fix them

The related posts section does not show

The common cause is that the post has no label, or the category has only one article (the one being read). Add a category label and write more articles in that category, and the section will appear.

The recommendations are not on topic

This comes from a first label that is too broad or mixed. Reorganize your labels so the first label is a category that clearly conveys the topic, and the recommendations will be more accurate.

Card images do not show

Because the source article has no first image or featured image. Add at least one image to the article so the system can pull it as the card image.

Best practices

• Place related posts at the end of the content before the comments, to catch the moment the reader has just finished.
• Setting 4 articles in 2 columns is a good default that looks good on both desktop and mobile.
• Add a featured image to every article so the related posts cards are clickable.
• Pair it with breadcrumbs and in-content internal links to build a web of links that helps both readers and rankings.

Make related posts cards more clickable

The system pulls articles for you automatically, but what decides whether people click is the "heading" and "featured image" of the destination article. So making related posts genuinely clickable starts when you write each article, not on the block itself.

• Write article headings that invite the click. A heading that states a clear benefit or sparks curiosity draws clicks well when it appears in another article's related posts card.
• Add a meaningful, sharp featured image, because the card uses the article's first or featured image. A good image makes the card catch the eye and feel credible.
• Write articles in the same category as a connected series, such as several angles on "visiting Chiang Mai", so when someone finishes one, the cards offer other pieces in the series they are likely to want next.

When every article in a category is written with care in both heading and image, the related posts section becomes a powerful engine for further reading, because every card that appears is clickable.

Related posts and the mobile experience

Most people read blogs on mobile, so the layout of related posts has to account for a narrow screen. The recommended value is 2 columns, which on mobile stack or shrink to thumb-sized cards that are easy to read and tap. Setting 4 articles is just right, not so many that you scroll a long way after finishing, and not so few that there is no choice.

Be careful not to set too many columns on mobile, because the cards get so small the heading is unreadable and the image unclear. Let the system handle the responsive behavior from the values you set, for a balanced result on both desktop and mobile.

Wrapping up

Related posts is a feature that turns a single visit into reading several articles, helping raise time on site, reduce bounce, and build internal links good for SEO. With BlogKub, you just add the block, set the heading and count, and label your posts by category with discipline, and the system pulls posts in the same category from the JSON feed for you automatically, with no plugin or complex setup.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add a sticky side share bar in Blogger articles

When readers like your article, what you want them to do next is share it with friends. A sticky side share bar keeps the share buttons in view throughout the reading, clickable the moment they feel like spreading the word. This article teaches you how to add one to a Blogger theme with BlogKub, with a copy link button, a choice of side, and showing only on article pages.

Updated 14 July 2026   About a 9 minute read   Level: Beginner

What a sticky side share bar is

A sticky side share bar is a vertical bar of social share buttons fixed mid-edge on the left or right of the screen, floating along with the reader's eye throughout scrolling. Unlike share buttons placed at the end of an article, which readers only see once they finish, the floating bar keeps the share buttons within reach at all times. Whenever a reader feels impressed, they can click share immediately without scrolling to find it.

This format is a standard on many news sites and professional blogs, because it captures the "urge to share" best. The intent to share is a fleeting moment. If the button is out of reach, the impulse fades. The floating side bar therefore helps turn a good feeling into an actual action.

Why it shows only on article pages

BlogKub's share bar is designed to show only on single post pages, not appearing on the homepage or index pages. The reason is straightforward: people share an "article", not an "index page". Showing share buttons on the homepage is useless and just clutters the eye. The system uses Blogger's condition to check that the current page is an article first, then shows the bar.

Scoping it this way is an example of context-aware design. Each element should appear where it is meaningful. When the share bar is only on pages where readers are actually consuming content, it does its job fully without becoming a distraction on other pages.

How to add the sticky side share bar in BlogKub, step by step

1. Add the share bar block. Open the left block library, the "Article & UX" category, and drag the "Sticky side share bar" block into the page.
2. Choose the side and share channels. Set the bar to the left or right side, and toggle the Facebook, X (Twitter), LINE, and copy link channels as you like.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Test the sharing. Open a live article page, click each share channel and the copy link button, confirming the shared link matches the page and is a clean URL.

Which side to choose: left or right

Choosing the share bar's side depends on your layout and reader behavior. Generally, the ideas are as follows.

• Left: the classic position many news sites and blogs use, because the eye of readers of left-to-right languages usually starts on the left. It suits layouts where content is centered with free space on the left.
• Right: ideal when your layout already has a table of contents or other element on the left. Placing the share bar on the right keeps the two from colliding, and most people's mouse hand reaches right easily.

The recommendation is to see which side of the site has more free space and does not overlap other floating elements, such as a back to top button, and choose that side. Test it on a wide screen to make sure the bar does not cover content or other buttons.

The copy link button: an overlooked share channel

Many people think only of the big social buttons, but in reality, a lot of sharing happens by "copying the link and pasting it" into a private chat, a LINE group, or an app with no dedicated share button. The copy link button is therefore a powerful but often overlooked share channel. BlogKub's share bar includes it, and when clicked, it shows a brief confirmation that it was copied.

The refined part is that the copied link and the link shared to every channel are made clean. The system pulls the page's canonical link and strips the m=1 parameter that Blogger appends for the mobile version, so the link readers share out is always the main URL that matches the real page, not a version with a trailing parameter that looks ugly and may cause confusion.

The share bar on mobile: why it hides

On mobile, screen space is very limited, and a vertical floating bar on the side would cover content and take up reading space unnecessarily. BlogKub therefore hides the floating bar on small screens automatically to keep the mobile reading experience clean. This is a reader-first design decision, rather than cramming share buttons everywhere.

If you want mobile readers to be able to share too, the good solution is the inline Social Share block that places share buttons in the article content (such as at the end), which suits every screen size. Used together with the floating side bar on desktop, it covers both reader groups neatly, with each working where it fits best.

The share bar and site growth

Social sharing is one of a blog's most powerful growth channels, because it is word of mouth from person to person, which carries more credibility than ads. When readers share your article with friends, those who see it usually click out of trust, and some become new readers who share again, creating a natural growth cycle.

Although share counts are not a direct ranking factor, the increased traffic and visibility from sharing often lead to other positive signals such as mentions and backlinks from other sites. Used together with quality content and reading aids such as related articles that invite reading on, your site has a chance to grow sustainably.

Examples of use in different kinds of blogs

• News and trending blogs: timely content is often shared the moment it is read, and the floating side bar captures this well.
• How-to and tips blogs: readers often want to send good tips to a friend facing the same problem, and the share and copy link buttons make forwarding easy.
• Review blogs: people often share reviews with someone deciding to buy, and the copy link button suits sending in a private chat.
• Travel and lifestyle blogs: content with beautiful images and interesting stories tends to be shared a lot, and the floating bar lets people share at any moment.

Common problems and how to fix them

The share bar does not appear

Check that you added the share bar block and Exported again, and view it on a real "single post page", because the bar shows only on article pages, not the homepage. If viewing on mobile, the bar is hidden by design, so test on a wide screen.

The shared link has m=1 at the end

Normally the system strips this parameter. If you still see it, check that your page has a correct canonical tag, which BlogKub's theme already includes. A correct canonical helps keep the shared link clean.

The bar overlaps another floating button

If you use several floating buttons, such as a back to top button or a theme color picker, choose a side for the share bar different from those buttons so they do not overlap.

You want share buttons on mobile too

Use the inline Social Share block placed in the article alongside the floating bar, to cover mobile readers for whom the floating bar is hidden.

Best practices

• Choose the side with free space that does not overlap the table of contents or other floating buttons.
• Always enable the copy link button, because it is a share channel people really use in private chat.
• Choose only the channels your readers actually use, no need to enable every button and clutter it.
• Complement it with the inline Social Share block to serve mobile readers.
• Test that the shared link is a clean URL and opens the correct page.

Wrapping up

The sticky side share bar is a tool that precisely captures a reader's "urge to share". With BlogKub you just add the block, choose the left/right side and the Facebook, X, LINE channels plus a copy link button, and Export it to use. The bar floats on the side only on article pages, uses the clean canonical link, and hides on mobile so as not to cover content. Complemented with an inline share button for mobile, your site is ready for readers to spread the word at every moment and on every device, which is a key foundation of word-of-mouth growth.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add Web Stories (tap-to-view fullscreen circles) in Blogger

The "stories" format of tap-to-view fullscreen circles we know from Instagram and Facebook is a presentation users love and understand instantly. BlogKub brings this format to Blogger by pulling your own posts to show as stories automatically. This article teaches you how to set it up from start to finish, along with the engagement reasoning and how to fix problems.

Updated 14 July 2026   About a 10 minute read   Level: Beginner

What Web Stories as circles are

Web Stories in this context are a bar of circular post cover images placed at the top of the page. When tapped, a fullscreen view opens showing the image and title one slide at a time, with auto-advance, like viewing stories on social media. This format is powerful because today's users are deeply familiar with it and need to learn nothing new. They instinctively know to tap to view, tap left to go back, and tap right to skip.

What makes this feature special on BlogKub is that it pulls your own posts to show automatically. You do not create or upload stories separately like standard Web Stories that require separate AMP pages. Instead, the system takes the cover image and title of the posts you have already published and wraps them into stories, giving a story experience with almost no extra work.

How the stories pull data from the Blogger feed

The heart of this feature is using the Blogger post feed (the JSON feed system Blogger provides built-in). When the page loads, the system calls the latest posts feed for the number you set, pulls the cover image and title of each post to build the story circles, and when a reader taps to view, the system shows a larger version of the image in the fullscreen view, with a link to the real article.

Because it works with the feed directly, your stories update themselves automatically. Every time you publish a new post, it appears in the stories without you editing the theme or adding anything. This is a key advantage over building fixed stories that must be updated by hand each time.

How to add Web Stories in BlogKub step by step

1. Add the stories block. Open the left block library and drag the "Stories (Web Stories)" block into the page, usually near the top of the homepage so it is seen before other content.
2. Set the count, label, and time per slide. Set the number of stories to show, add a label if you want to pull only certain categories, and set the time each slide shows before auto-advancing (default around 5 seconds).
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Test opening the stories. Open the live site, tap a story circle to view fullscreen, check the auto-advance, the top progress bar, the previous/next buttons, closing, and the read article button.

Elements of the fullscreen story view

When a reader taps a story circle, the fullscreen view opens with elements designed to be familiar and easy to use.

• Top progress bar: shows which slide out of the total you are viewing and the remaining time of the current slide, exactly like stories on social media.
• Fullscreen image: a larger version of the post cover image, filling the screen, giving an immersive feel.
• Title and date: the post title and publish date at the bottom, helping readers know what they are viewing.
• Read article button: a button that goes to the full article, turning "viewing a story" into "actually reading".
• Navigation: tap the left side to go back, the right side to skip, a close button in the top right, and keyboard arrow key support for desktop users.

The "viewed/unviewed" ring: a familiar detail

The small detail that makes this feature feel like real stories is the colored ring around the circle. An unviewed story has a bright gradient ring, while a viewed story's ring turns gray, like we see on social apps. The system remembers this state in the reader's browser, so they instantly know which stories they have not yet viewed.

This detail may seem minor, but it is what creates "familiarity", which is the key to a good experience. When everything works as users expect from social stories, they use it smoothly without thinking, and that makes them willing to explore more of your posts.

Web Stories, engagement, and content discovery

The classic blog problem is that readers often come to read one article and leave, without knowing you have much more good content. Web Stories solve this in a fun way, because they invite readers to "swipe" through several posts quickly in an enjoyable format. When they find a topic of interest, they tap the read article button to read it in full.

The result is that readers explore more of your content, stay on the site longer, and have a chance of finding an article that resonates until they become regular readers. Used together with other discovery elements such as related articles that recommend nearby topics and bookmarks to save for later, your site systematically turns passing visitors into engaged readers.

Performance considerations

Because the stories pull data from the feed when the page loads, you should set a reasonable number of stories, not more than necessary. Showing around 6 to 10 stories is usually just right for both interest and speed. The images used in the circles are small thumbnails, so they load fast, while the large images in the fullscreen view load only when a reader taps to view.

This approach keeps the feature beautiful without affecting homepage speed much. That said, choosing post cover images with suitable file sizes also helps both the stories and the overall page load fast, which is good for both readers and Core Web Vitals scores.

Examples of using Web Stories in different kinds of blogs

• Travel blogs: stories full of beautiful destination images invite swiping and tapping into full reviews, ideal for image-led content.
• Food and cafe blogs: images of menus and the atmosphere in story format stir appetite very well.
• Fashion and lifestyle blogs: the story format fits image-led content naturally and matches this audience's behavior.
• News/update blogs: use stories to highlight the latest posts or important categories, letting readers see the activity before scrolling to read.

Common problems and how to fix them

The story circles do not show

The system hides the story bar if it cannot pull posts. Check that your blog has published posts, and if you set a label, make sure there are actually posts in that category. If you set a label with no posts, there are no stories to show.

The image in a story does not appear or is blurry

The stories use post cover images. If a post has no cover image, its story may have no image. We recommend adding a quality cover image to every post so the stories look good.

The stories show posts not in the category you want

Check that you set the label to match the label actually used on the posts. The label must be spelled the same to pull the right category.

You want the stories to show only on the homepage

Place the stories block in the position you want, and consider your page structure so the stories appear in a suitable spot, such as the top of the homepage where readers see it first.

Best practices

• Add beautiful, meaningful cover images to every post, because the stories use these directly.
• Set a reasonable number of stories (around 6 to 10) to balance interest and speed.
• Place the story bar near the top of the homepage so it is seen before other content.
• Use a label if you want to highlight only a category you want to promote.
• Complement it with related articles so readers who tap from a story can read on.

Wrapping up

Web Stories bring the presentation format users love from social media to your Blogger blog. With BlogKub you just add the stories block, set the count, label, and time per slide, and Export it to use, and the system pulls your latest posts to show as story circles tapped to view fullscreen with auto-advance, with a progress bar, a viewed/unviewed ring, and a read article button, all updating themselves from the Blogger feed with no separate story creation. This feature boosts engagement, gets readers exploring more of your content, and turns visitors into engaged readers in a fun and natural way.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add a Theme Color Picker letting readers change your site color in Blogger

What if readers could choose your site's color to their liking? A theme color picker gives readers that small power, creating a sense of ownership and fun in interacting. This article teaches you how to add one to a Blogger theme with BlogKub, with preset colors, remembering the choice, and the reasoning for why this feature is appealing.

Updated 14 July 2026   About an 8 minute read   Level: Beginner

What the theme color picker is

A Theme Color Picker is a floating button that lets readers open a panel to choose the site's "accent color" themselves. The accent color is the main color that appears on important elements such as buttons, links, icons, and spots that draw the eye. When a reader picks a tone they like, these elements across the whole site change color immediately in real time.

This is a "personalization" feature that lets readers customize their own experience. Even though it is a small change, it creates a sense of engagement and fun. Some readers like a calming blue, some like a bright pink. Letting them choose makes your site feel "friendly" and attentive to each person's preference.

How it works: changes immediately and remembers

When you add this block, the system places a round floating button in the bottom right of the screen. When a reader clicks, a small panel opens with color previews as circles to choose from. When the reader taps a color, the system updates the site's main color variable immediately, so every element using the accent color changes in an instant, with no page reload.

The key point is that the system remembers the reader's chosen color in their browser, so when they return on the same device, the color they picked is still there, with no need to choose again every time. And because it is stored on the reader's side, one person's color change does not affect other readers or the site's default. Each person has their own color version.

How to add the theme color picker in BlogKub step by step

1. Add the theme color block. Open the left block library and drag the "Theme color" block into the page, to place the floating button and color panel.
2. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
3. Test the color change. Open the live site, click the floating theme color button, and choose various tones, checking that the site's accent color (buttons, links) changes immediately.
4. Check it remembers after refresh. Refresh the page to confirm the chosen color stays, because the system stores the value in the reader's browser.

Preset colors: why not free color choice

BlogKub's theme color picker offers curated preset colors rather than free choice of every shade. This is a deliberate design decision, because each curated tone is paired to go together and read easily on the site's background, in both light and dark mode. If free color choice were allowed, readers might pick a color too faint to read, or one that clashes with the background and looks bad.

The available tones cover popular main colors such as indigo, rose, emerald green, amber, blue, purple, and gray, plus a "return to the original" option for the theme. This set is wide enough for readers to find a color they like, but not so many as to confuse, a balance between freedom to choose and the guarantee that the result always looks good.

Theme color picker vs dark mode: different dimensions, usable together

Many readers confuse the theme color picker with dark mode. Both are reader-side customization, but they do different things.

• Dark mode: switches the "brightness" of the background between light and dark, for comfortable reading in different lighting.
• Theme color picker: changes the site's "accent tone", for color preference and identity.

The two work in different dimensions and complement each other perfectly. A reader might choose dark mode with an emerald green accent, or light mode with pink, as they like. Enabling both features makes your site fully customizable in both brightness and color tone, letting readers design their own experience fully.

Benefits for engagement and a sense of ownership

A personalization feature like this has an interesting psychological effect. When a reader takes action to customize something on your site, even just changing a color, they feel more engaged and attached to it, because it becomes "their version" of the site. This small sense of ownership increases the chance they remember the site and return.

Besides, having a color picker also signals that your site is modern and attentive to detail, which affects the first impression and credibility. Used together with other experience-raising features such as dark mode and a reading progress bar, your site feels like a polished product, not just an ordinary blog.

A consideration: do not let floating buttons clutter

The theme color picker is a floating button in the bottom right, the same area other floating buttons often sit, such as a back to top button or a dark mode button in some layouts. If you enable several floating buttons at once, check that they do not overlap or crowd until it looks cluttered.

The recommendation is to enable only the floating features genuinely necessary for your site's experience. The theme color picker suits sites that want to emphasize fun and personalization, while sites focused on simplicity might choose not to enable it. Having the right features beats cramming everything in until the screen is full of buttons.

Examples of use in different kinds of blogs

• Personal and lifestyle blogs: fits a fun character, letting readers choose a color reflecting their mood.
• Tech and tool blogs: these readers love to customize, and a color feature matches their expectation of flexibility.
• Fashion and creative blogs: playing with color is part of the site's identity, and a color picker adds appeal.
• Portfolio sites: shows you care about detail and UX, which is a selling point for creative professionals.

Common problems and how to fix them

The floating button does not appear

Check that you added the theme color block and Exported again. The button floats in the bottom right. If another floating button is in the same spot, you may need to check they do not overlap.

Choosing a color does not change some parts

The color picker changes the "accent color" used on buttons, links, and main elements. Elements with their own fixed color may not change, which is normal when using the accent as a central variable.

The chosen color is lost after clearing browser data

This is normal behavior, because the chosen color is stored in the browser. If the reader clears the site data, the value returns to the theme's default.

You want to lock the default color to the brand color

You can already set the theme's default color in BlogKub. The color picker is just an extra option for readers. The default that new visitors always see first is the brand color you set.

Best practices

• Set the theme's default color to your brand color, with the color picker as an extra option for readers.
• Enable the color picker when your site emphasizes fun and personalization, not every site needs it.
• Be careful not to let several floating buttons overlap into clutter, enable only what is necessary.
• Use it together with dark mode so readers can adjust both brightness and color tone.
• Test that every selectable tone still reads easily in both light and dark mode.

Wrapping up

The theme color picker gives readers a small customization power, changing the site's accent color to their liking in a few clicks. With BlogKub you just add the theme color block and Export it to use, and readers get a floating button that opens a panel of several preset tones, and choosing one changes the site color immediately and remembers the value in their own browser without affecting others. This feature creates a sense of engagement and ownership, makes the site feel modern and detail-attentive, and used together with dark mode, lets readers design their own experience fully in both brightness and color tone.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to build an automatic table of contents in a Blogger theme, a detailed step-by-step guide

A clickable table of contents is one of the elements that instantly makes a long article feel professional. This article teaches you how to add a table of contents generated automatically from your H2/H3 headings in a Blogger theme with BlogKub, from the start to uploading it live, along with the SEO reasoning and fixes for common problems.

Updated 14 July 2026   About a 9 minute read   Level: Beginner

What a table of contents is, and why long articles need one

A table of contents (TOC) is a box of headings placed at the top of an article, where each item is a link that jumps straight to that heading when clicked. For an article longer than one screen, a table of contents changes the reading experience from "scroll around looking" to "see the overview and pick what you want to read", instantly.

In reader psychology, a table of contents acts like a map. When people see that an article covers the topic they are looking for, they are confident they are in the right place and stay to read, instead of closing within a few seconds. This is why world-class quality sites, such as online encyclopedias and technical manuals, almost all use a table of contents on long content.

The problem is that Blogger has no built-in table of contents, and the old way to make one means inserting a long block of JavaScript into every post, which is fiddly and breaks easily. BlogKub solves this by embedding the table of contents system into the theme at the template level once, so every article gets an automatic table of contents without you ever touching code in the post.

How a table of contents helps SEO

A table of contents helps more than just the reader. It sends several positive signals to search engines:

• More time on page (dwell time): when people find the heading they want quickly, they stay longer and tend to read several sections, reducing bounce, which is an indirect quality signal.
• A chance at jump-to links in the results: Google often pulls anchor links from the table of contents to show as sub-links under a result, letting users jump straight to the section they want, adding space and click-through.
• Forces a clear heading structure: because the table of contents is built from H2/H3, to get a clean one you have to order your headings logically, which is exactly what Google uses to understand the outline, and helps AI summarize the content accurately.
• Supports AEO/GEO: a clear heading structure makes it easier for answer engines and AI Overviews to lift a heading into an answer for a user.

How to add a table of contents in BlogKub, step by step

1. Open BlogKub and pick a template. Many templates install the TOC block from the start. Check the page structure for a "Table of Contents (TOC)" block already present.
2. Add the TOC block (if you do not have one). Open the left library, category "Article & UX", and drag the "Table of Contents (TOC)" block in. The system places it in the correct spot (the top of the article) automatically.
3. Configure the table of contents. Click the block to open its properties panel, then set: the TOC heading (such as "Contents" or "In this article"), the depth (H2 only, or H2 + H3), and whether to number each item.
4. Export the XML and upload to Blogger. Click Export, then take the XML to blogger.com → Theme → three-dot menu → Backup/Restore → select the file.
5. Write your article with H2/H3 headings. In the post editor, set your main headings as "Heading (Heading 2)" and sub-headings as "Subheading (Heading 3)". That is all it takes for the table of contents to be built and ordered for you every time you publish.

BlogKub's table of contents system is placed directly in the post's includable, so it always appears above the content no matter how you order your blocks, and it works only on article pages (keeping the homepage clean).

Settings options and what they mean

How to write an article so the table of contents looks good

A good table of contents starts from a good outline. Follow these principles when writing a post:

• Use H2 for main headings and H3 for sub-headings only. Do not use bold text in place of a heading, because the table of contents and Google will not recognize it as a heading.
• Name headings meaningfully and with keywords. A good heading is one that, read in sequence in the table of contents, conveys the outline of the whole article.
• Do not make headings too short or vague. "Point 1" is useless. It should be "Step 1: pick a template", for instance.
• Keep the hierarchy correct. Do not jump from H2 to H4, skipping H3, because it distorts the table of contents and the document structure.

Common problems and how to fix them

The table of contents is empty or does not appear

The most common cause is that the article has no H2/H3 headings, because the table of contents is built from them. Open the post editor and change your heading text from "Normal" to "Heading (Heading 2)" or "Subheading (Heading 3)", then save and view the live page again.

The table of contents shows headings you do not want

Sometimes a template or another widget creates unrelated H2/H3. Check that you are not using the same heading level as a UI element, and set the table of contents depth to H2 only to keep it concise.

Clicking does not jump, or jumps past the heading

This usually happens when a sticky header covers the heading. BlogKub's system already reserves scroll spacing, but if you have raised the header height a lot, test and reduce the sticky height slightly.

Best practices

• Use a table of contents on articles longer than roughly 800 to 1,000 words, or with 3 or more headings. Very short articles do not need one.
• Place the table of contents at the top of the article (BlogKub does this automatically) so readers see it immediately before deciding to read on.
• Pair the table of contents with the anchor link feature so readers can copy a link straight to a heading and share it.
• Write headings as questions or sentences people actually search, which helps both the table of contents and your odds of appearing in AI Overviews.

The table of contents with AEO/GEO: getting AI to lift your headings into answers

In an age where more people ask Google AI Overviews, ChatGPT Search, and Perplexity, a clear heading structure becomes a real asset, because these AI systems "read" an article by relying on the heading hierarchy to understand what each section answers. When your article has well-named H2/H3 and a table of contents that reflects the outline, the odds that AI lifts one of your headings into an answer for a user, and cites your site, go up.

The trick is to write headings in the form people actually ask. For example, instead of "Installation", write "How to install, step by step", or instead of "Benefits", write "How does a table of contents help SEO". Question-form or how-to headings are a magnet for both a readable table of contents and being lifted into AI Overviews. Pair it with an AEO summary box at the top of the article, and your content is even more ready for modern search.

Comparison: automatic table of contents vs typing it yourself vs a plugin

Before, Blogger owners had only a few options for making a table of contents, and each had clear downsides. Understanding the difference shows why the automatic approach is the most worthwhile.

• Typing the table of contents yourself: full control over the format, but you type the links and anchors yourself on every article, and every time you edit a heading you have to come back and edit the table of contents too. It is time-consuming and error-prone, and the more articles you have, the bigger the burden.
• Pasting JavaScript per post: it does give an automatic table of contents, but you have to paste the script into every post, and if you forget or place it wrong, it breaks, and code scattered through the content is hard to manage over the long term.
• BlogKub's theme-level table of contents: set it once in the theme, and it works on every article forever, with no touching posts, no clutter code in the content, updating from your headings automatically, and always placed correctly. This is the easiest and most consistent approach.

Put simply, the automatic theme-level approach moves the burden from "every article" to "once when setting up the theme", which suits anyone serious about blogging long term with a large archive of articles.

Wrapping up

An automatic table of contents is a high-return improvement for the effort, because you install it once in the theme and it works on every article forever. It lifts the reader experience, reduces bounce, and opens the door to special space in the results. All you have to do is add the TOC block in BlogKub, set it to suit your content length, and write your articles with disciplined H2/H3 headings. With that, your Blogger site looks more professional at once.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →

How to add a Translate button in a Blogger theme: multi-language, no API key

Opening your site to readers of other languages is a way to expand your audience that is easier than you might think. This article teaches you how to add a translate button to a Blogger theme with BlogKub, which uses Google Translate to translate the whole page for readers, with no API key and no cost.

Updated 14 July 2026   About a 9 minute read   Level: Beginner

Why a Blogger blog should have a translate button

A translate button lets foreign readers translate the whole page's content into their own language in one click. Even if your site is written in Thai, the people who find your content may be foreigners interested in Thai topics, such as travelers, language learners, or people looking for specific information. Having a translate button lowers the language barrier and keeps them reading instead of leaving because they cannot read it.

For travel, food, culture, or product blogs with cross-border interest, this feature is even more valuable, because it turns visitors who might slip away into real readers, without you having to translate the content yourself or build a complicated multi-language site.

How BlogKub's translate button works (no API key)

The key highlight is that it uses Google Translate embedded directly in the page, so no API key, no signup, and no cost. When a reader clicks the button and chooses a language, Google Translate translates the whole page instantly on the reader's browser side, not translating and storing it as a new page on your site.

BlogKub also handles details that improve the experience, such as hiding the Google Translate toolbar that normally pushes the page around, keeping the layout stable, designing a clean language menu, and including an "Original" option to return to the source language anytime.

How to add the translate button in BlogKub step by step

1. Add the translate block. Open the left library, the "Add-ons" category, and drag the "Translate" block in. The system places the button in the header automatically.
2. Choose the source language and the languages to show. Click the block to set the site's source language (such as Thai) and toggle on the languages you want readers to translate to, such as English, Chinese, Japanese, Korean. Choose only what is necessary to keep the menu concise.
3. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
4. Test the translation on the live site. Open the site, click the translate button in the header, choose a language, and confirm the whole page is translated. Try it on mobile too to see the language menu show full width without running off the screen.

The translate button is inserted into the header bar automatically, and the language menu on mobile screens anchors to the screen edge as a full-width panel, so the menu does not overflow the screen.

How to choose which languages to enable for your readers

You do not need to enable every language. Choosing suitably keeps the menu short and easy to use. Consider:

• Your main reader group. If the content is about Thai travel, English, Chinese, and Japanese are often the largest groups.
• Real statistics from Analytics. After the site has been up a while, see which countries visitors come from, then enable languages matching the groups.
• Do not enable too many. A menu of 4 to 6 languages is just right. More than that is hard to choose from and cluttered unnecessarily.

The translate button, SEO, and serious multi-language sites

You must understand that the translate button is a "reader aid tool", not a "multi-language SEO strategy". Translation happens on the reader's side only when they click. The Thai source content is still what Google indexes and ranks. So this feature has no negative SEO effect, and helps purely with user experience.

If you want serious multi-language SEO, meaning each language has its own pages and URLs to rank in that language, that is another strategy requiring actual content translation and an hreflang structure, suited to sites specifically targeting foreign markets. For a general blog, the translate button meets the accessibility need well without much effort.

Common problems and how to fix them

The language menu runs off the screen on mobile

BlogKub already fixes this by anchoring the menu to the screen edge as a full-width panel on mobile. If you use an old version, update the theme to the latest version to get this fix.

The page shifts during translation

This is caused by the Google Translate toolbar, which BlogKub hides so the layout does not shift. If you still see it, check that there is no duplicate translation script from elsewhere.

Some parts are not translated

Text that is an image will not be translated, because Google Translate can only translate real text. You should put important content as text, not embedded in images.

Best practices

• Enable only the languages matching your real reader group, to keep the menu concise and easy to use.
• Write important content as text, not embedded in images, so it all translates.
• Test the translation on both desktop and mobile before publishing, especially the language menu on mobile.
• Place the translate button in the header where it is easy to see, like the dark mode button (BlogKub does this automatically), so foreign readers find it right away.

Languages Thai blogs commonly enable, and why

If you are unsure which languages to enable, here is the set most Thai blogs choose to enable, with the reasoning to guide your decision, which you can adjust later based on your real reader group.

• English: the world's common language, covering foreign readers most broadly, the first language you should always enable.
• Chinese (simplified): a large group of travelers and people interested in Thai products/culture, ideal for travel, food, and review blogs.
• Japanese and Korean: these two reader groups are quite interested in Thai content on travel, beauty, and lifestyle.

Starting with this set is enough for a general blog, then look at real visitor statistics to add or remove languages to match your group later. Starting with a reasonable number keeps the menu easy to use from the outset.

The translate button and site speed (Core Web Vitals)

A question many worry about is whether embedding Google Translate slows the site down. The answer is that the effect is very small and designed to be safe, because the Google Translate script loads without blocking page rendering and works only when a reader clicks to choose a language. Readers who do not translate are barely affected by speed, and the source content shows as normal immediately.

BlogKub also hides the Google Translate toolbar that normally pushes the layout around, which helps prevent the Cumulative Layout Shift (CLS) issue that affects Core Web Vitals scores, keeping the experience stable and the speed score intact, consistent with the theme's whole philosophy of being light and fast.

Limitations of automatic translation to know

Machine translation is convenient and covers many languages, but it has limitations to understand so you set the right expectation. Automatic translation has improved a lot in recent years, but is still not as perfect as human translation, especially with idioms, jokes, or specialized terms that need context.

• Idioms and jokes may come out wrong. Sentences that play on words or use specific Thai idioms may translate literally until the meaning is off. If the content is very important, write it directly so it translates accurately.
• Text in images is not translated. Google Translate translates only real text, not characters embedded in an image, so put important content as text.
• Proper names may be translated unnecessarily. Brand names or some proper nouns may get translated. If you want to keep the original word, consider formatting the text clearly.

Overall, automatic translation suits "helping understand the content", which is enough for most readers of other languages. As long as you write clear content and put important information as text, foreign readers get the full benefit of the translate button.

Wrapping up

The translate button is an easy, free way to expand your site's reach to readers of other languages. With BlogKub you just add the translate block, choose the languages you want, and Export it to use, with no API key or cost. Readers from around the world can translate the whole page into their own language in one click, lowering the language barrier and opening the chance for your Thai content to reach more people.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.

Read it on BlogKub →