Info! Lantro UI comes with several pre-filled defaults, but reviewing these settings is highly recommended before going live.
After installing Lantro UI v2.0, the next important step is configuring the built-in Edit HTML variables. These settings control branding, metadata, SEO and ad integration.
Below are the most important variables to review inside the theme code.
How to open Edit HTML in Blogger
- Go to your Blogger dashboard
- Click the "Themes" option from the sidebar
- Click the drop-down icon near the "Customize" button
- Click the "Edit HTML" option
1. Custom Homepage Title
Find:
<Variable name="home_title" value="Lantro UI - A Modern Blogger Theme"/>
Tip! Replace the demo title with your own blog name and niche.
Example:
value="My Tech Blog - Tutorials & Tools"2. AdSense Client ID
<Variable name="adsense.clientId" value=""/>
Warning! This field is empty by default, connect your blog by adding publisher id here or connect through Blogger settings to maintain page performance.
value="xxxxxxxxxxxxxxxx"
Tip! Use only numbers as instructed in the setting description.
3. AdSense Host ID
<Variable name="adsense.hostId" value=""/>Add your host ID:
value="xxxxxxxxxxxx"
Tip! Use only numbers as instructed in the setting description.
4. Favicon
<Variable name="favicon" value="Default Theme Favicon URL"/>Replace with your own favicon:
value="https://example.com/favicon.png"
A custom favicon improves branding in tabs, bookmarks and search results. 1:1 ratio PNG image recommended.
5. Open Graph Image
<Variable name="opengraph_image" value="Default Social Preview Image"/>You can keep default temporarily, but using your own branded image is recommended.
value="https://example.com/og-image.jpg"
Info! Recommended image ratio is 16:9 for best social sharing previews.
6. Twitter Card Image
<Variable name="twitter_image" value="Default Twitter Preview Image"/>Example:
value="https://example.com/twitter-card.jpg"
Info! Recommended image ratio is 16:9 for best sharing previews.
7. Organization Logo
<Variable name="organization_logo" value="Default Logo URL"/>Use your own logo URL:
value="https://example.com/logo.png"
Warning! If image URL ends with =s512 or similar Blogger size parameters, remove that suffix. Also use 1:1 ratio image
8. Default Metadata Thumbnail
<Variable name="default_thumbnail" value="Default Thumbnail URL"/>Example:
value="https://example.com/default-thumb.jpg"This image appears when a post has no thumbnail in link previews. (Recommended 16:9 ratio image)
9. Keywords Meta Tag
<Variable name="keywords" value="coshix, lantro ui download"/>
Info! Don't keep the default keywords. Replace them with keywords relevant to your niche.
Example:
value="blogger themes, seo guides, tech tutorials"Required Settings You Must Change
Required: Update all settings below before using the theme publicly.
- home_title
- adsense.clientId
- adsense.hostId
- keywords
Recommended Branding Settings
- favicon
- opengraph_image
- twitter_image
- organization_logo
- default_thumbnail
Info! Default theme images can be kept temporarily, but replacing them is recommended for better branding.
Quick Setup Checklist
- ✔ Replace demo homepage title
- ✔ Add AdSense IDs
- ✔ Update keywords
- ✔ Replace favicon
- ✔ Add custom social preview images
- ✔ Update organization logo
Success! Once these are configured, your Lantro UI setup is properly optimized.
Final Note
Many settings are pre-filled to make setup easier, but personalizing these variables makes the theme truly yours.