Appearance and Customization

Hello! Welcome to EmadulAi.

Here you’ll find a complete guide to customizing your blog’s interface — from theme direction, colors, and fonts to layouts and other appearance settings. Discover how to fine-tune the look and feel of your site to perfectly match your personal style.

Direction

By default, the theme automatically sets the text direction — Right-to-Left (RTL) or Left-to-Right (LTR) — based on your blog’s language.

If you’d like to manually set the direction, regardless of the language selected in your Blog settings, follow these steps:

How to Set Blog Direction

Go to Theme Designer in your Blogger dashboard.
Click on the Advanced tab.
From the dropdown list, select Style: Appearance.
Locate the Direction option and set its value as follows:

1px → Automatic (language-based)
2px → Left-to-Right (LTR)
3px → Right-to-Left (RTL)

Adjust the value according to your preferred text direction.

Default Mode

By default, your blog uses Light Mode. If you want to change it to Dark Mode or System Mode, follow these steps:

How to Change Default Mode

Go to Theme Designer in your Blogger dashboard.
Click on the Advanced tab.
From the dropdown list, select Style: Appearance.
Locate the Default Mode option and set its value as follows:

1px → Light Mode (default)
2px → Dark Mode
3px → System Mode

Choose the value according to your preferred default appearance.

Theme Schemes

This feature allows users to select a color from a predefined list of schemes.

Once a scheme is chosen, your website’s appearance—including the background, text, buttons, and other UI elements—will automatically adapt to the selected color scheme, providing a consistent and personalized look throughout your site.

This feature enhances the user experience by allowing visitors to match the website’s aesthetic to their personal preferences or mood. Many theme schemes also include dark and light variants to improve readability and accessibility.

When enabled, this feature generates colors dynamically using JavaScript. If you do not need this functionality, it is recommended to disable it to avoid unnecessary computations and improve performance.

This feature is enabled by default. You can configure or disable it anytime through the Theme Designer.

Theme Schemes & Custom Colors

Accessing the Settings:

Go to Theme Designer in your Blogger dashboard.
Click on the Advanced tab.
From the dropdown list, select Style: Appearance.

How to Enable/Disable Theme Schemes:

Change the length of Theme Schemes to:
1px → Disable Theme Schemes
2px → Enable Theme Schemes

How to Change Predefined Colors:

There are 15 predefined color schemes, excluding the default scheme.
To change the color of the nth scheme, select your custom color in Theme n color (1 <= n <= 15).
To change the default scheme, select your custom color in Default Theme Color.
You can toggle on Transparent to disable a scheme except for the default scheme.

These options allow you to personalize your site’s appearance while keeping a consistent and professional look.

Status Bar Color

This feature allows you to customize the color of the browser’s status bar, mainly on mobile devices.

By setting a specific color, the status bar will blend seamlessly with your website’s theme, giving your site a more immersive and professional appearance.

This feature is particularly useful for Progressive Web Apps (PWAs) and full-screen web experiences, where maintaining branding consistency is important. The status bar color can also be set dynamically based on the active theme or user preferences.

You can select your preferred Status Bar color through the Theme Designer.

How to Customize Status Bar Color

Go to Theme Designer in your Blogger dashboard.
Click on the Advanced tab.
From the dropdown list, select Style: Status Bar.
Choose your custom color for:

Status Bar color (Light) → for Light Mode
Status Bar color (Dark) → for Dark Mode

This ensures your status bar matches the theme in both light and dark modes, providing a seamless and professional look.

Box Design

This feature gives components a boxed look with shadows and rounded corners, enhancing depth and visual separation across your layout.

By default, this feature is disabled, but you can enable it through the Theme Designer.

How to Enable/Disable Box Design:

Go to Theme Designer in your Blogger dashboard.
Click on the Advanced tab.
From the dropdown list, select Style: Appearance.
Locate the Box Design option and set its value as follows:

1px → Disable Box Design
2px → Enable Box Design

Enabling this feature improves the visual hierarchy of your site and gives a more polished appearance.

Custom Fonts

Fonts are loaded dynamically by the theme based on certain conditions to optimize your PageSpeed score.

You can choose to use either:

Web-safe fonts → built into most browsers, or
Custom fonts → imported from sources like Google Fonts or other CDNs.

Using custom fonts allows you to personalize your site’s typography while keeping performance in mind.

Using link tag

Go to Google Fonts, select a font, and copy the attribute href of provided <link> tag having attribute rel="stylesheet" as shown below.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">

Escape the copied url by replacing & to &, < to <, > to >, ' to ' and " to " if there exists any.
For example the above url contains &. Therefore, we need to escape by replacing it to & as shown.

https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap

https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;display=swap

Through Blogger HTML Editor, find the following code snippet and put the escaped url in one of the marked parts, whichever first is empty.

<Variable name="font.link1" description="Font Link 1" type="string" default="" value=""/>
[!] Font Link 1
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link2" description="Font Link 2" type="string" default="" value=""/>
[!] Font Link 2
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link3" description="Font Link 3" type="string" default="" value=""/>
[!] Font Link 3
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link4" description="Font Link 4" type="string" default="" value=""/>
[!] Font Link 4
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link5" description="Font Link 5" type="string" default="" value=""/>
[!] Font Link 5
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link1" description="Font Link 1" type="string" default="" value="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;display=swap"/>
[!] Font Link 1
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link2" description="Font Link 2" type="string" default="" value=""/>
[!] Font Link 2
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link3" description="Font Link 3" type="string" default="" value=""/>
[!] Font Link 3
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link4" description="Font Link 4" type="string" default="" value=""/>
[!] Font Link 4
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link5" description="Font Link 5" type="string" default="" value=""/>
[!] Font Link 5
[!] @type {String}
[!] Warning: Don't add invalid font css url

If you don't want to dynamically load your fonts, skip above steps and put all <link> tags provided by Google Fonts in-between of following two lines of code through Blogger HTML Editor. Note that you still need to escape the value of href attribute.

<b:comment><!--[ </head> | <!> [below] Custom codes (Global) ]--></b:comment>



<b:comment><!--[ </head> | <!> [above] Custom codes (Global) ]--></b:comment>

<b:comment><!--[ </head> | <!> [below] Custom codes (Global) ]--></b:comment>

<link rel='preconnect' href='https://fonts.googleapis.com'/>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin=''>
<link href='https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;display=swap' rel='stylesheet'/>

<b:comment><!--[ </head> | <!> [above] Custom codes (Global) ]--></b:comment>

Using CSS

If you can't link fonts using external sources and you have CSS which imports font families, you can replace the marked part with your single line escaped font css, i.e. your css must be in a single line and escaped (replace & to &, < to <, > to >, ' to ' and " to ").

<Variable name="font.css" description="Font CSS" type="string" default="" value="@font-face{font-family:&#39;Google Sans Text&#39;;font-style:normal;font-weight:400;font-display:swap;src:local(&#39;Google Sans Text&#39;),local(&#39;Google-Sans-Text&#39;),url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2) format(&#39;woff2&#39;)} @font-face{font-family:&#39;Google Sans Text&#39;;font-style:normal;font-weight:700;font-display:swap;src:local(&#39;Google Sans Text&#39;),local(&#39;Google-Sans-Text&#39;),url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format(&#39;woff2&#39;)} @font-face{font-family:&#39;Google Sans Mono&#39;;font-style:normal;font-weight:400;font-display:swap;src:local(&#39;Google Sans Mono&#39;),local(&#39;Google-Sans-Mono&#39;),url(https://fonts.gstatic.com/s/googlesansmono/v4/P5sUzYWFYtnZ_Cg-t0Uq_rfivrdYH4RE8-pZ5gQ1abT53wVQGrk.woff2) format(&#39;woff2&#39;)}"/>
[!] Font CSS
[!] @type {String}
[!] Warning: The font CSS must be in single line and string must be escaped

Font name

If you changed the default font sources, you may need to provide your font family name in order to be used by the document. To do so, you can follow these steps:

Go to Blogger HTML Editor.

Find the following code snippet and replace the existing font names with your custom font names.

<Variable name="font.head" description="Heading font name" type="string" default="" value="Google Sans Text"/>
[!] Heading font name
[!] @type {String}

<Variable name="font.body" description="Body font name" type="string" default="" value="Google Sans Text"/>
[!] Body font name
[!] @type {String}

<Variable name="font.bodyAlt" description="Body alternative font name" type="string" default="" value="Google Sans Text"/>
[!] Body alternative font name
[!] @type {String}

<Variable name="font.code" description="Code Font Name" type="string" default="" value="Google Sans Mono"/>
[!] Code font name
[!] @type {String}

<Variable name="font.head" description="Heading font name" type="string" default="" value="Plus Jakarta Sans"/>
[!] Heading font name
[!] @type {String}

<Variable name="font.body" description="Body font name" type="string" default="" value="Plus Jakarta Sans"/>
[!] Body font name
[!] @type {String}

<Variable name="font.bodyAlt" description="Body alternative font name" type="string" default="" value="Plus Jakarta Sans"/>
[!] Body alternative font name
[!] @type {String}

<Variable name="font.code" description="Code Font Name" type="string" default="" value="Google Sans Mono"/>
[!] Code font name
[!] @type {String}

Custom texts

Blogger provides few texts which automatically get translated based on what language is choosen in Blog Settings. Few of these texts are Show more, Post a comment, Join the conversation, etc. But when using custom texts lets say Close, Appearance, About the Author, etc., it can't be automatically translated and will stay in English unless changed. You may want to modify these texts to your own.

Go to Blogger HTML Editor.

Find the following code snippet and replace the value attribute with your custom text in respect to what description says.

[!] Messages
[!] @type {String}
[!] Warning: Message value must be in single line and must not contain double quotes
<Variable name="m.new" description="Message for: New!" type="string" default="" value="New!"/>
<Variable name="m.free" description="Message for: Free!" type="string" default="" value="Free!"/>
<Variable name="m.open" description="Message for: Open" type="string" default="" value="Open"/>
<Variable name="m.close" description="Message for: Close" type="string" default="" value="Close"/>
<Variable name="m.hideAll" description="Message for: Hide all" type="string" default="" value="Hide all"/>
<Variable name="m.showAll" description="Message for: Show all" type="string" default="" value="Show all"/>
<Variable name="m.previous" description="Message for: Previous" type="string" default="" value="Previous"/>
<Variable name="m.next" description="Message for: Next" type="string" default="" value="Next"/>

[!] Messages
[!] @type {String}
[!] Warning: Message value must be in single line and must not contain double quotes
<Variable name="m.new" description="Message for: New!" type="string" default="" value="नया!"/>
<Variable name="m.free" description="Message for: Free!" type="string" default="" value="मुक्त!"/>
<Variable name="m.open" description="Message for: Open" type="string" default="" value="खोलें"/>
<Variable name="m.close" description="Message for: Close" type="string" default="" value="बंद करें"/>
<Variable name="m.hideAll" description="Message for: Hide all" type="string" default="" value="सब छिपाएं"/>
<Variable name="m.showAll" description="Message for: Show all" type="string" default="" value="सब दिखाएं"/>
<Variable name="m.previous" description="Message for: Previous" type="string" default="" value="पिछला"/>
<Variable name="m.next" description="Message for: Next" type="string" default="" value="अगला"/>

Only modify the value attribute, keep rest as it is.

Conclusion That’s all about adding the Appearance and Customization in your Blogger posts. We hope you found this guide helpful and easy to follow. Please feel free to share this article with others. If you face any issues or have any questions regarding any step, don’t hesitate to ask in the comment section. Thank you for reading!

EmadulAi

Appearance and Customization

Direction

How to Set Blog Direction

Default Mode

How to Change Default Mode

Theme Schemes

Theme Schemes & Custom Colors

Status Bar Color

How to Customize Status Bar Color

Box Design

How to Enable/Disable Box Design:

Custom Fonts

Using link tag

Using CSS

Font name

Custom texts

About the author

Post a Comment

Join the conversation

Plus UI Blogger Template (EOL) version 3.2.0

How to Make Blogger Contact Form Work Without Loading widgets.js

How to lazyload Javascript using LocalStorage

UI Components and Typography

Annapurna Yojana Online Apply 2026 – Social Registry Portal Registration, OTP Login, Aadhaar ও EPIC Full Process