Plus UI

Plus UI v3.7.0 Released: Multi-page SafeLink & SEO

noreply@blogger.com (Unknown) — Sun, 21 Dec 2025 05:33:03 +0000

Update v3.7.0 This version brings major improvements to Monetization (SafeLink) and SEO (Titles), along with core stability fixes for PWA and Ads.

Important!
Before making any changes to your theme XML or settings, please backup your theme. Go to Theme > Backup > Download to save a copy of your current version.

Table of Contents

Welcome everyone! We are excited to announce the release of Plus UI v3.7.0. This update focuses on maximizing your revenue through advanced SafeLink features and improving your blog's search engine visibility.

1. Custom Home Page Title (SEO)

Previously, the home page title relied on the blog name. Now, you can set a separate, SEO-optimized title specifically for the home page.

Open your Blogger Theme XML editor and search for the following variable:

<Variable name="home.title" description="Enter Your Custom Title in Value (Enable Custom Title Plugin)" type="string" default="" value="Plus Ui"/>

[!] Enter Your Custom Home page Title in Value
[!] @type {String}
[!] Page: its Only For Home Page
[!] Note: Must Should enable Custom Home page Title Plugin To use this Title

Replace the value (currently "Plus Ui") with your desired SEO Title.
Activate the Plugin: Go to Blogger > Theme Designer > Advanced.
- Find Plugin: Custom Home Page Title.
- Change the value from 1px to 2px.

Done! Your custom home page title is now successfully set up.

2. Multi-page SafeLink (Advanced)

We have overhauled the SafeLink system. You can now choose between the classic Single Page mode or the new Multi-Page mode which supports automatic page picking and is compatible with Adslinkfly.

2.1 Multi-page SafeLink (New)

This mode automatically picks pages from your blog feed and supports multiple steps, making it ideal for increasing ad impressions.

Features: Multi-pages, Multiple steps, Auto + Manual page picking, Supports Manual posts, Supports Adslinkfly.
How to Enable: Go to Theme Designer > Advanced > Plugin: Safelink.
Set the length to 3px.

2.2 Single Page SafeLink (Old)

The classic one-step safelink method.

Features: Single page, One step, Manual pages only.
Adslinkfly Support: No.
How to Enable: Go to Theme Designer > Advanced > Plugin: Safelink.
Set the length to 2px.

2.3 SafeLink Options Explained

Customize the behavior of your SafeLink system using the sliders in Theme Designer > Advanced. Refer to the table below for details on each option.

Figure: Enable "Multi Pages" by setting the slider to 3px.

Option Name	Values	Description
Safelink Button Behavior	1 = Always Show 2 = Click to Scroll	(1) Buttons are visible immediately. (2) User must click a trigger or scroll to reveal the button.
Auto Encrypt Manual Links	1 = Disable 2 = Enable	Automatically encrypts external links found in your posts (with class `.safeL`) into safelinks.
Open Encrypted Link in New Tab	1 = Disable 2 = Enable	When a user clicks a safelink, it opens the decryption page in a new browser tab.
Open Destination Link in New Tab	1 = Disable 2 = Enable	Once the timer finishes, the final destination URL opens in a new tab.
Safelink Countdown Seconds	Time (e.g., 14)	Sets the duration (in seconds) the user must wait before the link is ready.
Total Steps for Safelink	Number (e.g., 4)	(Multi-page mode only) Sets how many pages/clicks the user must go through.
Safelink AutoScroll	1 = Disable 2 = Enable	Automatically scrolls the user's screen to the timer or button location.

2.4 Custom Placement (Advanced)

By default, the SafeLink controls (Timers and "Next" buttons) automatically appear at the very top and bottom of your post content (.post .pInr). However, you can manually force them to appear exactly where you want.

Manual Placement:

Add the following specific IDs to any <div> in your Post or Theme Layout to override the default position:

id="sl_top_section" : The container for the top element (e.g., Timer or Ads).
id="sl_bottom_section" : The container for the bottom element (e.g., "Next" Button).

<!-- Example: Custom placement inside a post -->
<p>Some intro text...</p>

<!-- The timer/ad will appear here -->
<div id='sl_top_section'></div>

<p>Main article content...</p>

<!-- The Next button will appear here -->
<div id='sl_bottom_section'></div>

Note: If these IDs are not found, the script automatically looks for the post content container or standard ad sections (sec_Horizontal-Ad) to place the elements.

Configure SafeLink Pages

To use this feature, you must define the pages in your HTML.

Go to Blogger HTML Editor.
Find the following code snippet and input your page paths. You must add at least one page.

Warning!
Only put the pathname of the page (e.g., /p/my-page.html), not the full URL.

<Variable name="safelink.page1" description="Safelink Page 1" type="string" default="" value="/p/safelink-page-1.html"/>
[!] Safelink Page 1
[!] @type {String}
[!] Warning: Don't add full url of the safelink page, only include the pathname

<Variable name="safelink.page2" description="Safelink Page 2" type="string" default="" value=""/>
[!] Safelink Page 2
[!] @type {String}
[!] Warning: Don't add full url of the safelink page, only include the pathname

<Variable name="safelink.page3" description="Safelink Page 3" type="string" default="" value=""/>
[!] Safelink Page 3
[!] @type {String}
[!] Warning: Don't add full url of the safelink page, only include the pathname

<Variable name="safelink.page4" description="Safelink Page 4" type="string" default="" value=""/>
[!] Safelink Page 4
[!] @type {String}
[!] Warning: Don't add full url of the safelink page, only include the pathname

Safelink Generator Tool

You can embed this generator tool on your site to create safelinks easily.

Create a new Page or Post and switch to HTML View.
Copy and paste the code below:

<!--[ Begin: Safelink Generator area ]-->
<style>
.inF.cB button{--svgW:16px;--svgH:16px;position:absolute;inset-block-start:10px;inset-inline-end:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--contentB);border-radius:8px;border:1px solid var(--contentLa);opacity:0.5;cursor:pointer}
.inF.cB input{padding-inline-end:50px}
.inF.cB input:not(:placeholder-shown) ~ button{opacity:1}
.sgMw{max-width:600px;margin:40px auto}
.sgOw{display:flex;align-items:center;gap:12px 8px;flex-wrap:wrap;background:var(--contentB);border:1px solid var(--contentL);border-radius:5px;padding:12px}
.sgOw span{width:100%;line-height:1.4em;font-size:14px}
.sgOw button{--svgW:20px;--svgH:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;background:var(--linkB);color:#fffdfc;border-radius:8px;cursor:pointer}
</style>
<script>
/*! Plus UI Javascript (safelink/generator.js) | Authors: Deo Kumar, Armaan Kumar (https://fineshopdesign.com) | License: Unlicensed | Copyright (c) 2024-2025 Fineshop Design */
"use strict";((e,t,l)=>{let{cEl:n,iAE:a,aEL:s,qSel:i,gId:p,eHTML:o,tNtf:g,df:c,pl:u,bg:r}=e,d=e=>(e=>new URL(e,l.baseURI))((e=>e.replace(/(^\w+:|^)/,""))(e)),h=(t,l,n="s")=>{let a=(t=>{let l=JSON.stringify(t);return{decoded:t,value:l,data:e.B64.O3.e(l)}})(l);return t+`#${n}=${encodeURIComponent(a.data)}`},v=u.sl,b=v.pg.map(e=>new URL(e,r.cnHmU).href),f=l.currentScript,C=[];v.ok||C.push("The Safelink plugin is not enabled. The generated links will not work until it is enabled."),0===b.length&&C.push("No Safelink page has been configured!");let k=n("div",{className:"sgMw",innerHTML:`${0!==C.length?`<div class='alert warning'><b>Warning!</b>${C.map((e,t)=>`${t+1}. ${e}`).join("<br>")}</div>`:""}<div class='inF cB' data-message='URL must begin with http:// or https://'><input type='text' name='link' id='sg_f_link' placeholder=' '><label for='sg_f_link'>Destination URL</label><button type='button' id='sg_f_clear_link'><svg class='line' viewBox='0 0 24 24'><path d='M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999'></path></svg></button></div><div class='inF' data-message='Select a page for safelink'><select id='sg_f_page'><optgroup label='Static pages'><option value='${o(r.cnHmU)}'${0===b.length?" selected":""}>Homepage</option></optgroup>${!v.ver&&0!==b.length?`<optgroup label='Safelink Pages'>${b.reduce((e,t,l)=>`${e}<option value='${o(t)}'${0===l?" selected":""}>Safelink Page (${o(v.pg[l])})</option>`,"")}</optgroup>`:""}</select><label for='sg_f_page'>Safelink Page</label></div><div class='sgOw'><span class='sgOl'></span><button type='button' class='sgOv'><svg class='line' viewBox='0 0 24 24'><path d='M15.58 12C15.58 13.98 13.98 15.58 12 15.58C10.02 15.58 8.42004 13.98 8.42004 12C8.42004 10.02 10.02 8.42004 12 8.42004C13.98 8.42004 15.58 10.02 15.58 12Z'></path><path d='M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.46997 3.71997 5.17997 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.17997 18.19 8.46997 20.27 12 20.27Z'></path></svg></button><button type='button' class='sgOc'><svg class='line' viewBox='0 0 24 24'><path d='M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z'></path><path d='M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z'></path></svg></button></div>`});a(f,"beforebegin",k);let $=p("sg_f_link"),_=p("sg_f_clear_link"),m=p("sg_f_page"),w=i(".sgOl",k),H=i(".sgOv",k),L=i(".sgOc",k),U=()=>{if(!e.B64)return null;let t=$.value.trim();return""===t?null:(/^https?:\/\//.test(t)||(t=`https://${t}`),h(m.value,{v:1,u:t}))},M=()=>{let e=U();w.innerText=e||"Input a valid Destination URL first!"};M(),s($,"change",M),s($,"input",M),s($,"keyup",M),s(m,"change",M),s(m,"input",M),s($,"blur",()=>{let e=$.value.trim();""!==e&&(/^https?:\/\//.test(e)?$.value!==e&&($.value=e):$.value=`https://${e}`)}),s(_,"click",()=>{$.value="",M()}),s(H,"click",()=>{let e=U();e?t.open(e,"_blank"):g(w.textContent)}),s(L,"click",()=>{let t=U();t?e.cpT(t).then(()=>g("Link copied to clipboard!")):g(w.textContent)}),c.then(()=>{M();if(v.ver){return;}e.iBF().then(async e=>{let t=new e(d(r.cnHmU)),[l,a]=await Promise.all([t.posts.list(),t.pages.list()]);[["Recent Posts",l],["Recent Pages",a]].forEach(([e,t])=>{let l=n("optgroup",{attributes:{label:e},innerHTML:t.reduce((e,t)=>`${e}<option value='${o(t.url)}'>${o(t.title)}</option>`,"")});m.appendChild(l)})})})})(PU,window,document);
</script>
<!--[ End: Safelink Generator area ]-->

3. Bug Fixes: Middle Post Ads

In version 3.2.0, some users reported issues with ads not rendering correctly in the middle of posts. We have upgraded the middle ads script in v3.7.0, and it is now working 100% effectively.

4. PWA Stability Improvements

We have significantly improved the stability of the Progressive Web App (PWA) functionality. Previous issues where the "Install App" prompt would not appear on certain Android versions have been resolved.

How to test the new PWA:

Clear your browser cache.
Visit your blog on a mobile device (Chrome or Safari).
You should see the "Add to Home Screen" or "Install App" prompt appear faster and more reliably.
The app now functions smoothly offline for cached pages.

5. Core Updates: Adslinkfly & Status Code

Two major core updates have been applied to improve functionality.

5.1 Adslinkfly Script Update

Update your view_banner.ctp with the code below to ensure compatibility with the new Safelink system.

<?php
$lurl = "safelink.page.gd";
$burl = "plus-ul.blogspot.com";

/** Custom Base64 encoder */
function custom_base64_encode($string) {
    $dict = "MNBVCXZLKJHGFDSAPOIUYTREWQmnbvcxzlkjhgfdsapoiuytrewq0987654321+/=";
    $std  = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    $b64  = base64_encode($string);
    return strtr($b64, $std, $dict);
}

/** Referrer check */
$ref = $_SERVER['HTTP_REFERER'] ?? '';
$do = parse_url($ref);
$refer = $do['host'] ?? '';

if ($refer != $burl) {

    $originalLink = 'https://' . $lurl . '/' . urlencode($link->alias);

    // Create JSON object for safelink
    $jsonLink = json_encode([
        "v" => 1,      // version or flag
        "u" => $originalLink
    ]);

    // Encode JSON with custom Base64
    $encodedLink = custom_base64_encode($jsonLink);

    // Final redirect URL
    $finalUrl = 'https://' . $burl . '/#?url=' . $encodedLink;

    header("Location: $finalUrl", true, 307);
    exit();
}
?>
<?php
/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\Link $link
 * @var \App\Model\Entity\Post $post
 * @var mixed $ad_form_data
 * @var string $banner_336x280
 * @var string $banner_468x60
 * @var string $banner_728x90
 * @var mixed $pop_ad
 * @var mixed $show_pop_ad
 * @var \App\Model\Entity\Plan $link_user_plan
 */

$this->assign('title', get_option('site_name'));
$this->assign('description', get_option('description'));
$this->assign('content_title', get_option('site_name'));
$this->assign('og_title', $link->title);
$this->assign('og_description', $link->description);
$this->assign('og_image', $link->image);
?>

<?php $this->start('scriptTop'); ?>
<script type="text/javascript">
    if (window.self !== window.top) {
        window.top.location.href = window.location.href;
    }
</script>
<?php $this->end(); ?>

<div class="box-main">
    <?php if (!empty($banner_728x90)) : ?>
        <div class="banner banner-728x90">
            <div class="banner-inner">
                <?= $banner_728x90; ?>
            </div>
        </div>
    <?php endif; ?>

    <?php if ($post): ?>
        <div class="blog-item">
            <div class="page-header">
                <h3>
                    <small><a href="<?= build_main_domain_url('/blog') ?>"><?= __('From Our Blog') ?>:</a>
                    </small> <?= h($post->title) ?></h3>
            </div>
            <div class="blog-content"><?= $post->description ?></div>
        </div>
    <?php endif; ?>

    <h4><?= __('Your link is almost ready.') ?></h4>

    <span id="countdown" class="countdown">
        <span id="timer" class="timer">
            <?= $link_user_plan->timer ?? 5 ?>
        </span><br><?= __('Seconds') ?>
    </span>

    <?php if (!empty($banner_468x60)) : ?>
        <div class="banner banner-468x60">
            <div class="banner-inner">
                <?= $banner_468x60; ?>
            </div>
        </div>
    <?php endif; ?>

    <?php
    $hidden_class = '';
    if (empty($link->image) && empty($link->title) && empty($link->description)) {
        $hidden_class = 'hidden';
    }
    ?>

    <?php if (get_option('short_link_content', 'no') === 'yes') : ?>
        <div class="link-details <?= $hidden_class ?>">
            <div class="panel panel-default">
                <div class="panel-body">
                    <img class="link-image" src="<?= h($link->image) ?>"/>
                    <h4 class="link-title"><?= h($link->title) ?></h4>
                    <p class="link-description"><?= h($link->description) ?></p>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <div style="margin-bottom: 10px;">
        <a href="javascript: void(0)" class="btn btn-success btn-lg get-link disabled">
            <?= __('Please wait...') ?>
        </a>
    </div>

    <?php if (!empty($banner_336x280)) : ?>
        <div class="banner banner-336x280">
            <div class="banner-inner">
                <?= $banner_336x280; ?>
            </div>
        </div>
    <?php endif; ?>

</div>


<?=
$this->Form->create(null, [
    'url' => ['controller' => 'Links', 'action' => 'go', 'prefix' => false],
    'id' => 'go-link',
    'class' => 'hidden',
]);
?>

<?= $this->Form->hidden('ad_form_data', ['value' => $ad_form_data]); ?>

<?=
$this->Form->button(__('Submit'), [
    'id' => 'go-submit',
    'class' => 'hidden',
]);
?>

<?= $this->Form->end(); ?>

<?php if (get_option('enable_popup', 'yes') == 'yes' && $show_pop_ad) : ?>
    <?=
    $this->Form->create(null, [
        'url' => ['controller' => 'Links', 'action' => 'popad', 'prefix' => false],
        'target' => "_blank",
        'id' => 'go-popup',
        'class' => 'hidden',
    ]);
    ?>

    <?= $this->Form->hidden('pop_ad', ['value' => $pop_ad]); ?>

    <?= $this->Form->end(); ?>
<?php endif; ?>

<?php $this->start('scriptBottom'); ?>
<?php $this->end(); ?>

Configuration Note

First, locate the line: $lurl = "safelink.page.gd";
Replace safelink.page.gd with your own Safelink domain.
Next, find the line: $burl = "plus-ul.blogspot.com";
Replace plus-ul.blogspot.com with your own Blogspot domain.
Compatibility: This Adslinkfly script works only with the Plus UI theme.

5.2 Blog Status Code (Last Month Views)

You can now display a visual chart of your blog's estimated views for the last month. Place the following code where you want the chart to appear.

<!--[ Last month estimated views chart ]-->

<script>
"use strict";!((a,b,c)=>{if(!navigator.onLine)return;const d=c.currentScript,e=d.insertAdjacentElement("beforebegin",a.cEl("canvas",{style:"width: 100%; height: auto;",width:800,height:400,ariaLabel:"Estimated views chart",role:"img"}));a.lz.then(()=>a.df).then(()=>a.lJs("https://cdn.jsdelivr.net/npm/chart.js")).then(()=>{const b=new URL(a.cf.bst.su,a.bg.cnHmU);return b.searchParams.set("timeRange","LAST_MONTH"),fetch(b).then(a=>a.ok?a.json():null)}).then(b=>{if(!b)return;const{rows:c}=(a=>{const b=a.total,c=a.sparklineData,d=c.reduce((a,[,b])=>a+b,0),e=[],f=new Date;for(const[g,h]of c){const a=new Date(Date.UTC(f.getUTCFullYear(),f.getUTCMonth(),f.getUTCDate()-(29-g))),c=a.toLocaleDateString("en-GB",{day:"2-digit",month:"short"}),i=Math.round(h/d*b);e.push({date:c,views:i})}return{total:b,rows:e,sparks:c}})(b),d=e.getContext("2d"),f=d.createLinearGradient(0,0,0,e.height);f.addColorStop(0,"rgba(195, 113, 239, 0.15)"),f.addColorStop(1,"rgba(0, 0, 0, 0)"),new Chart(e,{type:"line",data:{labels:c.map(a=>a.date),datasets:[{label:"Estimated Views",data:c.map(a=>a.views),fill:!0,tension:.4,borderColor:"#c371ef",borderWidth:2,backgroundColor:f,pointRadius:2,pointHoverRadius:5,pointHoverBorderWidth:4,pointHoverBackgroundColor:"#fff"}]},options:{responsive:!0,interaction:{mode:"index",intersect:!1},plugins:{tooltip:{backgroundColor:"rgba(53, 27, 92, 0.8)",caretPadding:5,boxWidth:5,usePointStyle:"triangle",boxPadding:3,callbacks:{label:a=>`Views: ${a.raw}`,title:a=>`Date: ${a[0].label}`}},legend:{display:!1,labels:{usePointStyle:!0}}},scales:{x:{grid:{display:!1},title:{display:!1,text:"Date"}},y:{title:{display:!1,text:"Views"},beginAtZero:!0,ticks:{callback:b=>a.abvN(b,2).join("")}}}}})})})(PU,window,document);
</script>

Live Demo

Want to see the new Multi-page SafeLink and Status Chart in action?

View v3.7.0 Demo Join Telegram Support

Conclusion

The Plus UI v3.7.0 update represents a significant step forward in giving you control over your site's monetization and SEO. We highly recommend upgrading to take advantage of the new Safelink capabilities and bug fixes. Thank you for your continued support!

Plus UI Menu Generator Tool

noreply@blogger.com (Unknown) — Sun, 30 Nov 2025 15:27:00 +0000

Plus UI v3.0++

Get Started

Join Telegram

Tool NamePlus UI Menu Generator

PlatformReact UI

TypeDevelopment Utility

Version1.0 (Beta)

DeveloperDeo Kumar

Release DateOctober 2025

Build your navigation menu items below. Choose the type of item, fill in the details, and click "Add". Use the "Choose Icon" button to select an icon (the full SVG code will be generated).

Menu Item Class Reference

Class	Meaning	Behavior / Purpose
`.mr`	Menu Root / Heading	Used for section titles inside the menu. These items are not clickable and are often used to group related links.
`.br`	Border / Divider	Adds a horizontal line below the item — useful for separating menu sections.
`.nt`	Notification Indicator	Displays a small dot (usually colored) to highlight new or important links.
`Normal <li>`	Standard Menu Item	Regular clickable link used for navigation or actions.

Add Badge Link

Adds a link with a special class (new or free) to show a theme-defined badge.

Title:

URL:

Icon (Optional):

Badge:

Optional <li> Classes:

Add Dropdown (Style 1: No Sub-Item Icons)

Dropdown Title:

Dropdown Icon:

Optional <li> Classes:

Start expanded (add checked)

Sub-Items:

Add Dropdown (Style 2: With Sub-Item Icons)

Dropdown Title:

Dropdown Icon:

Optional <li> Classes:

Start expanded (add checked)

Sub-Items (Icon required for each):

Add Dropdown (Style 3: Top Level Sub-Menu)

A dropdown with no parent icon, designed for "More..." links. Sub-items require icons.

Dropdown Title:

Optional <li> Classes:

Start expanded (add checked)

Sub-Items (Icon required for each):

Generated Menu Code

Copy the code below to update your Blogger menu:

Method 1: Using Layout

Go to your Blogger Dashboard → Layout.
Locate the Navigation Menu section.
Replace the existing menu code with the code generated by the ReactUI Menu Generator Tool.

Tip: If you prefer not to manage the menu via Layout, leave the Layout field empty and edit your theme’s XML manually.

Method 2: Editing Theme Code

Go to your Blogger Dashboard → Theme → Edit HTML. Find <b:includable id='items-mainMenu'> and replace everything between its opening and closing tags (including  comments and all existing <li> elements) with your new copied code. Save the theme to apply changes.

Safelink and Shortlink - v3.2+

noreply@blogger.com (Unknown) — Sun, 19 Oct 2025 02:44:00 +0000

Shortlink & Safelink Generator tools are designed to help you easily create shortened URLs and secure them with safelink redirection. These features were introduced in Plus UI v3.2+.

Looking for Demo? You can view the live demo of both generators here: Safelink Generator | Shortlink Generator | Safelink + Shortlink Generator

Shortlink Generator

The Shortlink Generator uses Firebase Dynamic Links to create short, shareable links. These links can redirect users to your desired URLs while allowing tracking, branding, and optional analytics.

To enable this feature, you must configure your Firebase API credentials first.

Open your Firebase Console and navigate to Dynamic Links.
Create a new domain, for example: https://example.page.link.
Copy your API Key from Project Settings → General → Web API Key.

Replace the placeholder values in the script:

const SHORTLINK_DOMAIN = "https://YOUR_DOMAIN.page.link";
const SHORTLINK_KEY = "YOUR_FIREBASE_API_KEY";

How to Get Firebase Web API Key

Go to Firebase Console.
Select an existing project or create a new one.
Navigate to Project Settings → General to find your Web API Key.

If the key isn’t visible, go to Authentication and enable any Auth provider. This will generate the key automatically.

How to Create a `page.link` Domain for Dynamic Links

In Firebase Console, open Engage → Dynamic Links.
Click Get Started and enter your desired domain (e.g., fineshop.page.link).
Your domain must end with page.link and can contain only alphabets and numbers.
Once completed, you’ll see a success notification. Note down your page.link domain for use in your script.

Adding the Script to Blogger

After setting up your Firebase credentials, paste the following JavaScript code into your Blogger page’s HTML view:

<!-- [Begin: Shortlink Generator area] -->

<style>
.inF.cB button,.sgOw{align-items:center;background:var(--contentB)}.inF.cB button,.sgOw button{display:flex;cursor:pointer}.inF.cB button{--svgW:16px;--svgH:16px;position:absolute;inset-block-start:10px;inset-inline-end:10px;width:30px;height:30px;justify-content:center;border-radius:8px;border:1px solid var(--contentLa);opacity:.5}.inF.cB input{padding-inline-end:50px}.inF.cB input:not(:placeholder-shown)~button{opacity:1}.sgMw{max-width:600px;margin:40px auto}.sgOw{display:flex;gap:12px 8px;flex-wrap:wrap;border:1px solid var(--contentL);border-radius:5px;padding:12px}.sgOw span{width:100%;line-height:1.4em;font-size:14px}.sgOw button{--svgW:20px;--svgH:20px;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;background:var(--linkB);color:#fffdfc;border-radius:8px}.sgOs{flex:1 1 35%;width:100%;max-width:120px;margin:12px 0;padding:16px}
</style>

<script>
// Firebase shortlink config
  const SHORTLINK_DOMAIN = "https://XXXXXX.page.link"; // Replace
  const SHORTLINK_KEY = "XXXXXXXX-NNN-7VVVVV-UUUUUUU-P"; // Replace
  
/*! Plus UI Javascript (shortlink/generator.js) | Authors: Deo Kumar, Armaan Kumar | Refactored 2025 */
 
"use strict";((t,e,n)=>{let{cEl:_,iAE:i,aEL:s,qSel:r,gId:o,eHTML:a,tNtf:l}=n,c=_("div",{className:"sgMw",innerHTML:`<div class="inF cB" style="position:relative"><input type="text" name="link" id="sg_f_link" placeholder=" " autocomplete="off"><label for="sg_f_link">Destination URL</label><button type="button" id="sg_f_clear_link" title="Clear"><svg class="line" viewBox="0 0 24 24" width="14" height="14"><path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999"></path></svg></button></div><div class="sgOw"><span class="sgOl">Enter a URL to shorten</span><button type="button" class="sgOs" id="sg_f_shorten">Shorten</button><button type="button" class="sgOv" title="Open Link"><svg class="line" viewBox="0 0 24 24" width="16" height="16"><path d="M15.58 12C15.58 13.98 13.98 15.58 12 15.58C10.02 15.58 8.42004 13.98 8.42004 12C8.42004 10.02 10.02 8.42004 12 8.42004C13.98 8.42004 15.58 10.02 15.58 12Z"></path><path d="M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.46997 3.71997 5.17997 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.17997 18.19 8.46997 20.27 12 20.27Z"></path></svg></button><button type="button" class="sgOc" title="Copy Link"><svg class="line" viewBox="0 0 24 24" width="16" height="16"><path d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z"></path><path d="M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z"></path></svg></button></div>`});e.currentScript.before(c);let $=o("sg_f_link"),d=o("sg_f_clear_link"),h=c.querySelector(".sgOl"),p=c.querySelector(".sgOv"),g=c.querySelector(".sgOc"),k=o("sg_f_shorten"),u=t=>(t=(t||"").trim(),/^https?:\/\//i.test(t)?t:t?`https://${t}`:null),v=t=>{h.textContent=t||"Enter a URL to shorten"};d.addEventListener("click",()=>{$.value="",v()});let y=async()=>{let t=u($.value);if(!t)return l("Please enter a valid URL!");v("Shortening...");let e=`https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=${encodeURIComponent(SHORTLINK_KEY)}`,n={dynamicLinkInfo:{domainUriPrefix:SHORTLINK_DOMAIN,link:t},suffix:{option:"SHORT"}};try{let _=await fetch(e,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)});if(!_.ok){let i=await _.text();return console.error("Shortlink API response:",_.status,i),l("API error occurred!")}let s=await _.json();s&&s.shortLink?v(s.shortLink):(console.error("Unexpected API response:",s),l("Failed to generate short link!"))}catch(r){console.error(r),l("Network or CORS error!")}};$.addEventListener("keydown",t=>"Enter"===t.key&&y()),k.addEventListener("click",y),p.addEventListener("click",()=>{let e=h.textContent;!e||e.startsWith("Enter")||e.startsWith("Shortening")||e.startsWith("Error")?l("No valid link to open!"):t.open(e,"_blank")}),g.addEventListener("click",async()=>{let t=h.textContent;if(!t||t.startsWith("Enter")||t.startsWith("Shortening")||t.startsWith("Error"))l("No link to copy!");else try{await navigator.clipboard.writeText(t),l("Link copied to clipboard!")}catch(e){console.error(e),l("Copy failed — select and copy manually.")}}),$.addEventListener("input",()=>{v("Enter a URL to shorten")}),v()})(window,document,PU);
</script>
<!-- [End: Shortlink Generator area] -->

Safelink + Shortlink Generator

This combined generator provides both link-shortening and safelink encryption. It encodes outgoing links for extra security and monetization flexibility while also providing Firebase-based shortlinks.

Ensure Safelink Plugin is enabled from Theme Designer.
Configure at least one safelink page in your Theme HTML editor (see Safelink Setup Guide).
Replace Firebase credentials in the script below.
Paste the code inside a new Blogger page (HTML view).

<!--[ Begin: Safelink + Shortlink Generator area ]-->
<style>.inF.cB button,.sgOw{align-items:center;background:var(--contentB)}.inF.cB button,.sgOw button{display:flex;cursor:pointer}.inF.cB button{--svgW:16px;--svgH:16px;position:absolute;inset-block-start:10px;inset-inline-end:10px;width:30px;height:30px;justify-content:center;border-radius:8px;border:1px solid var(--contentLa);opacity:.5}.inF.cB input{padding-inline-end:50px}.inF.cB input:not(:placeholder-shown)~button{opacity:1}.sgMw{max-width:600px;margin:40px auto}.sgOw{display:flex;gap:12px 8px;flex-wrap:wrap;border:1px solid var(--contentL);border-radius:5px;padding:12px}.sgOw span{width:100%;line-height:1.4em;font-size:14px}.sgOw button{--svgW:20px;--svgH:20px;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;background:var(--linkB);color:#fffdfc;border-radius:8px}.sgOs{flex:1 1 35%;width:100%;max-width:120px;margin:12px 0;padding:16px}</style>




<script>
    // Firebase shortlink config
    const SHORTLINK_DOMAIN = "https://XXXXXX.page.link"; // Replace
    const SHORTLINK_KEY = "XXXXXXXX-NNN-7VVVVV-UUUUUUU-P"; // Replace
  
 /*! Plus UI Javascript (safelink+Shortlink/generator.js) | Authors: Deo Kumar, Armaan Kumar | Refactored 2025 */
"use strict";((t,e,n)=>{let{cEl:_,iAE:i,aEL:a,qSel:l,gId:s,eHTML:r,tNtf:o,df:p,pl:$,bg:g}=n,u=t=>{var n,_;return _=t.replace(/(^\w+:|^)/,""),new URL(_,e.baseURI)},c=$.sl,h=c.pg.map(t=>new URL(t,g.cnHmU).href),d=e.currentScript,f=[];c.ok||f.push("The Safelink plugin is not enabled."),0===h.length&&f.push("No Safelink page has been configured!");let v=_("div",{className:"sgMw",innerHTML:`${0!==f.length?`<div class='alert warning'><b>Warning!</b>${f.map((t,e)=>`${e+1}. ${t}`).join("<br>")}</div>`:""}<div class='inF cB' data-message='URL must begin with http:// or https://'><input type='text' name='link' id='sg_f_link' placeholder=' '><label for='sg_f_link'>Destination URL</label><button type='button' id='sg_f_clear_link'><svg class='line' viewBox='0 0 24 24'><path d='M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999'></path></svg></button></div><div class='inF' data-message='Select a page for safelink'><select id='sg_f_page'>${c.ok?`<optgroup label='Static pages'><option value='${r(g.cnHmU)}' selected>Homepage</option></optgroup>`:""}${c.ver||0===h.length?"":`<optgroup label='Safelink Pages'>${h.reduce((t,e,n)=>`${t}<option value='${r(e)}'${0===n?" selected":""}>Safelink Page (${r(c.pg[n])})</option>`,"")}</optgroup>`}</select><label for='sg_f_page'>Safelink Page</label></div><div class='sgOw'><span class='sgOl'></span><button type='button' class='sgOs' id='sg_f_shorten'><svg class='line' viewBox='0 0 24 24'><path d='M13.0601 10.9399C15.3101 13.1899 15.3101 16.8299 13.0601 19.0699C10.8101 21.3099 7.17009 21.3199 4.93009 19.0699C2.69009 16.8199 2.68009 13.1799 4.93009 10.9399'></path><path d='M10.59 13.4099C8.24996 11.0699 8.24996 7.26988 10.59 4.91988C12.93 2.56988 16.73 2.57988 19.08 4.91988C21.43 7.25988 21.42 11.0599 19.08 13.4099'></path></svg>Short it</button><button type='button' class='sgOv'><svg class='line' viewBox='0 0 24 24'><path d='M15.58 12C15.58 13.98 13.98 15.58 12 15.58C10.02 15.58 8.42 13.98 8.42 12C8.42 10.02 10.02 8.42 12 8.42C13.98 8.42 15.58 10.02 15.58 12Z'></path><path d='M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.47 3.71997 5.18 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.18 18.19 8.47 20.27 12 20.27Z'></path></svg></button><button type='button' class='sgOc'><svg class='line' viewBox='0 0 24 24'><path d='M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z'></path><path d='M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z'></path></svg></button></div> `});i(d,"beforebegin",v);let b=s("sg_f_link"),k=s("sg_f_clear_link"),C=s("sg_f_page"),m=l(".sgOl",v),w=l(".sgOv",v),y=l(".sgOc",v),L=l("#sg_f_shorten",v),T=()=>{if(!n.B64)return null;let t=b.value.trim();return t?(/^https?:\/\//.test(t)||(t=`https://${t}`),`${C.value}#s=${encodeURIComponent(n.B64.O3.e(JSON.stringify({v:1,u:t})))}`):null},H=()=>{m.innerText=T()||"Input a valid Destination URL first!"};async function x(t){if(!t)return null;try{let e=await fetch(`https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=${SHORTLINK_KEY}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({dynamicLinkInfo:{domainUriPrefix:SHORTLINK_DOMAIN,link:t},suffix:{option:"SHORT"}})});if(!e.ok)return o("Error generating shortlink"),null;return(await e.json()).shortLink||null}catch(n){return console.error(n),o("Network error"),null}}H(),a(b,"change",H),a(b,"input",H),a(b,"keyup",H),a(C,"change",H),a(C,"input",H),a(b,"blur",()=>{let t=b.value.trim();""!==t&&(/^https?:\/\//.test(t)?b.value!==t&&(b.value=t):b.value=`https://${t}`)}),a(k,"click",()=>{b.value="",H()}),a(L,"click",async()=>{let t=T();if(!t)return o("Enter a valid URL first!");m.innerText="Generating short safe link...";let e=await x(t);m.innerText=e||t}),a(w,"click",()=>{let e=m.innerText.trim(),n=T(),_=/^https?:\/\//.test(e)?e:n;if(!_)return o("Enter a valid URL first!");t.open(_,"_blank")}),a(y,"click",async()=>{let t=m.innerText.trim(),e=T(),_=/^https?:\/\//.test(t)?t:e;if(!_)return o("Enter a valid URL first!");await n.cpT(_),o("Link copied to clipboard!"),m.innerText=_}),p.then(()=>{H(),c.ver||n.iBF().then(async t=>{let e=new t(u(g.cnHmU)),[n,i]=await Promise.all([e.posts.list(),e.pages.list()]),a=_("optgroup",{attributes:{label:"Recent Posts"},innerHTML:n.reduce((t,e)=>`${t}<option value='${r(e.url)}'>${r(e.title)}</option>`,"")});C.appendChild(a);let l=_("optgroup",{attributes:{label:"Recent Pages"},innerHTML:i.reduce((t,e)=>`${t}<option value='${r(e.url)}'>${r(e.title)}</option>`,"")});C.appendChild(l)})})})(window,document,PU);
</script>

<!--[ End: Safelink + Shortlink Generator area ]-->

Tips

Always replace your Firebase keys with real credentials before testing.
If the shortened or safelinked URL doesn’t open, ensure your API permissions are set to public.
Enable “Safelink Plugin” under Theme Designer → Advanced → Plugin: Safelink (Experimental).
Use class='safeL' on anchor links to auto-wrap them in safelink.

conclusion

Once you add the above code, your page will include a modern interface like this:

A text box to enter destination URLs
Buttons to shorten, copy, and open links
Dropdown to select safelink pages
Built-in warnings if safelink is not enabled or configured

Done! You’ve successfully set up the Shortlink and Safelink Generator in your Blogger theme.

UI Components and Typography

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 16:00:00 +0000

Using v2.6? Looking for v2.6 documentation? Take a look at old documentation.

Table of Contents

Most of these features can only be used in HTML View mode, nor can you switch to 'Writing view' mode while using some of these features.

In post editor view, click icon at the bottom right of the title.
Two options will appear: HTML view and Writing view.
Select HTML View.
Copy and paste the component code wherever you want to add it and make appropriate changes.

Paragraph

Use p tag to add paragraphs to the article.

<!--[ Paragraph ]-->
<p>This is a paragraph</p>

Paragraph with Text Indent

This feature functions to make the first line of a paragraph indented with a predetermined value. You can also apply it to several other paragraphs.

<!--[ Text Indent paragraph ]-->
<p class='pIndent'>This is a paragraph with text indent.</p>

Paragraph with Drop Cap

The drop cap will resize the first letter of the paragraph so that it drops one or more lines down. Many types of print media use drop caps such as books, magazines, newspapers and so on because they can add to the visual appeal.

Mis a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.

<!--[ Drop Cap paragraph ]-->
<p><span class='dropCap'>T</span>his is a paragraph with drop cap.</p>

Post Reference Paragraph

To write a list of references or footnotes below the post.

Source:
www.example.com

<!--[ Post Reference paragraph ]-->
<p class='pRef'>Source:<br> www.example.com</p>

Post Image

Following is a standard image without any container which means there will be no lightbox for this image.

<!--[ Standard image ]-->
<img class='full' alt='alt_here' width='1280' height='720' src='image_link'/>

Tips!
Have you noticed the classname full? Adding this classname to img tag removes horizontal margin and adapts full screen width in Mobile Devices.

Good to know:

We recommend adding alt, width and height attributes to img tags.

Image with Caption

The caption in this image will not be read in the article description/snippet. You can also choose to keep the captions legible on the article snippets.

The image caption is here! Where were you looking for it?

<!--[ Image with Caption ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_alt' src='image_link'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>caption_here</td>
    </tr>
  </tbody>
</table>

Warning!
You should not manually add this component to post or page because it is HTML code snippet used by Blogger for images with caption. Therefore, we recommend you to use the below approach when adding images with caption component manually.

You might be wondering why should you use the table tag just for adding caption to image even though there are figure and figcaption HTML tags available?

Let me sort it out for you! It is because when we add caption to an image through Blogger post editor and not manually by editing HTML, it uses the above code snippet for an image having caption. Therefore, it is necessary to support them.

You can also use the figure and figcaption tags instead of table tag as shown below.

Image caption using figcaption tag.

<!--[ Image with Caption ]-->
<figure>
  <img alt='image_alt' src='image_src'/>
  <figcaption>caption_here</figcaption>
</figure>

Image with Automatic Lightbox

Lighbox helps to scale the image up and make it fully focusable on click. The lightbox also contains the contents of alt attribute of the image when it appears on image click.

Where are you finding the lightbox? Click on this image!

Good to know:

All the images in the post will automatically have a lightbox function if the image is wrapped under a parent container having one of the classnames lbx, separator, psImg, btImg, glImg or satisfies one of the selectors .pS .separator >a, .pS .tr-caption-container td >a, .pS .separator >img, .pS .tr-caption-container td >img, figure img.
If an image with lightbox is wrapped under anchor tag, clicking on image will only open link when lightbox is shown.
To explicitly opt-out automatic lightbox function for a particular image, add attribute data-lightbox='false' to the img tag.
To explicitly opt-out lightbox automatically containing the alt attribute contents, add attribute data-caption='false' to the img tag.

Images with Grid Layout

Grid layout in the context of images typically refers to arranging multiple images in a structured grid format on a webpage or in a document. This layout is popular for galleries, portfolios, or any collection of images where you want to display several images in a neat and organized manner.

<!--[ Images with Grid Layout ]-->
<div class='psImg grImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Images with Show All Function

Used to hide some images and will be shown when the user clicks the Show All button. Show All function can only be activated once, images cannot be hidden again when you activate it.

Show All

<!--[ Images with Show All Function ]-->
<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  
  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='image_alt' src='image_link'/>
    
    <!--[ Button to activate ]-->
    <label for='hideImg1' aria-label='Show all images'>Show All</label>
  </div>

  <!--[ Hide the rest of images here ]-->
  <div class='psImg shImg'>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
    <img alt='image_alt' src='image_link'/>
  </div>
</div>

Images with Scroll Layout

Images with scroll layout typically refers to a design technique where images are displayed in a horizontally or vertically scrolling manner within a container. This approach is often used when you have a collection of images that may exceed the available space on the screen, and you want users to be able to scroll through them.

<!--[ Images with Scroll Layout (Style 1) ]-->
<div class='glImg'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Tips!
You can change the height of the scroll image by adding one of the classnames h150, h200, h250, to the element div.galWrp.

This scroll layout style will only be active in mobile view. Please try opening this page on your mobile device.

<!--[ Images with Scroll Layout (Style 2) ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
  <img alt='image_alt' src='image_link'/>
</div>

Lazyload Image

Useful for delaying loading images so that the blog's PageSpeed score is higher, image will only load when user scrolls to the image area. This feature uses @aFarkas/lazysizes to lazyload images.

<!--[ Lazyload Image ]-->
<img class='lazyload' alt='image_title' data-src='image_link' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Warning!
Never manually lazyload the first image of the post. Doing so, results in unexpected behaviours.
It is also recommended to not to use it, instead you can enable Lazy load images in Blog settings. It will automatically lazyload your post images for you.

External Link

Notifies users if the link will lead to another site.

External Link

<a class='extL' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

Alternative styles:

External Link

<a class='extL alt' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

External Link

<a class='extL sec' href='link_here' rel='nofollow noreferrer noopener' target='_blank'>link_title</a>

Button

Defines buttons that can be clicked by the user.

Button Text

<!--[ Button ]-->
<a class='button' href='link_here'>link_title</a>

Button Text

<!--[ Button outlined ]-->
<a class='button ln' href='link_here'>link_title</a>

Download

<!--[ Button with download icon ]-->
<a class='button' href='link_here'><i class='icon dl'></i>link_title</a>

Demo

<!--[ Button with demo icon ]-->
<a class='button' href='link_here'><i class='icon demo'></i>link_title</a>

Download Link

To provide information about downloaded files to users.

file_name.zip 200kb

<!--[ Download Box ]-->
<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200KiB</span>
  </div>

  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='link_here' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
</div>

Blockquote

Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.
Albert Einstein

<!--[ Standard Blockquote ]-->
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.
Bernard M. Baruch

<!--[ Blockquote (Style 1) ]-->
<blockquote class='s1'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.
Maya Angelou

<!--[ Blockquote (Style 2) ]-->
<blockquote class='s2'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

Note Block

This feature serves to add important info, warning sentences or highlight sentences, there are two styles as shown below.

Info!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note info ]-->
<p class='note'><b>Info!</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Warning!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Note warning ]-->
<p class='note wr'><b>Warning!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

Alert

Similar to Note Block, the only difference is Alert has different style and has more variants:

Default A simple default alert - Lorem ipsum dolor sit amet.

<!--[ Alert default ]-->
<div class='alert'><b>Default</b>
  A simple default alert - Lorem ipsum dolor sit amet.
</div>

Outline A simple outline alert - Lorem ipsum dolor sit amet.

<!--[ Alert outlined ]-->
<div class='alert outline'><b>Outline</b>
  A simple outline alert - Lorem ipsum dolor sit amet.
</div>

Info! A simple info alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant info ]-->
<div class='alert info'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant warning ]-->
<div class='alert warning'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

Success! A simple success alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant success ]-->
<div class='alert success'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

Error! A simple error alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant error ]-->
<div class='alert error'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

Info! A simple info alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant info outlined ]-->
<div class='alert info outline'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

Warning! A simple warning alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant warning outlined ]-->
<div class='alert warning outline'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

Success! A simple success alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant success outlined ]-->
<div class='alert success outline'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

Error! A simple error alert - Lorem ipsum dolor sit amet.

<!--[ Alert variant error outlined ]-->
<div class='alert error outline'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

Table

Using tables is a little more complicated in HTML, we recommend that you learn more about HTML tables before using them. The following is an example of a table with data:

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000

<!--[ Table ]-->
<div class='table sticky bordered stripped hovered'>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>

For table styles, you can add a classname to the .table element, including:

cborder : border for the table container.
bordered / noborder (choose one): table content border.
clr / primary / warning / success / error : background heading table.
stripped : table row stripped style.
hovered : hover table row.
mh100 / mhvh / mh200 / mh300 : max-height of the table in px (exception: mh100 sets height to 100%).
sp5 / sp10 / sp20 : table content padding

stripped and hovered classnames were added in v3.1.0

Steps

Used to define steps for a guide.

step_1
step_2
step_3

<!--[ Steps ]-->
<ol class='steps'>
  <li>step_1</li>
  <li>step_2</li>
  <li>step_3</li>
</ol>

Code Block

Used to define lines of computer code (HTML, CSS, Javascript, etc.) in posts.

<pre data-comment='.html' data-source='src/index.html'><code>escaped_code_here</code></pre>

code tag can be used to define inline code like this: escaped_code_here.

<code>escaped_code_here</code>

kbd tag can be used to define keyboard input like this: ⌘ + A.

<kbd>⌘ + A</kbd>

Inside <code> tag, a part can be marked by wrapping it with <mark> tag.

// mark examples
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");

// mark codes
console.log("<mark>Hello World!</mark>");
console.log("<mark class='block'>Hello World!</mark>");
console.log("<mark class='gray'>Hello World!</mark>");
console.log("<mark class='red'>Hello World!</mark>");
console.log("<mark class='orange'>Hello World!</mark>");
console.log("<mark class='blue'>Hello World!</mark>");
console.log("<mark class='green block'>Hello World!</mark>");
console.log("<mark class='gold'>Hello World!</mark>");
console.log("<mark class='purple'>Hello World!</mark>");
console.log("<mark data-before='Message before'>Hello World!</mark>");
console.log("<mark class='block red' data-after='Message after'>Hello World!</mark>");
console.log("<mark class='green' data-before='$'>Hello World!</mark>");
console.log("<mark data-after='$'>Hello World!</mark>");

Good to know:

You need to use escaped code inside <code> elements, which means you have to replace all & to &, < to < and > to >.
All the code blocks are automatically highlighted using @highlightjs/highlight.js, one of the popular libraries for code highlighting and a custom plugin. Copy button and lines number are also automatically appended.
The library is loaded if and only if there is at-least one code block in the post to make sure we don't make extra requests.
Inline codes are also highlighted.
The library automatically detects the best language matched for your code and highlights it, but sometimes it may not detect the correct language.
If the library is detecting the language incorrectly or you want to explicitly specify the code language, you can add a classname in the manner, the language name prefixed with language-, to the <code> element. For an example, if your code is written in javascript, you can add a classname language-js or language-javascript to the <code> element.

Multi-tabs Code Block

Used to group multiple code blocks together.

[HTML] escaped_code_here

[CSS] escaped_code_here

[JS] escaped_code_here

[JSON] escaped_code_here

<!--[ Multi-tabs Code Block Highlighter ]-->
<div class='pre tabs'>
  <!--[ Active function ]-->
  <input id='preT1-1' type='radio' name='preTab1' checked/>
  <input id='preT1-2' type='radio' name='preTab1'/>
  <input id='preT1-3' type='radio' name='preTab1'/>
  <input id='preT1-4' type='radio' name='preTab1'/>
  
  <!--[ Header/title ]-->
  <div>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT1-1' data-text='HTML'></label>
    <label for='preT1-2' data-text='CSS'></label>
    <label for='preT1-3' data-text='JS'></label>
    <label for='preT1-4' data-text='JSON'></label>
  </div>

  <!--[ Content ]-->
  <pre class='preC1-1' data-source='src/index.html'><code>[HTML] escaped_code_here</code></pre>
  <pre class='preC1-2' data-source='src/style.css'><code>[CSS] escaped_code_here</code></pre>
  <pre class='preC1-3' data-source='src/main.js'><code>[JS] escaped_code_here</code></pre>
  <pre class='preC1-4' data-source='src/rules.json'><code>[JSON] escaped_code_here</code></pre>
</div>

Spoiler

Used to create interactive widgets that the user can open and close on demand. By default this widget is closed, will display the content in it when the user presses the command button. Any content can be included in this widget.

Spoiler:

text_here

<!--[ Spoiler ]-->
<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Accordion

Defines additional content that users can open and close on demand in groups, usually used for a list of questions or FAQs (Frequently Asked Questions).

Title_here

text_here

<!--[ Accordion ]-->
<details class='ac'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Title_here

text_here

<!--[ Accordion (Alternate) ]-->
<details class='ac alt'>
  <summary>Title_here</summary>
  <div>
    <p>text_here</p>
  </div>
</details>

Title_here

text_here

Title_here

text_here

Title_here

text_here

Title_here

text_here

<!--[ Accordion (Grouped) ]-->
<div class='showH'>
  <details class='ac'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Title_here</summary>
    <div>
      <p>text_here</p>
    </div>
  </details>
</div>

FAQs in microdata

A Frequently Asked Question (FAQ) page contains a list of questions and answers pertaining to a particular topic. Properly marked up FAQ pages may be eligible to have a rich result on Search and an Action on the Google Assistant, which can help your site reach the right users.

<!--[ Accordion (FAQPage) ]-->
<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_here</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>text_here</p>
    </div>
  </details>
</div>

Warning!
You cannot use this component at more than one places in a single post or page, consider grouping all of FAQs in a single component.

The TOC (acronym of Table of Contents) helps users quickly navigate through the content of a webpage by providing direct links to different sections. This is especially useful for longer articles or pages with multiple distinct sections.

There are two ways to define a TOC.

Manual Table of Contents

Using Manual TOC is very complicated, you have to add a different id attribute in each heading tag and write it in content list.

Automatic Table of Contents

It is not very easy to use the Manual TOC, therefore we provide an Automatic TOC which looks for all the headings in the post and populate the content list in an organized manner.

Table of Contents

<!--[ Automatic Table of Contents ]-->
<details class='sp toc' open>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='aToc'></div>
</details>

Related posts are links or content suggestions on a webpage that connect to similar topics or articles, helping users discover more relevant information.

There are two ways to define this component.

Manual Related Posts

Manual related posts are selected and added by the author based on relevance, giving full control over the suggestions.

You may want to read this post :

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>
  <ul>
    <li><a href='post_link'>post_title</a></li>
    <li><a href='post_link'>post_title</a></li>
    <li><a href='post_link'>post_title</a></li>
  </ul>
</div>

Automatic Related Posts

Automatic related posts are generated by algorithms using categories, saving time but with less precision.

<!--[ Automatic Related Posts ]-->
<details class='sp arp' open>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='aRel'></div>
</details>

Good to know:

This feature shows a list of posts having a particular label.
To specify a label, add attribute data-label='My Label' to .aRel element.
If attribute data-label is not specified or there is no post with label specified in data-label, then it will fallback to a random label from the current post if it is used in a post otherwise fallback to random label from the blog if used in page.
It will filter out the post which is being viewed.
To set the maximum number of posts, add attribute data-max-posts='6', where 6 is the number of maximum posts.

Lazy YouTube

Loads iframe once the play button is clicked otherwise shows the thumbnail image as placeholder which is lazyloaded using @aFarkas/lazysizes.

<!--[ Lazy YouTube ]-->
<div class='lazyYt' data-embed='video_id'></div>

Good to know:

You can set the iframe ratio as shown below:

<!--[ Lazy YouTube ]-->
<div class='lazyYt' style='--ratio: 4 / 3' data-embed='video_id'></div>

Defer YouTube

Defers iframe loading using @aFarkas/lazysizes.

<!--[ Defer YouTube ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/video_id' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen></iframe>
</div>

Good to know:

You can set the iframe ratio as shown below:

<!--[ Defer YouTube ]-->
<div class='videoYt' style='--ratio: 4 / 3'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/video_id' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen></iframe>
</div>

Essentials

This section does not provide you any components, but contains general HTML code snippet which can be used for different purposes.

Explicit Post Snippet

Post snippet shows a few lines of text content of post. It automatically selects texts from beginning of the post. If you would like to set a custom post snippet, you can add the following code snippet at the beginning of the post:

<!--[ Explicitly sets post snippet ]-->
<div hidden aria-hidden='true'>post_snippet</div>

<!--more-->

Explicit Post Thumbnail

Blogger automatically selects the first image of the post as its thumbnail. If you would like to set custom post thumbnail which should not appear in the post, you can add the following code snippet at the beginning of the post:

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->

You can set custom post snippet and post thumbnail by combining the above two code snippets as shown below:

<!--[ Explicitly sets post snippet ]-->
<div hidden aria-hidden='true'>post_snippet</div>

<!--[ Explicitly sets post thumbnail ]-->
<!--[
  <div class='separator'><img src='image_src'/></div>
]-->

<!--more-->

Header Subtitle

Adds subtitle next to header title in a particular post or page.

<style>
  /* Custom Header subtitle */
  .headH::after{content:'Subtitle'}
</style>

Getting Started and Installation

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:51:00 +0000

In order to download the theme or get support from team, you need to make a purchase through Gumroad. If you have already purchased the theme by other methods or you want to ask something before making a purchase, please contact our core developer Armaan through Telegram or you can email through contact@fineshopdesign.com.

Help us improve this post! English is not my first language, so if you find any mistakes or think something can be explained better, feel free to contact us. Your suggestions are always welcome!

Table of Contents

Download Files

Make sure you have downloaded all the required files from Gumroad after purchasing. If you have not yet downloaded them, follow these steps:

Via Email receipt:

Pull up your email receipt. Click the View content button to go to the product's download page.
If you have not received an email receipt, please check your spam folder. If you still can't locate it, please contact us.
Before being redirected to the download page, you might be asked for your email address. Simply enter the email you used at checkout, and you should be able to access the download page.

Via Gumroad account:

Alternatively, you can create a Gumroad account using the email address you previously bought your product(s) with.
With a Gumroad account, you will be able to access your purchases at any time from your Library.

Download the .ZIP file of latest version and extract it.

If you have purchased the template officially but not through Gumroad, please contact us.

Good to know

Before jumping into Theme Installation guide, it's good to know about basic settings of Blogger such as how to customize or edit HTML. You may need to open these settings multiple times while customizing a blog with custom theme such as Plus UI.

Theme Designer

From Theme Designer page, we can edit basic things such as color/background and length. Default themes additionally allow us to add custom CSS or change font faces. Our theme doesn't allow adding custom CSS and changing font faces through this page due to some limitations.

Steps for navigating to Theme Designer:

Go to Blogger Dashboard.
Navigate to Theme and click on Customize button.
Tips!
Alternatively, you can navigate to Layout and click on Theme Designer link.
You are now on Theme Designer page.
The page should have 3 menus namely Background, Advanced and Gadgets in the left and a preview of the blog home page in the right.
By clicking on Advanced tab, you can select the component you wish to edit from the dropdown menu.

Edit HTML

This feature gives full control of theme modification, allowing us to modify the Theme XML code. This XML code can be considered as the source code because it contains settings and contents as valid Blogger theme markup which is rendered to HTML when a webpage is visited. This XML code generally contains Blogger theme tags, HTML tags, comments and text contents including CSS and JS.

You can also install a theme by overwriting the existing XML code with the new theme's XML code. Keep in mind, this method resets the previous theme's settings and widgets with new theme's default settings and widgets respectively.

Steps for navigating to Theme XML Editor:

Go to Blogger Dashboard.
Click icon next to the Customize button.
Click Edit HTML, you will be redirected to the editing page.

How to directly jump to a widget with specific ID?

To improve the editing process, Blogger provides a feature to jump directly to a specific widget, you can press icon then the widget ID will be displayed, select the widget you want to edit.

Mobile Settings

Basically this feature is used to determine the appearance of the blog when accessed via mobile, the mobile version is marked with ?m=1 at the end of the url and cannot be removed. Most custom themes already support responsive even some premium themes already support Adaptive Layout, therefore mobile settings are no longer needed, we recommend choosing a desktop theme on mobile display.

In Blogger dashboard, click on Theme.
Click icon next to the Customize button.
Click Mobile Settings, in the option 'Want to display Desktop or Mobile theme on mobile devices?' select Desktop.
Click Save

Theme Installation

There are two ways of installing the theme, we recommend you to use second method if you are installing a specific version of theme for the first time.

Requires time!
We recommend you to install theme if you have enough time, you should not leave your blog just by installing the theme. Few customizations need to done immediately after installing the theme. Feel free to reach us in case you get stuck somewhere.

Upload XML

The easiest way to install a Blogger theme is by uploading the .XML file directly:

In Theme menu, click icon next to the Customize button.
Click Restore.
Select the .XML file that you want to upload, click Upload then check for changes to your blog by clicking View Blog or refreshing your blog page directly.

This method will retain the widgets in the previous theme, the final appearance may be different from the theme demo, use the Override XML method to install the theme cleanly.

Override XML

The most recommended way to install a custom theme is to directly overwrite the XML code of the previous theme, but as mentioned earlier, this method will reset all the settings and widgets in the previous theme and replace them with built-in settings and widgets from the new theme.

Warning!
It is highly recommended to back up the previous theme first before using this method.

Removing previous theme

To make sure Blogger doesn't merge previous theme and new theme, we first need to apply a blank theme. We do so to make sure nothing is merged with the new theme.

Copy the following blank theme code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='clean-install.xml' b:templateVersion='0.0.1' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/><head><b:if cond='false'><b:skin><![CDATA[]]></b:skin></b:if></head><body><b:section id='_' maxwidgets='1' showaddelement='false'/></body></html>

Go to Blogger HTML Editor.
Replace all code in the previous theme, right click › Select All (⌘ + A).
Press ⌘ + V to paste all the code that was copied before.
Save the changes by clicking icon on the top right of the HTML Editor.

Applying new theme

Since we have already removed the previous theme using blank theme, you can now use Restore option to upload the new theme, it will be helpful if you are using mobile device. Or you can use the following method:

Open the .XML file from extacted folder in any Text Editor application.
Copy all the theme code that appears, press ⌘ + A › ⌘ + C for quick commands.
Go to Blogger HTML Editor.
Replace all code in the previous theme, right click › Select All (⌘ + A).
Press ⌘ + V to paste all the .XML code that was copied before.
Save the theme by clicking icon on the top right of the HTML Editor.

Next steps

Once you have successfully installed the template, it needs to be customized to adapt your blog. For example, you need to specify your blog favicon manually, add information for meta tags, customize default texts, customize widgets, and more.

Recommendations

We recommend you to do initial customization as soon as you install the template as well as read following guidelines for best practices.

Basic Setup: Things to be done immediately after installing the theme, it includes:
- Adding a favicon: Starting from v3, you need to add your blog favicon manually unlike older versions.
- Setting meta tags: The template automatically adds general meta tags including opengraph and twitter card for you. In few meta tags, we use default texts and image urls, therefore you need to replace them with yours.
Guidelines: Gather information to make sure you follow best practices when using the theme to prevent unexpected errors and behaviours.
- Preferred image ratio and size: Use recommended ratio and sizes for images for different places ensures images do no crop and fit at its placement.
- Optimization: Optimize your blog and posts to prevent unexpected behaviours.
You can read Basic Setup and Guidelines for a detailed information and documentation.
Google Adsense: The theme automatically loads Google Adsense script if your blog is connected with a Google Adsense account from Earning section of your blog.

You can read Google Adsense for a detailed information and documentation.
Google Analytics: The theme automatically loads Google Analytics script if Google Analytics Measurement ID has been already added through Blog Settings.

You can read Google Analytics for a detailed information and documentation.
Setup Pages: Setup basic pages including:
- Contact: You should create a contact page for your blog so that users can easily connect with you.
- Sitemap (optional): The sitemap page shows a list of posts and pages of your blog in an organized manner. You can create one although it is optional. Note that we are talking about sitemap page and not XML sitemap. XML sitemaps are automatically created and updated by Blogger at /sitemap.xml and /sitemap-pages.xml of your blog root.

Before your start using a theme feature, we recommend you to read documentation about it before. If no documentation is available for a particular feature, please reach out to us.

Basic Setup and Guidelines

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:50:00 +0000

Help us improve this post! English is not my first language, so if you find any mistakes or think something can be explained better, feel free to contact us. Your suggestions are always welcome!

Have you just installed the theme? Great! Now it is time to do basic setup and read guidelines.

Generate image url

Throughout this reading, we shall need to generate urls of various images in order to put them at their places. The best method to generate an image url when using this theme is as follows:

Go to Blogger Layout.
Click on pencil icon beside the Image Uploader widget.
Select Upload image from computer.
Upload your image by clicking on Choose file. Wait until image is fully uploaded.
Click on Save button.
Click on pencil icon again.
You can now copy the url available in Image URL field as it is the url of image you have just uploaded.

Meta tags

Meta tags provide important information to browsers and search engines, enhancing SEO and optimizing page display.

Favicon

We know that favicon can be uploaded through Blog settings, but icon uploaded through it is not available in multiple sizes. Therefore, the theme by default doesn't use this icon. You need to explicitly provide url of a png favicon image in order to generate url of same image in multiple sizes for use in meta tags. A dummy image is used as favicon by default.

You would like to change the default favicon. Find the following code snippet in Edit HTML and replace the marked url with your custom favicon url. The image must be of 1:1 ratio with a minimum width of 512px, i.e 512px*512px, 640px*640px, etc.

<Variable name="meta.icon" description="Favicon URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisldTSPR5qQSsrqZDyfYV81HFSq4Pko5u8xpbzKJ7V05CZAaCkfxG550uqbp2xlCxukxcVL4i2so2XxNri-wqqUO0yuVLLznfFes1rdmg7Ywq8pWE8FXwWQfcyrNiAPlyI3_ngX12x7-KGzAVPfjiTWPMP3HdwelG4pn729xMfH05-hdWVbQyaIsgMkQg/s0/favicon.png"/>
[!] Favicon URL
[!] @type {String}
[!] Recommended image ratio: 1:1
[!] If Blank: It will use Favicon URL from Blogger Blog Settings
[!] Warning: Dont't add invalid URL

Use favicon from settings?
If you would like to use favicon which was uploaded through Blog settings, clear the image url in value attribute and make it empty.

Meta Keywords

To add your custom keywords in keywords meta tag, find the following code snippet and replace marked part with your custom keywords separated by comma.

<Variable name="meta.keywords" description="Keywords Meta Tag content" type="string" default="" value="KEYWORD_1, KEYWORD_2, KEYWORD_3"/>
[!] Keywords Meta Tag content (comma-separated)
[!] @type {String}
[!] If Blank: Doesn't add keywords other than page name
[!] Message: Separate multiple keyword with comma

You can clear the marked part if you don't want to add custom keywords.

Meta description

Meta description can be set through Blog settings by toggling the Enable search description and adding your description in Search description field.

For post and pages, you can add your description through Search description field in the sidebar.

Meta default image

Image meta tag uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail or for homepage and other pages.

In order to use a default image for such cases, find the following code snippet in Edit HTML and replace the marked part with your custom image url. The image must be of 16:9 ratio with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc.

<Variable name="meta.image" description="Image Meta Tag URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXcTftM-dWwVR9KOkc8PzPng9FbMz-KC083W_hWFV2t2LA10-l0BtsfTj3J3WL2TrClC8aohb-H2Qn_W2DylQ7R11V71k2SGozHBnjSNAKLEUbKzLW4ALsYwMEjcEGSCIyfGLQwERqsQRFlnTv0wm8M0CkGroeYzpKJ_ZPC6_diPbuINzcP075OzTcF7I/s0/meta-image.png"/>
[!] Image Meta Tag content
[!] @type {String}
[!] Recommended image ratio: 16:9
[!] If Blank: Doesn't add meta tag if any not available
[!] Message: If the view is single item, it will use thumbnail url of item if available
[!] Warning: Don't add invalid URL

Opengraph default image

Opengraph image meta tag uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail or for homepage and other pages.

<Variable name="opengraph.image" description="Open Graph Image URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXxFjLFkLM3eZsKgzpO8R-f3pQPsb-ica2dzqZ-TpJw-fhOsZMG3fUs6UzvcualJbzE9xoUPtqIAI68pQcy9E2IXSFt8SxYEpcaIln78PEZzj1S-iiDp4aJtwNdkImyH5oEtzuzKUxetnUMMjaJWhi6BTLBkNxQX8tUzsL3Q2hqQq_hBF7_w6z5yUYxws/s0/open-graph-image.png"/>
[!] Open Graph Image URL
[!] @type {String}
[!] Recommended image ratio: 16:9
[!] If Blank: Doesn't add meta tag if any not available
[!] Message: If the view is single item, it will use thumbnail url of item if available
[!] Warning: Don't add invalid URL

Tips!
You can also use the same image url used in Meta default image.

Twitter Card default image

Twitter card image meta tag uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail or for homepage and other pages.

<Variable name="twitter.image" description="Twitter Card Image URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg31MuIa565c6YDVhaRleYhJeby_kBMwkr0CTcf27hP0n3b71IPnvFtkVhSIveXiBSMZ56AzX_-s5PqayrsuY7LYwJiX1P2u0acO1kiCjIuPzQ0e3uSsqATTI_2zlbHaJ48e_oZvwwZgBhTjpHJnnKiXeWF2Pwco8UHeZoP-M7bLskRArbe9Td_Ve_B1iI/s0/twitter-card-image.png"/>
[!] Twitter Card Image URL
[!] @type {String}
[!] Recommended image ratio: 16:9
[!] If Blank: Doesn't add meta tag if any not available
[!] Message: If the view is single item, it will use thumbnail url of item if available
[!] Warning: Don't add invalid URL

Tips!
You can also use the same image url used in Meta default image or Opengraph default image.

Rich Results

To avoid errors in Google Rich Results Test, we have added url of dummy images. However you can replace them with your custom image urls.

Schema organization logo

Find the following code snippet in Edit HTML and replace the marked url with your custom logo url. The logo must be of 1:1 ratio with a minimum width of 512px, i.e 512px*512px, 640px*640px, etc.

<Variable name="metadata.organizationLogo" description="Metadata Organization Logo" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLYXKas2Slg6XQSDnVv2sZp3WrBMgpRTTNdEEmBCO54XHW3kmftJKJMU-CrNBEwOn0CU1J-KwAeGuS-ETuCpXhZob0AYrl789Lrwu_T_CDJYJ2k1hOQ-ur_Ek-iEAIm5-0C-nMjY8DtWtfyZfRaOXJC8mdBvdunVCbObp9ra6rMrcSg7jGCf298UE13as/s0/organization-logo.png"/>
[!] Metadata Organization Logo
[!] @type {String}
[!] Recommended image ratio: 1:1
[!] Warning: Don't add invalid URL

Default schema thumbnails

Article schema uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail.

In order to use a default thumbnail image for such cases, find the following code snippet in Edit HTML and replace the marked part with your custom thumbnail image url. The image must be of 16:9 ratio with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc.

<Variable name="metadata.defaultThumbnail" description="Metadata Default Thumbnail" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvC6vD6OtRfm9LfBlmnU43YBdoPU22C5TbYwdvBh-tcs70b-uyK7D_iri6WRtUUrtvSrhJrp5vo3IQTo-ta0t_J1VrozfN3ZdCapfbhEKcqMgphQeM3clXm8goom0uOKITSosfDKij6h9AUyYyZ7-nliDKV5EOiE9YyzFA_yW1vtud1lIt_mgTxGpBHUA/s0/metadata-default-thumbnail.png"/>
[!] Metadata Default Thumbnail
[!] @type {String}
[!] Recommended image ratio: 16:9
[!] Warning: Don't add invalid URL

Article schema

The theme uses Article schema type for blog pages and BlogPosting schema type for blog posts. You can also add a label News to a post in order to use NewsArticle schema type for that post.

Image ratios

This section gives you information about what ratio and size of images you should use.

Post thumbnail

To make sure your images do not get cropped on social platforms' previews, thumbnails, etc. We decided to use images of fixed ratio everywhere where post thumbnails are used.

We recommend using images of 16:9 with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc. as your post or page thumbnails. For post images other than the thumbnail, feel free to use images of any ratio or size.

Carousel image

To make sure carousel images do not get cropped, use images of 5:2 ratio with a minimum with of 1080px, i.e. 1080px*432px, 1920px*768px, etc.

Footer logo

For footer logo, use an image of 1:1 ratio with a minimum width of 512px, i.e. 512px*512px, 640px*640px, etc.

Best practices

This section will guide you best practices to prevent issues and errors.

HTTPS protocol

You must always serve your pages over https protocol and not http. Therefore, make sure you have enabled HTTPS redirects in your Blog Settings.

Optimization

This section will guide you for optimization of your blog when using this theme.

Use Paragraphs

We highly recommend you to use Paragraph over Normal when writing a paragraph of your post since it's the only right way. Normal uses div tags for post text contents while Paragraph uses p tags. For paragraphs, p tags are recommended.

Jump breaks

In the year 2009, Blogger introduced the Jump Breaks. With Jump Breaks you can show just a snippet of your post on your blog's index page. Blogger will insert a Read more link to the full post page where your readers can keep reading.

It is highly recommended to add Jump Breaks after first or second paragraph of every posts. There are two ways of adding Jump Breaks to your post. The first way is by clicking on Insert Jump Break icon in Compose view and the second way is to add  in HTML view.

Warning!
If you don't add jump breaks in your posts, things may break if any of your posts has too much contents. The pagination will not work as expected, the number of posts you want to show on index page will not be respected, none of your posts will be displayed on index page and many other unexpected behaviours. This doesn't apply only to our theme!

WebP image serving

Blogger recently added an option WebP image serving in Blog Settings, it can be toggled on to automatically serve post images in WebP formats. Blogger does it by automatically adding the rw parameter to post images. It improves the performance of the webpages.

It is recommended to toggle on WebP image serving from Blog Settings.

Defer off-screen images

Blogger recently added an option Lazy load images in Blog Settings, it can be toggled on to automatically lazy load post images. The post images will only be loaded when reader scrolls to those particular images. Blogger does it by automatically adding loading='lazy' to all the post images. It improves the performance of the webpages.

It is recommended to toggle on Lazy load images from Blog Settings.

Custom robots.txt

If custom robots.txt option in Blog Settings is disabled, Blogger serves default robots.txt. But default robots.txt disallows bots to crawl all pages of and under /search segment which includes blog page (i.e. /search) and label pages as well (i.e. /search/label/Product), which is probably what you don't want.

To fix this, we can use robots.txt with custom rules allowing bots to crawl these pages as well. You can use the following custom robots.txt if you don't have idea about how does this work, otherwise feel free to write your own or modify it.

# all user agents
User-agent: *

# exclude pagination and query pages
Disallow: /search*updated-max=*
Disallow: /search*max-results=*
Disallow: /search*q=*

# include everything else
Allow: /

# sitemaps
Sitemap: https://www.example.com/sitemap.xml
Sitemap: https://www.example.com/sitemap-pages.xml

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: https://www.example.com/sitemap.xml

Widgets and Plugins

The theme contains many widgets that doesn't mean you have to use all of them. You should enable or disable them depending on your needs.

For example, if you think Bookmark Posts widget is unnecessary, go ahead and disable it through Layout. Another example, you may not need Google Translate since major modern browsers have in-built page translator.

Custom codes

This section will guide you to add custom codes in the theme. We recommend you add custom codes as described below for better managements.

Warning
Since you are adding your custom codes, we will not be responsible for any issues caused by it.

If you want to place HTML codes just above to </head>, i.e. external CSS or JavaScript:

Go to Blogger HTML Editor.

Find the following two lines of code and add your custom HTML in-between it.

<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>

If you want to place HTML codes just above to </body>, i.e. external JavaScript:

Go to Blogger HTML Editor.

Find the following two lines of code and add your custom HTML in-between it.

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



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

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

<script src='/register-sw.js'></script>

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

Custom meta tags

Custom meta tags can be added through Blogger HTML Editor.

Go to Blogger HTML Editor.

Find the following two lines of code and add your custom meta tags in-between it.

<b:comment><!--[ <!> [below] Custom Meta tags (Global) ]--></b:comment>



<b:comment><!--[ <!> [above] Custom Meta tags (Global) ]--></b:comment>

<b:comment><!--[ <!> [below] Custom Meta tags (Global) ]--></b:comment>

<meta name='google-site-verification' content='.......' />

<b:comment><!--[ <!> [above] Custom Meta tags (Global) ]--></b:comment>

Custom CSS

We do not recommend to add custom CSS through Theme Designer as the theme does not support adding CSS through Theme Designer. You need to add your custom CSS through Blogger HTML Editor.

You are supposed to add your CSS without wrapping it in the <style> tag.

Go to Blogger HTML Editor.
Find the following line of code and add your custom CSS below it.
```
/*--[ Custom CSS Global (NO AMP) ]--*/
```
```
/*--[ Custom CSS Global (NO AMP) ]--*/

/* my custom widget css */
.my-custom-widget{}
```
Tips!
Along with CSS, add a helpful comment which describes the use of custom added CSS.

Custom JavaScript

Custom JavaScript can be added through Blogger HTML Editor. There are two places where you can add your custom JavaScript. First one executes in head which means document.body will not be defined. Second one executes after all document's static elements are loaded, this is where we recommend you to add your JavaScript code.

You are supposed to add your JavaScript without wrapping it in the <script> tag.

Go to Blogger HTML Editor.

Find the following line of code and add your custom JavaScript below it.

/*--[ Custom JS Global (placed above </body>) ]--*/

/*--[ Custom JS Global (placed above </body>) ]--*/

console.log(document.body) // HTMLBodyElement

If you want your JavaScript to be executed in head (before document.body is defined), you can instead add your JavaScript below the following line of code:

/*--[ Custom JS Global (placed above </head>) ]--*/

/*--[ Custom JS Global (placed above </head>) ]--*/

console.log(document.body) // undefined

Appearance and Customization

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:49:00 +0000

Help us improve this post! English is not my first language, so if you find any mistakes or think something can be explained better, feel free to contact us. Your suggestions are always welcome!

Default mode

Light mode is used as default mode. To change it to Dark or System, you can follow these steps:

Go to Theme Designer.
Click on Advanced tab.
From the dropdown list, select Style: Appearance.
Change the length of Default Mode to 1px, 2px or 3px in order to use Light, Dark or System as default mode.

Custom fonts

Fonts are loaded dynamically by theme based on few conditions in order to improve PageSpeed score.

You can either use a web-safe font (built into most browsers) or import a custom font from sources like Google Fonts or other CDNs.

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.

Navigation Menu Customization

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:48:00 +0000

Help us improve this post! English is not my first language, so if you find any mistakes or think something can be explained better, feel free to contact us. Your suggestions are always welcome!

The navigation menu is available in two versions, namely the default menu with additional dropdowns and an alternative menu without dropdowns, the default menu can only be edited via Edit HTML.

Go to Blogger HTML Editor.

Search for <b:includable id='items-mainMenu'>, which looks something like the following:

<!--[ Navigation Menu Items ]-->
<b:includable id='items-mainMenu'>
  ...
</b:includable>

You can edit your navigation menu items between <b:includable id='items-mainMenu'> and </b:includable>. There are few items added by default, feel free to remove it and add your owns.

Standard menu

To add a standard menu, you can add the following code snippet by replacing marked parts with appropriate values:

<!--[ Standard menu ]-->
<li>
  <!--[ Change attribute href='#' to add url ]-->
  <a aria-label='Standard Menu' href='#' itemprop='url'>
    <!--[ Icon ]-->
    <b:include name='svg.folder-2'/>
    <!--[ Title ]-->
    <span itemprop='name'>Standard Menu</span>
  </a>
</li>

Dropdown menu

There are few dropdown menu styles you can use as follows:

Without icon in sub-menus

You can use this style if you do not want to add svg icons for sub-menus. You can add the following code snippet by replacing marked parts with appropriate values. Please note that svg icon for the toggle button is required to be added.

<!--[ Dropdown Menu ]-->
<li>
  <input id='nav-drop-1' type='checkbox' checked=''/>
  <label aria-label='Sub Menu' for='nav-drop-1' role='button'>
    <!--[ Icon ]-->
    <b:include name='svg.folder-2'/>
    <!--[ Title ]-->
    <span>Sub Menu</span>
  </label>
  <ul>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 01' href='#' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 01</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 02' href='#' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 02</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 03' href='#' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 03</span>
      </a>
    </li>
  </ul>
</li>

With icon in sub-menus

The code snippet for it is similar to above, you only have to add your svg icon code above the title in sub-menu as shown below:

<!--[ Dropdown Menu ]-->
<li>
  ...
  <ul>
    ...
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 01' href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 01</span>
      </a>
    </li>
    ...
  </ul>
</li>

Sub-menus at top level

Toggle button becomes small and sub-menu behave same as standard menu but they can still be collapsed/expanded by clicking on the toggle button. You can add the following code snippet by replacing marked parts with appropriate values. Note that sub-menus are required to have svg icon.

<!--[ Dropdown Menu (Sub Menu at Top level) ]-->
<li class='mr'>
  <input id='nav-drop-3' type='checkbox' checked=''/>
  <label aria-label='More...' for='nav-drop-3' role='button'>
    <!--[ Title ]-->
    <span>More...</span>
  </label>
  <ul>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 01' href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 01</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 02' href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 02</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 03' href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 03</span>
      </a>
    </li>
  </ul>
</li>

Customizing further

If you want to make more customizations to Navigation Menu like changing its width for desktop view, changing text color, etc. you can do that from Theme Designer.

Go to Blogger Theme Designer.
Click on Advanced tab.
From dropdown selection list, select Style: Navigation Menu.

How to keep Navigation Menu expanded by default for desktop view?

The option to change this behaviour was added in v3.1. You can find this option if and only if you are using v3.1 or above.

Navigate to Style: Navigation Menu as described above, set the length of Navbar default state (Desktop) to 1px or 2px to keep the navigation menu in desktop view collapsed or expanded respectively.

From where I can get SVG icons?

You can find few SVG icons here.

Comment Settings and Integrations

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:47:00 +0000

We provide first class support for Blogger, Disqus and Facebook comments on posts and pages. Not only that, you can use multiple comments platforms at the same time and these comments are available on AMP pages as well.

To customize comments, navigate to Comments Plugin through Theme Designer.

Go to Blogger Theme Designer.
Click on Advanced tab.
From dropdown selection list, select Plugin: Comments.

Blogger comments

This section will guide you to customize Blogger comments.

Comments on pages

By default, comments are enabled for pages as well. They can be disabled or enabled by setting the length of Comments on pages to 1px or 2px respectively.

Iframe style

This option has been removed as of v3.2.0.
Blogger deprecated (without notification) Legacy style in February 2025, don't make any changes to this option. If you have been using Legacy style, switch back to Modern style. Since blogger comments on AMP pages explicitly use Legacy style in order to make comments compatible with AMP as Modern style doesn't work well on AMP, blogger comment forms will not work on AMP pages and might show Google logo.

There are two styles of iframe available for comments form embed, generally Legacy and Modern. By default, it is set to Modern style.

You can change the iframe style to Legacy or Modern by setting the length of Blogger Iframe Style to 1px or 2px respectively.

For AMP variant of pages, it will explicitly use the Legacy style because Modern style doesn't work well on AMP pages.

Pop-up style

Blogger comments uses pop-up style by default.

This can be disabled or enabled by setting the length of Comments Popup to 1px or 2px respectively.

For AMP variant of pages or if multiple comments platforms are enabled at the same time, Pop-up style will be automatically disabled.

Expanded replies

Comments' replies are expanded by default. You can choose whether to collapse or expand replies to a comment by setting the length of Expanded replies to 1px or 2px respectively.

Comment media parsers

Comment media parsers is a Blogger comment form tool which allows commenter to add Quotes, Images, Inline code, Code block and Name tag. By default, it is enabled.

Comment media parsers can be disabled or enabled by setting the length of Comment media parsers to 1px or 2px respectively.

Allow images

This option when enabled, renders <i rel='image'>image_link_here</i> in comment body as <img src='image_link_here'> allowing commenters to put images in comments.

This is enabled by default. If you want to disable or enable it, set the length of Allow Images to 1px or 2px respectively.

Allow links

This option when enabled, renders HTML anchor tags <a> if it exists in comments body. This can be useful to prevent commenters from putting links in the comment body in order to reduce spam links.

This is disabled by default. If you want to disable or enable it, set the length of Allow Links to 1px or 2px respectively.

Note!
This option does not effect on author's comments, allowing them to put anchor tags irrespective of this option is disabled or enabled.

Disqus comments

In order to enable Disqus comments, you need to specify your disqus shortname first. Find the following code snippet in Edit HTML and add your disqus shortname.

<Variable name="disqus.shortname" description="Disqus shortname" type="string" default="" value=""/>
[!] Disqus shortname
[!] @type {String}
[!] Warning: Don't add invalid disqus shortname

<Variable name="disqus.shortname" description="Disqus shortname" type="string" default="" value="xxxxxxxxx"/>
[!] Disqus shortname
[!] @type {String}
[!] Warning: Don't add invalid disqus shortname

Now coming back to Comments Plugin settings, you can disable or enable Disqus comments by setting the length of Disqus Comments to 1px or 2px respectively.

If you want only disqus comments to appear, set the lengths of Blogger Comments and Facebook Comments to 1px in order to disable Blogger comments and Facebook comments respectively.

Facebook comments

Facebook comments can be disabled or enabled by setting the length of Facebook Comments to 1px or 2px respectively.

Links related to Facebook comments :

Facebook comments plugin - Meta for developers

Pagination Settings

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:46:00 +0000

The pagination plugin can be configured through Blogger Theme Designer.

Go to Blogger Theme Designer.
Click on Advanced tab.
From the dropdown selection list, select Plugin: Pagination.

Blog pagination

Blog pagination allows users to navigate through a list of posts displayed on the homepage, search results, label searches, or blog archives.

There are four types of blog pagination available: Default, Infinite, Numbered, and Auto. By default, it is set to Auto.

The behaviors of these blog pagination types are as follows:

Default: Displays three buttons for pagination: Newest, Homepage, and Oldest.
Infinite: Displays a single Load more button that, when clicked, appends the next set of posts to the end of the current list on the same page.
Numbered: Available only for all posts and label search pages. Displays a series of numbered buttons (e.g., 1, 2, 3, ...), allowing users to jump to specific pages of posts.
Auto: Functions like the default to numbered pagination. If it fails to load the numbered pagination, it falls back to the Infinite pagination method.

To switch between blog pagination types, change the length of Blog Pagination Type to 1px, 2px, 3px or 4px for Default, Infinite, Numbered or Auto respectively.

For AMP variant of pages, always Default blog pagination type is used.

The Infinite blog pagination also has three types: Click, Scroll and Click then Scroll. By default, it is set to Click.

The behaviors of these infinite pagination types are as follows:

Click: User needs to click on Load more button to load more posts.
Scroll: Automatically keeps loading more posts whenever user reaches the end of posts list.
Click then Scroll: User needs to click on Load more button for the first time, and next time whenever reaches the end of posts list, automatically loads more posts.

To switch between infinite pagination types, change the length of Infinite Pagination Type to 1px, 2px or 3px for Click, Scroll or Click then Scroll behaviours respectively.

Post pagination

Post pagination is used display the previous and next article links at the end of the article. By default, it is enabled.

Post pagination can be disabled or enabled by setting the length of Post Pagination to 1px or 2px respectively.

Google Adsense

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:45:00 +0000

We recommend you to use built-in Adsense plugin to load script instead of adding the script manually because it allows you to put ad units on AMP pages.

Setup Adsense plugin

Good to know Adsense script will be automatically loaded if your blog is connected with an Adsense account.

In case your blog is not connected with an Adsense account or you want to use different publisher id to load script, you can find the following code snippet in Edit HTML and add your publisher id.

<Variable name="adsense.clientId" description="Adsense Client Id" type="string" default="" value=""/>
[!] Adsense Client Id
[!] @type {String}
[!] If Blank: It will be automated if Blog is connected with Adsense Account
[!] Warning: Only digits are allowed

<Variable name="adsense.clientId" description="Adsense Client Id" type="string" default="" value="0000000000000000"/>
[!] Adsense Client Id
[!] @type {String}
[!] If Blank: It will be automated if Blog is connected with Adsense Account
[!] Warning: Only digits are allowed

Only digits part of publisher id should be added i.e. you only have to add 0000000000000000 by removing ca-pub- from ca-pub-0000000000000000.

Note that you don't have to add any of the following code snippets anywhere in the Edit HTML which is recommended by Adsense because it will be automatically added for you with the publisher id specified above.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000"
     crossorigin="anonymous"></script>

<script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>

<amp-auto-ads type="adsense"
        data-ad-client="ca-pub-0000000000000000">
</amp-auto-ads>

Although it is recommended to use AdSense plugin to load script, if you still decided to manually put adsense scripts, you first need to disable the plugin before you do so by setting the length of Enable Script to 1px in plugin settings.

When adding manual ad unit, you must remove the marked part as shown below when using loading type other than Normal to prevent loading of script multiple times, otherwise it is optional to remove.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000"
     crossorigin="anonymous"></script>
<!-- Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Change script loading behaviour

By default script is loaded normally which may impact the PageSpeed Insights Performance. If you don't want performance to be slow, you can switch between script loading behaviour.

The plugin provides 4 types of script loading, generally Normal, Defer, Lazy and Defer + Lazy. The default type is set to Normal.

Behaviours of these loading types are as follows:

Normal: Loads script normally by adding it above </head>. It impacts PageSpeed Insights performance.
Defer: Loads script dynamically after page load. It impacts PageSpeed Insights performance.
Lazy: Loads script dynamically on user interaction for the first time and next time it instantly loads script. It doesn't impact PageSpeed Insights performance.
Defer + Lazy: Same as Lazy but it makes sure page is loaded first. It doesn't impact PageSpeed performance.

When using any script loading type other than Normal, the earnings may be impacted a little bit as script loading is delayed which in turn delay the loading of ads or sometimes they don't display. All types have advantages as well as disadvantages, choose it wisely.

To switch between loading types, follow these steps:

Go to Theme Designer.
Click on Advanced tab.
From the dropdown selection list, select Plugin: Google Adsense.
Change the length of Load Type to 1px, 2px, 3px or 4px for Normal, Defer, Lazy or Lazy + Defer respectively.

You must always use Normal loading type if your site is not yet approved by Google Adsense. It is because other loading type dynamically loads script which cannot be detected by any crawlers resulting in Google Adsense not verifying your site.

Disable Adsense plugin

If you don't want to load Adsense script or want to explicitly add script tags. You can disable the Adsense plugin to prevent theme to load script for you.

Go to Theme Designer.
Click on Advanced tab.
From the dropdown selection list, select Plugin: Google Adsense.
Change the length of Enable Script to 1px or 2px to disable or enable respectively.

If you intend to disable the Adsense plugin to manually add script tags through Edit HTML, be careful if you have enabled the AMP plugin. We always recommend you to use the Adsense plugin to load Adsense script as it handles both AMP and Non-AMP script.

Manual Ad units

There are few ad widgets in the form of LinkList in layout from where you can add your ad unit code. You can add both Non-AMP and AMP ad unit through the same widget. These widgets are listed below.

Under Header Ad
Sticky Ad
Above Pinned Post Ad
Above Posts Ad
Below Posts Ad
Anchor Ad

Tips!
The above ad units can be configured to display only on mobile devices by adding [Mobile] in it's title, or only on desktop devices by adding [Desktop] in it's title. For example, to display anchor ad only on mobile devices, we haved added [Mobile] in its title making it Anchor Ad [Mobile]; and to display sticky ad only in desktop devices, we have added [Desktop] in its title making it Sticky Ad [Desktop].
The anchor ad can be moved to top by adding [Top] in its title, i.e. Anchor Ad [Mobile][Top].

Warning!
There are many manual ad unit widgets and placeholders, that doesn't mean you have to enable all of them. Make sure your site content and number of manual ads are both balanced.

Non-AMP Ad Unit

To add a Non-AMP ad unit in widget, edit the link with Site Name noamp and put your ad code as its Site URL by replacing existing content. A Non-AMP ad unit code snippet looks something like the following:

<!-- Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

AMP Ad Unit

If you are using experimental Linked AMP Lite, you can add Ad Unit for AMP variant of the pages in the ad widgets. To do so, edit the link with Site Name amp and put your amp ad code as its Site URL by replacing existing content. An AMP ad unit looks something like the following:

<amp-ad width="100vw" height="320"
     type="adsense"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-auto-format="rspv"
     data-full-width="">
  <div overflow=""></div>
</amp-ad>

Anchor ad

When adding display ad unit code to anchor ad unit widget, make sure attributes data-ad-format="horizontal" and data-full-width-responsive="false" are set to the <ins> tag. The Non-AMP ad unit code for anchor ad should look like as below:

<!-- Anchor Ads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="horizontal"
     data-full-width-responsive="false"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

We recommend you to disable this widget if there are already few ad units available in initial viewport or you have enabled auto anchor ad. While we provide option to add AMP ad unit to this widget, it is recommended that you do not add AMP ad unit in this widget.

Post middle ads

Post middle ads is used to append ad units in the middle of articles contents automatically. To add an ad unit to this widget, find the LinkList widget with title Post middle ads. You can either create a new link or edit existing one.

The Site name denotes the CSS selector after which the ad unit should be appended. The selector selects all the elements within the context of the parent post body element. For example, if you want to append the ad unit just after the 6th child paragraph, you can use :scope > p:nth-of-type(6); or if you want to append the ad unit after every 6th child paragraph, you can use :scope > p:nth-of-type(6n).

Use Paragraphs We highly recommend you to use Paragraph over Normal when writing a paragraph of your post since it's the only right way. Normal uses div tags for post text contents while Paragraph uses p tags. For paragraphs, p tags are recommended. If you use Normal, the middle post ads will not append ads since we are selecting p tags and not div.

The Site URL denotes the ad unit that will be appended. Put your ad unit code in this field, or replace the existing content with your ad unit code if you are editing an existing link.

This ad widget is not supported for AMP variant of the pages.

In-feed ads

These ads are displayed between the list of posts. This ad unit cannot be configured through the layout, but through Edit HTML.

This ad unit does not work well everytime, please enable it if you are not concerned about it.

Go to Blogger HTML Editor.

Find the following code snippet and make the changes as shown in second tab.

<!--[ In-feed ad ]-->
<b:includable id='post-adIn'>
  <b:if cond='!data:amp.active'>

    <!--<div class='ntry pAdIf show-if-js'>

      <b:comment>[NO AMP] In-feed ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (In-feed Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>

<!--[ In-feed ad ]-->
<b:includable id='post-adIn'>
  <b:if cond='!data:amp.active'>

    <div class='ntry pAdIf show-if-js'>

      <b:comment>[NO AMP] In-feed ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-format='fluid' data-ad-layout-key='-xx+xx+xx-xx+xx' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

  </b:if>
</b:includable>

Bottom article ad

The bottom article ad is used to display an ad unit at the bottom of every artcle. This ad unit cannot be configured through the layout, but through Edit HTML.

Go to Blogger HTML Editor.

Find the following code snippet and make the changes as shown in second tab.

<!--[ Bottom article ad ]-->
<b:includable id='post-adBot'>
  <b:if cond='!data:amp.active'>

    <!--<div class='pAd show-if-js'>

      <b:comment>[NO AMP] Bottom article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Bottom Article Ad)&quot;'/>

    </div>-->

    <b:else/>

    <!--<div class='pAd'>

      <b:comment>[AMP] Bottom article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Bottom Article Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>

<!--[ Bottom article ad ]-->
<b:includable id='post-adBot'>
  <b:if cond='!data:amp.active'>

    <div class='pAd show-if-js'>

      <b:comment>[NO AMP] Bottom article ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <!--<div class='pAd'>

      <b:comment>[AMP] Bottom article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Bottom Article Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>

If you are using experimental AMP feature, you can further modify the code to add an AMP ad unit.

<!--[ Bottom article ad ]-->
<b:includable id='post-adBot'>
  <b:if cond='!data:amp.active'>

    <div class='pAd show-if-js'>

      <b:comment>[NO AMP] Bottom article ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <!--<div class='pAd'>

      <b:comment>[AMP] Bottom article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Bottom Article Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>

<!--[ Bottom article ad ]-->
<b:includable id='post-adBot'>
  <b:if cond='!data:amp.active'>

    <div class='pAd show-if-js'>

      <b:comment>[NO AMP] Bottom article ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <div class='pAd'>

      <b:comment>[AMP] Bottom article ad code here</b:comment>
      <amp-ad width='100vw' height='320' type='adsense' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-auto-format='rspv' data-full-width=''>
        <div overflow=''></div>
      </amp-ad>

    </div>

  </b:if>
</b:includable>

Matched content ad

The matched content ad is displayed below the Related posts. This ad unit cannot be configured through the layout, but through Edit HTML.

Go to Blogger HTML Editor.

Find the following code snippet and make the changes as shown in second tab.

<!--[ Matched content ad ]-->
<b:includable id='post-relatedAd'>
  <b:if cond='!data:amp.active'>

    <!--<div class='rAd relatedPosts show-if-js'>

      <b:comment>[NO AMP] Matched content ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Matched Content Ad)&quot;'/>

    </div>-->

    <b:else/>

    <!--<div class='rAd relatedPosts'>

      <b:comment>[AMP] Matched content ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Matched Content Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>

<!--[ Matched content ad ]-->
<b:includable id='post-relatedAd'>
  <b:if cond='!data:amp.active'>

    <div class='rAd relatedPosts show-if-js'>

      <b:comment>[NO AMP] Matched content ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <!--<div class='rAd relatedPosts'>

      <b:comment>[AMP] Matched content ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Matched Content Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>

If you are using experimental AMP feature, you can further modify the code to add an AMP ad unit.

<!--[ Matched content ad ]-->
<b:includable id='post-relatedAd'>
  <b:if cond='!data:amp.active'>

    <div class='rAd relatedPosts show-if-js'>

      <b:comment>[NO AMP] Matched content ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <!--<div class='rAd relatedPosts'>

      <b:comment>[AMP] Matched content ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Matched Content Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>

<!--[ Matched content ad ]-->
<b:includable id='post-relatedAd'>
  <b:if cond='!data:amp.active'>

    <div class='rAd relatedPosts show-if-js'>

      <b:comment>[NO AMP] Matched content ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <div class='rAd relatedPosts'>

      <b:comment>[AMP] Matched content ad code here</b:comment>
      <amp-ad width='100vw' height='320' type='adsense' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-auto-format='rspv' data-full-width=''>
        <div overflow=''></div>
      </amp-ad>

    </div>

  </b:if>
</b:includable>

Best practices

Before you integrate Adsense on your site, we recommend you to gather more information and read about ad placements and policies related to it.

Adsense policies

We recommend you to read AdSense Program policies and Ad placement policies.

Avoid custom parallax effects ads

AdSense policies require that ads are placed in a standard, non-intrusive manner. Parallax effects could be seen as manipulating ad placement to draw excessive attention, which may violate the policy of ads blending naturally with content without overly distracting users.

Do not follow unofficial guides blindly

There are many tutorials available on internet related to Adsense. Before you follow them or implement any codes from there, make sure they are both engaging and policy-compliant.

Google Analytics

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:44:00 +0000

Setup Analytics plugin

Analytics script will be automatically loaded if Google Analytics Measurement ID is set in Blog Settings.

You can either add your Google Analytics 4 Measurement ID through Blog Settings or you can explicitly set it by finding the following code snippet in Edit HTML and add your measurement id.

<Variable name="analytics.accountNumber" description="Google Analytics GA-4 Tracking Code" type="string" default="" value=""/>
[!] Google Analytics GA-4 Tracking Code
[!] @type {String}
[!] If Blank: Tracking Code is added from Blogger Blog Settings
[!] Example: G-0000000H00

<Variable name="analytics.accountNumber" description="Google Analytics GA-4 Tracking Code" type="string" default="" value="G-XXXXXXXXXX"/>
[!] Google Analytics GA-4 Tracking Code
[!] @type {String}
[!] If Blank: Tracking Code is added from Blogger Blog Settings
[!] Example: G-0000000H00

Note that you don't have to add any of the following code snippets anywhere in the Edit HTML which is recommended by Analytics because it will be automatically added for you with the measurement id specified above.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

Change script loading behaviour

By default script is loaded normally which may impact the PageSpeed Insights Performance. If you don't want performance to be slow, you can switch between script loading behaviour.

The plugin provides 4 types of script loading, generally Normal, Defer, Lazy and Defer + Lazy. The default type is set to Normal.

Behaviours of these loading types are as follows:

Normal: Loads script normally by adding it above </head>. It impacts PageSpeed Insights performance.
Defer: Loads script dynamically after page load. It impacts PageSpeed Insights performance.
Lazy: Loads script dynamically on user interaction for the first time and next time it instantly loads script. It doesn't impact PageSpeed Insights performance.
Defer + Lazy: Same as Lazy but it makes sure page is loaded first. It doesn't impact PageSpeed performance.

When using any script loading type other than Normal, it may sometimes not track events as script loading is delayed, not only that user visiting site for the first time need to interact with the page to load script in case of Lazy and Defer + Lazy types. All types have advantages as well as disadvantages, choose it wisely.

To switch between loading types, follow these steps:

Go to Theme Designer.
Click on Advanced tab.
From the dropdown selection list, select Plugin: Google Analytics.
Change the length of Load Type to 1px, 2px, 3px or 4px for Normal, Defer, Lazy or Lazy + Defer respectively.

Disable Analytics plugin

If you don't want to load Analytics script or want to explicitly add script tags. You can disable the Analytics plugin to prevent theme to load script for you.

Go to Theme Designer > Advanced > Plugin: Google Analytics and set Enable Script to 1px in order to disable in-built Analytics plugin.

If you intend to disable the Analytics plugin to manually add script tags through Edit HTML, be careful if you have enabled the AMP plugin. We always recommend you to use the Analytics plugin to load Analytics script as it handles both AMP and Non-AMP script.

Google Translate

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:43:00 +0000

🧪 Experimental feature!
Google Translate plugin is an experimental feature. We need your feedback to improve it further and make it stable.

Google Translate widget can be customized through Layout.

Go to Blogger Layout.
Find the LinkList widget with title Google Translate, if you have not renamed it.

Good to know:

The language specified in Blog Settings will be considered as Page Language.

System language

It can be used to automatically select the language based on browser language.

To add it in the language selection list, create a link or edit existing link in the widget having Site name system with the button text as its Site URL. You can use # or custom_text in Site URL to use default text, i.e. System Language.

Default language

When system language is enabled, you can choose whether page language or system language should be used as default.

To set page language or system language as default, create a link or edit existing link in the widget having Site name default with page or system as its Site URL respectively.

Language list

To add a new language to the language selection list, you can create a link with language code as its Site name and language name as its Site URL. You can also use # or custom_text in Site URL to use default text. Following is a list of available language codes along with its respective names.

How to prevent a section from being translated?

To prevent an element from being translated by Google Translate, simply add a classname notranslate to it.

For an example, following element will not be translated:

<div class='notranslate'>
  <p>This paragraph will not be translated.</p>
</div>

Progressive Web App

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:42:00 +0000

Progressive Web App plugin is now stable!
Initially introduced as an experimental feature in v3.0.0, the PWA plugin has been fully stabilized starting from v3.2.0. We still welcome your feedback to make it even better!

Blogger doesn't provide a native way to enable Progressive Web App as we cannot upload assets such as manifest.json, serviceworker.js, etc.

Our theme is the first in Blogger to natively implement Progressive Web App (PWA) functionality, proudly eliminating the need for third-party services, with only the Offline Page and Push Notifications not supported.

Checkout these Blogger community threads regarding PWA:

When using our theme, you can enable and configure it for your Blog with ease.

What is Progressive Web App?

A Progressive Web App (PWA) is a type of web application that offers a native app-like experience while being accessible through a web browser. PWAs are designed to combine the best features of web and mobile apps, providing fast performance, offline functionality, and a responsive interface. Key features of PWAs include:

Installable: Users can add a PWA to their home screen without needing to go through an app store.
Responsiveness: PWAs adapt seamlessly to different devices and screen sizes, from desktops to smartphones.
Fast and Reliable: PWAs load quickly and offer smooth performance, even on slow or unreliable networks.
Offline Capability: Using service workers, PWAs can cache content, allowing users to access the app even without an internet connection.
Push Notifications: PWAs can send notifications, similar to native mobile apps.

PWAs aim to enhance the user experience by blending the advantages of web apps (easy access and updates) with the functionality of native apps (offline access, push notifications).

As said earlier, Offline Page and Push Notifications features are not available using the inbuilt plugin of the theme due to how they are implemented and Blogger limitations. Using cloudflare workers as workaround we can enable these features too, checkout @kumardeo/blogger-pwa github repository. Make sure to disable the inbuilt plugin of theme when following the tutorial from github repository.

Enable PWA plugin

Built-in PWA plugin can be configured using LinkList widget titled Progressive Web App (if you have not renamed it) in Layout.

Add icon

By default it uses the favicon configured for meta tags.

In case you have not added it or want to use different icon, create a new link in the widget and use icon as Site Name and the icon image url as Site URL. The icon must be of 1:1 ratio with a minimum width of 512px, i.e. 512px*512px, 640px*640px, etc.

Add description

By default it uses Blog Description from Blog Settings.

In case you have not added it or want to use different description, create a new link in the widget and use description as Site Name and the description text as Site URL.

Add screenshots

You can add screenshots which will be previewed when install popup is shown. There are two types of screenshots you can add through the widget namely narrow screenshots which will be displayed on mobile devices and wide screenshots which will be displayed on desktop devices.

Narrow screenshots

The narrow screenshots must be of 3:4 ratio with a minimum width of 540px, i.e. 540px*720px, etc.

To add a narrow screenshot, create a new link in the widget and use screenshot_narrow as Site Name and the screenshot image url as Site URL. You are allowed to add multiple narrow screenshots.

Wide screenshots

The wide screenshots must be of 4:3 ratio with a minimum width of 720px, i.e. 720px*540px, etc.

To add a wide screenshot, create a new link in the widget and use screenshot_wide as Site Name and the screenshot image url as Site URL. You are allowed to add multiple wide screenshots.

Add shortcuts

To add a shortcut to your PWA, create a new link in the widget and use the shortcut name as Site Name and shortcut url as Site URL. You are allowed to add multiple shortcuts.

Please note that url must be navigating to the same origin due to limitations, therefore we recommend you to add only the absolute pathname and querystring part of the url, i.e. /p/contact.html instead of full url https://xyz.blogspot.com/p/contact.html.

Shortcut icon

Support for shortcut icon was added in v3.1. You can only use this feature if and only if you are using v3.1.0 or above.

Shortcut icon by default uses the app icon but you can change it to a different icon. To do so, create a link with shortcut name suffixed with a space and [icon] as Site name and the icon image URL as Site URL. For an example if you want to add an icon for a shortcut named Shortcut, you have to use Shortcut [icon] (including space and is case-sensitive) as Site name and the icon image URL as its Site URL, the dimension and ratio for this icon is same as app icon.

Why is PWA not working?

There can be various reasons for it. Here are some common reasons:

HTTPS redirect is turned off: PWAs require a secure connection (HTTPS) to work properly, except when running on localhost for development purposes. Therefore, make sure you have turned on HTTPS redirect in your Blog settings.
No app icon is set: You neither have a favicon configured nor you provided app icon url in the widget. Either configure a favicon or provide your app icon url in the widget. Read Add icon section above for more information.
Wrong image dimension or ratio: Make sure your images' dimension and ratio are correct.

Accelerated Mobile Pages

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:41:00 +0000

Experimental feature!
Accelerated Mobile Pages plugin is an experimental feature. We need your feedback to improve it further and make it stable.

What is Accelerated Mobile Pages?

Accelerated Mobile Pages (AMP) is an open-source framework developed by Google to create fast-loading mobile web pages. It was introduced to improve user experience on mobile devices by optimizing web content for speed and performance. AMP pages are designed to load almost instantly, even on slower networks. Key Features of AMP include:

Lightning-Fast Loading: AMP pages are optimized to load quickly by using a simplified version of HTML, known as AMP HTML, which eliminates resource-heavy features that can slow down the page.
Lazy Loading: AMP implements lazy loading for images, ensuring that images only load when they appear in the user's viewport, further improving performance.
Optimized Resource Handling: AMP controls resource loading to prioritize essential content, ensuring that scripts and images do not block the rendering of the page.
Pre-Rendering: Google caches and pre-renders AMP pages, making them instantly accessible when clicked from search results, even before the user reaches the website.
Mobile-Friendly Design: AMP enforces responsive web design principles, ensuring that pages look good and function well on any screen size, especially mobile devices.
AMP Cache: AMP uses a content delivery network (CDN) known as the Google AMP Cache, which caches AMP content to provide faster delivery.
Restricted JavaScript: AMP limits the use of custom JavaScript and third-party scripts to avoid performance bottlenecks. Only asynchronous scripts are allowed, preventing slowdowns.
Consistent User Experience: AMP pages provide a smooth, consistent experience with no unpredictable behavior, pop-ups, or interstitials that hinder mobile usability.

AMP is widely used by publishers, news sites, and businesses looking to improve mobile performance, boost SEO rankings, and provide a better user experience.

Enable AMP plugin

We have added experimental support for Linked AMP Lite in v3. When it is enabled it creates two variants of all the webpages, a Non-AMP webpage and a Linked AMP webpage which can be accessed by adding ?amp=1 to urls.

Linked AMP Lite is best choice for blogger as it creates a separate variant. For posts and pages, it displays a short overview of the body contents and a link at end to navigate to the Non-AMP variant to continue reading. Therefore you don't have to care about AMP things, the theme will handle everything for you!

Not only that, dark mode and comments features will also be available on Linked AMP variant of the pages.

Make sure you have enough knowledge about AMP and its requirements before enabling this plugin since we do not provide any guidance for AMP errors.
Do not enable it if you don't know anything about it. Once you enable it, there is no going back!

Enable Linked AMP Lite

If you want to try out this feature you can enable Linked AMP Lite through Theme Designer.

Go to Blogger Theme Designer.
Click on Advanced tab.
From dropdown selection list, select Plugin: AMP (Experimental).
Set AMP to 2px and AMP Type to 3px to enable it.
Warning!
Do not set AMP Type's length non other than 3px.

After enabling Linked AMP Lite, you can test urls using Google AMP Test tool.

Do's and Don'ts

When AMP plugin is enabled, remember these do's and don'ts.

Do not add custom javascript, you are not allowed to add your custom javascript when AMP is enabled.
Do not add custom css, you are not allowed to add your custom css when AMP is enabled.
Do not add Adsense script manually, use built-in Adsense Plugin instead.
Do not add Analytics script manually, use built-in Analytics Plugin instead.
Do not add widgets which uses javascript (Followers, Feeds, etc).

Firebase Configuration

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:40:00 +0000

Few plugins in the template depend on Firebase Services, i.e. Realtime Database for Post Views Counter, etc. Therefore, if you wish to use any of these plugins, you need to have a Firebase Project configured with the blog template.

Creating a Firebase Project

If you have already an existing Firebase Project created earlier, you can use it and skip the steps for creating newer one which is described below.

Go to Firebase Console.
Click + Create a project and follow the prompts to create a project. You can name your project anything you want.
Once the project is created, navigate to Project settings.
Under General > Your apps, click on </> Web and follow the prompts to create a Web app in the project.

You have now created a Firebase Project for Web Applications.

Setting up Realtime Database Rules

Adding secure rules to Realtime Database is crucial because insecure rules permits database read and write access to anyone on the internet, allowing them to read and modify anything in the database. Therefore, we need to add restrictions in order to make sure one cannot read or modify data without permission. Follow the steps below to protect your database.

Go to Firebase Project > Realtime Database.
Switch to Rules tab.

Paste the following JSON by making appropriate changes in the rules editor and click on Publish.

Warning!
The provided rules may update in future by our team in case any critical issue is found or new plugins are made available. It is recommended to update the rules as below regularly (atleast once in 3 months) by visiting this page.
Rules was last updated on 1st September, 2023 by Deo Kumar.

{
  "rules": {
    ".write": false,
    ".read": false,
    "blogs": {
      "$blog_id": {
        ".validate": "$blog_id.matches(/^\\d{18,22}$/) && ($blog_id === '000000000000000000' || $blog_id === '0000' || $blog_id === '0000')",
        "posts": {
          "$post_id": {
            ".validate": "$post_id.matches(/^\\d{18,22}$/)",
            "views": {
              ".read": true,
              ".write": "newData.exists()",
              ".validate": "newData.isNumber() && newData.val() % 1 === 0 && newData.val() === (data.exists() ? data.val() + 1 : 1)"
            }
          }
        }
      }
    }
  }
}

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Getting Firebase Configurations

We now need the configuration object of our Firebase Project Web app. Follow the steps to find it.

Navigate to your Firebase Project.
Go to Project Settings.

Under General > Your apps tab, select your Web app and click on Config. You will be able to see a Javascript object which looks like the following:

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx",
  authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxx.appspot.com",
  messagingSenderId: "000000000000",
  appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx",
  measurementId: "G-XXXXXXXXXX",
};

If the field databaseURL is not available, that means you have not created a Realtime Database instance yet, create it through Realtime Database section and re-check to make sure the field databaseURL is available.

Keep the browser tab open as we shall need the information of this object.

Setting up Firebase Configurations

We shall now add the firebase configurations to our blog.

Go to Blogger dashboard and navigate to Layout.
Find the Link List gadget with title Firebase Configurations (if you have not renamed it), click on Edit button.

Create or edit existing links for every key-value pairs, the key as Site name and the value (content under quotes) as Site URL respectively as shown below.

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx",
  authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxx.appspot.com",
  messagingSenderId: "000000000000",
  appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx",
  measurementId: "G-XXXXXXXXXX",
};

Your links should look as shown below:

Site name	Site URL
`apiKey`	`xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx`
`authDomain`	`xxxxxxxxxxxxx.firebaseapp.com`
`databaseURL`	`https://xxxxxxxxxxxxx.firebaseio.com`
`projectId`	`xxxxxxxxxxxxx`
`storageBucket`	`xxxxxxxxxxxxx.appspot.com`
`messagingSenderId`	`000000000000`
`appId`	`1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx`
`measurementId`	`G-XXXXXXXXXX`

Save the gadget to apply changes.

Done! You have successfully configured Firebase Project with your blog.

Safelink

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:38:00 +0000

Safelink plugin was added in v3.2, therefore you will be able to enable it if and only if you are using v3.2.0 or above.

Experimental feature!
Safelink plugin is an experimental feature. We need your feedback to improve it further and make it stable.

Looking for Demo? Demo of this Safelink feature can be found at Safelink Generator page.

Safelink is a feature that protects and manages outgoing links by redirecting users through an intermediate page before reaching the final destination. It helps improve security, control external traffic, and optionally display additional content such as advertisements, warnings, or timers. This ensures safer browsing for visitors and offers blog owners greater flexibility and monetization opportunities when handling external links.

Configure Safelink

In order to use this feature, you need to setup it first. First thing to do is enable the safelink plugin through Theme Designer:

Go to Blogger Theme Designer.
Click on Advanced tab.
From dropdown selection list, select Plugin: Safelink (Experimental).
Set the length of Safelink to 2px in order to enable it.

Now you need to configure at-least one Safelink page. Safelink page is the page where user is redirected and asked to perferm few actions in order to get the original link. You can configure safelink pages through Theme HTML Editor.

Go to Blogger HTML Editor.

Find the following code snippet and put your page link at marked parts. It is not mandatory to put all four pages' link, at-least one of them should be there:

You have to put only pathname of the page instead of full url. For an example, if you want to include https://www.example.com/p/my-safelink-page.html, only put /p/my-safelink-page.html.

<Variable name="safelink.page1" description="Safelink Page 1" type="string" default="" value="/p/safelink-page-1.html"/>
[!] Safelink Page 1
[!] @type {String}
[!] Warning: Don't add full url of the safelink page, only include the pathname

<Variable name="safelink.page2" description="Safelink Page 2" type="string" default="" value=""/>
[!] Safelink Page 2
[!] @type {String}
[!] Warning: Don't add full url of the safelink page, only include the pathname

<Variable name="safelink.page3" description="Safelink Page 3" type="string" default="" value=""/>
[!] Safelink Page 3
[!] @type {String}
[!] Warning: Don't add full url of the safelink page, only include the pathname

<Variable name="safelink.page4" description="Safelink Page 4" type="string" default="" value=""/>
[!] Safelink Page 4
[!] @type {String}
[!] Warning: Don't add full url of the safelink page, only include the pathname

Safelink from Anchor

You can add a classname safeL to <a> elements to automatically put the link behind safelink feature. An example is:

<a class='button safeL' href='link_here'>title_here</a>

If you wish, you can also use <button> element as shown below:

<button type='button' class='button safeL' data-href='link_here'>title_here</button>

Safelink Generator

The Safelink Generator allows you to create safelink from original link. You can put the generator in an existing page or in a new page.

In page editor view, click icon at the bottom right of the title.
Two options will appear: HTML view and Writing view.
Select 'HTML View'.

Copy and paste following code.

<!--[ Begin: Safelink Generator area ]-->
<style>
.inF.cB button{--svgW:16px;--svgH:16px;position:absolute;inset-block-start:10px;inset-inline-end:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--contentB);border-radius:8px;border:1px solid var(--contentLa);opacity:0.5;cursor:pointer}
.inF.cB input{padding-inline-end:50px}
.inF.cB input:not(:placeholder-shown) ~ button{opacity:1}
.sgMw{max-width:600px;margin:40px auto}
.sgOw{display:flex;align-items:center;gap:12px 8px;flex-wrap:wrap;background:var(--contentB);border:1px solid var(--contentL);border-radius:5px;padding:12px}
.sgOw span{width:100%;line-height:1.4em;font-size:14px}
.sgOw button{--svgW:20px;--svgH:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;background:var(--linkB);color:#fffdfc;border-radius:8px;cursor:pointer}
</style>
<script>
/*! Plus UI Javascript (safelink/generator.js) | Authors: Deo Kumar, Armaan Kumar (https://fineshopdesign.com) | License: Unlicensed | Copyright (c) 2024-2025 Fineshop Design */
"use strict";((e,t,l)=>{let{cEl:n,iAE:a,aEL:s,qSel:i,gId:p,eHTML:o,tNtf:g,df:c,pl:u,bg:r}=l,d=e=>(e=>new URL(e,t.baseURI))((e=>e.replace(/(^\w+:|^)/,""))(e)),h=(e,t,n="s")=>{let a=(e=>{let t=JSON.stringify(e);return{decoded:e,value:t,data:l.B64.O3.e(t)}})(t);return e+`#${n}=${encodeURIComponent(a.data)}`},v=u.sl,b=v.pg.map((e=>new URL(e,r.cnHmU).href)),f=t.currentScript,C=[];v.ok||C.push("The Safelink plugin is not enabled. The generated links will not work until it is enabled."),0===b.length&&C.push("No Safelink page has been configured!");let k=n("div",{className:"sgMw",innerHTML:`${0!==C.length?`<div class='alert warning'><b>Warning!</b>${C.map(((e,t)=>`${t+1}. ${e}`)).join("<br>")}</div>`:""}<div class='inF cB' data-message='URL must begin with http:// or https://'><input type='text' name='link' id='sg_f_link' placeholder=' '><label for='sg_f_link'>Destination URL</label><button type='button' id='sg_f_clear_link'><svg class='line' viewBox='0 0 24 24'><path d='M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999'></path></svg></button></div><div class='inF' data-message='Select a page for safelink'><select id='sg_f_page'><optgroup label='Static pages'><option value='${o(r.cnHmU)}'${0===b.length?" selected":""}>Homepage</option></optgroup>${0!==b.length?`<optgroup label='Safelink Pages'>${b.reduce(((e,t,l)=>`${e}<option value='${o(t)}'${0===l?" selected":""}>Safelink Page (${o(v.pg[l])})</option>`),"")}</optgroup>`:""}</select><label for='sg_f_page'>Safelink Page</label></div><div class='sgOw'><span class='sgOl'></span><button type='button' class='sgOv'><svg class='line' viewBox='0 0 24 24'><path d='M15.58 12C15.58 13.98 13.98 15.58 12 15.58C10.02 15.58 8.42004 13.98 8.42004 12C8.42004 10.02 10.02 8.42004 12 8.42004C13.98 8.42004 15.58 10.02 15.58 12Z'></path><path d='M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.46997 3.71997 5.17997 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.17997 18.19 8.46997 20.27 12 20.27Z'></path></svg></button><button type='button' class='sgOc'><svg class='line' viewBox='0 0 24 24'><path d='M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z'></path><path d='M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z'></path></svg></button></div>`});a(f,"beforebegin",k);let $=p("sg_f_link"),_=p("sg_f_clear_link"),m=p("sg_f_page"),w=i(".sgOl",k),H=i(".sgOv",k),L=i(".sgOc",k),U=()=>{if(!l.B64)return null;let e=$.value.trim();return""===e?null:(/^https?:\/\//.test(e)||(e=`https://${e}`),h(m.value,{v:1,u:e}))},M=()=>{let e=U();w.innerText=e||"Input a valid Destination URL first!"};M(),s($,"change",M),s($,"input",M),s($,"keyup",M),s(m,"change",M),s(m,"input",M),s($,"blur",(()=>{let e=$.value.trim();""!==e&&(/^https?:\/\//.test(e)?$.value!==e&&($.value=e):$.value=`https://${e}`)})),s(_,"click",(()=>{$.value="",M()})),s(H,"click",(()=>{let t=U();t?e.open(t,"_blank"):g(w.textContent)})),s(L,"click",(()=>{let e=U();e?l.cpT(e).then((()=>g("Link copied to clipboard!"))):g(w.textContent)})),c.then((()=>{M(),l.iBF().then((async e=>{let t=new e(d(r.cnHmU)),[l,a]=await Promise.all([t.posts.list(),t.pages.list()]);[["Recent Posts",l],["Recent Pages",a]].forEach((([e,t])=>{let l=n("optgroup",{attributes:{label:e},innerHTML:t.reduce(((e,t)=>`${e}<option value='${o(t.url)}'>${o(t.title)}</option>`),"")});m.appendChild(l)}))}))}))})(window,document,PU);
</script>
<!--[ End: Safelink Generator area ]-->

It is recommended to add a page description paragraph above the given code.

Widgets and Plugins

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:37:00 +0000

Help us improve this post! English is not my first language, so if you find any mistakes or think something can be explained better, feel free to contact us. Your suggestions are always welcome!

There are many in-built plugins in the theme, few of them are documented separately. This page documents rest of the plugins.

Bookmark posts

The Bookmark posts feature allows your site visitors to save posts so they can read it later. The posts are stored in browser using localStorage Web APIs. This feature comes enabled by default, but you can disable or customize it through Layout.

Go to Blogger Layout.
Search for the LinkList widget with title Bookmark posts (if you have not renamed it).
Click on pencil icon beside the widget.

Live Search

Live Search was added in v3.1, therefore you will be able to enable it if and only if you are using v3.1.0 or above.

Live Search plugin is now stable!
Initially introduced as an experimental feature in v3.1.0, the Live Search plugin has been fully stabilized starting from v3.2.0. We still welcome your feedback to make it even better!

The Live Search feature shows a list of posts matching the query as soon as user inputs a keyword in search bar. This feature comes enabled by default, but you can disable or customize it through Theme Designer.

Go to Blogger Theme Designer.
Click on Advanced tab.
From dropdown selection list, select Plugin: Live Search.

Links related to Live Search :

@deox/blogger-feed : open source blogger feed client - GitHub

Cookie Consent

The Cookie Consent feature shows a popup through which site owner can obtain consent from users. This feature comes enabled by default, but you can disable or customize it through Layout.

Go to Blogger Layout.
Search for the LinkList widget with title Cookie Consent (if you have not renamed it).
Click on pencil icon beside the widget.

Realtime views counter

The Realtime views counter shows the number of post views. This plugin utilizes Firebase Realtime Database to store views count. If you would like to enable this feature, follow these steps:

First of all, you need to configure a firebase project with your blog.
Go to Blogger Theme Designer.
Click on Advanced tab.
From dropdown selection list, select Plugin: Views Counter.
Set the length of Views Counter to 1px or 2px to disable or enable the plugin respectively.

Warning!
In order to make connection to database instance through WebSocket for realtime updates, the firebase javascript SDK is loaded and executed in client's browser. If you really don't need this feature, please disable it.

Labels description

Labels Description was added in v3.1, therefore you will be able to enable it if and only if you are using v3.1.0 or above.

The Labels description widget displays info (such as label name, no. of posts, label description if added and label cover if available) in label pages. For example, if we are at /search/label/Art location, it shows information of Art label. This feature comes enabled by default, but you can disable or customize it through Layout.

Go to Blogger Layout.
Search for the LinkList widget with title Labels Description (if you have not renamed it).
Click on pencil icon beside the widget.

How can I add description to a label?

To add a description to a label, create a link in the widget with label name as the Site Name (case-sensitive) and its description as the Site URL. For an example, if you want to add description to the Lifestyle label, create a new link with Lifestyle as Site Name and the description text as Site URL.

How can I add cover image to a label?

By default, the widget tries to select a thumbnail from posts in view as cover image but it is possible to explicitly specify an image as cover. To do so, create a link in the widget with label name followed by a space and [cover] as the Site Name (case-sensitive) and the image URL as the Site URL. For an example, if you want to add cover image to the Lifestyle label, create a new link with Lifestyle [cover] as Site Name and the cover image URL as Site URL.

Categorized Posts

The Categorized Posts widget can be used to display posts with a particular label on homepage. For an example, you can use it to display certain number of posts having label News. This widget can be disabled or customized through Layout.

Go to Blogger Layout.
Search for the LinkList widget with title Categorized Posts (if you have not renamed it).
Click on pencil icon beside the widget.

Quick Edit

The Quick Edit feature can be used for navigating directly to Post Edit, Blog Layout, Blog Settings page by clicking on shortcut buttons which appear on UI when the page is viewed by a blog administrator. It can even display delete button next to comment if the page is viewed by a blog administrator or the commentor. This feature comes enabled by default, but you can disable or customize it through Theme Designer.

Go to Blogger Theme Designer.
Click on Advanced tab.
From dropdown selection list, select Plugin: Quick Edit.

Syntax Highlighter

The Syntax Highlighter feature can be used to highlight codes in code block components, it can also be used to automatically add copy button and line numbers to the code block. The feature comes enabled by default, but you can disable or customize it through Theme Designer.

Go to Blogger Theme Designer.
Click on Advanced tab.
From dropdown selection list, select Plugin: Syntax Highlighter.

Microsoft Clarity

Microsoft Clarity plugin was added in v3.1, therefore you will be able to enable it if and only if you are using v3.1.0 or above otherwise you can simply follow their documentation.

The theme has Microsoft Clarity plugin since it allows you to choose the script loading type. Follow these steps to enable the plugin:

Login to Microsoft Clarity.
Select your project and navigate to its Settings.
Click on Overview.
Copy the Project ID by clicking on the copy button next to project id.
Now, navigate to Blogger HTML Editor page.

Look for the following code snippet and paste the project id as marked:

<Variable name="clarity.trackingId" description="Microsoft Clarity Tracking Code" type="string" default="" value=""/>
[!] Microsoft Clarity Tracking Code
[!] @type {String}

Save the changes and navigate to Blogger Theme Designer.
Click on Advanced tab.
From dropdown selection list, select Plugin: Microsoft Clarity.
Set the length of Enable Script to 2px in order to enable the plugin. You can set it back to 1px if you decided to disable it in future. You can also change the Load Type if you wish, each load type has same behaviour as load type of Google Analytics plugin.

Resources

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:36:00 +0000

SVG Icons

A list of SVG icons which can be used in Navigation Menu, to replace default icons or other purposes. These icons are powered by Iconsax. Click on an icon to copy its SVG code to the clipboard.

Tabs Post

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:35:00 +0000

You can divide long posts into several parts in tabs, the maximum tabs you can use is 5.

For example, you write an article in two languages, English and Hindi. You can place articles in English on the first tab and Hindi on the next tab.

Or if you share a file in your article, adding a download link in the second tab is also a good choice.

It is also used in the Product Post format.

Switch to Documentation tab to read more.

Sample text to extend content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus. Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus.

Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo. Cras placerat sit amet libero sit amet rhoncus. Aenean ultrices vitae erat ut malesuada. Vivamus fringilla mollis leo, ut tempus nibh feugiat sollicitudin. Phasellus sodales maximus turpis, eget sollicitudin tortor volutpat ac.

In imperdiet ultrices iaculis. Proin consequat, massa ut hendrerit lacinia, eros nibh finibus justo, ut consectetur nibh orci vitae massa. Ut sodales lobortis sollicitudin. Phasellus eget mi dictum neque mollis vehicula. Vestibulum et dolor accumsan, volutpat est quis, posuere tortor. Maecenas euismod turpis eu metus elementum tempor. Pellentesque in ullamcorper massa. Pellentesque lectus ipsum, dignissim nec ornare et, laoreet eget ex. Duis convallis lorem vitae consequat mattis. Aenean dui lectus, auctor eu dui et, gravida pellentesque velit. In vitae justo lacus. Vivamus id imperdiet sapien. Mauris non maximus purus. Nulla facilisi.

Curabitur quis vestibulum arcu, at aliquet urna. Aenean ex risus, rhoncus vitae urna accumsan, congue aliquet tortor. Suspendisse imperdiet nibh eget odio posuere maximus. Integer vitae neque ante. Donec pellentesque dictum diam, a luctus lectus ultrices vitae.

Donec pretium dui erat, a maximus nunc dapibus sed. Nulla malesuada lectus a felis malesuada pretium. Nulla sit amet augue in neque rhoncus commodo ac nec nibh. Duis semper eleifend mauris, vel tristique velit bibendum sit amet. Mauris vitae justo eu nisl scelerisque condimentum eget eu mi.

Nullam non sapien sit amet ex consequat tempor ut nec risus. Phasellus non justo eget ex faucibus mattis. Vivamus vestibulum interdum consectetur. Morbi pulvinar ut lectus eu semper. Ut et sagittis leo. Pellentesque vitae posuere orci. Praesent sit amet egestas tortor, vel consectetur nulla. Duis feugiat consectetur nisl.

Nunc interdum a sapien sed commodo. Maecenas porttitor dictum mi quis luctus. Vestibulum turpis quam, laoreet in dignissim dapibus, ullamcorper in tortor. Morbi malesuada massa sapien, sagittis ullamcorper quam pharetra ultrices.

Donec laoreet fringilla mattis. Proin vitae scelerisque neque, nec imperdiet sem. Aliquam pellentesque euismod eros, eget pharetra est vehicula eu. Nulla ligula orci, pellentesque sed quam vel, posuere sodales neque. Nulla turpis justo, lobortis vel imperdiet ut, viverra id nunc. Aliquam ipsum lectus, rutrum vel blandit sed, commodo ut ligula.

Ut in condimentum eros. Duis in elit ultricies, molestie metus ac, dapibus augue. Pellentesque eu feugiat risus, sed rhoncus urna. Quisque viverra tellus nec placerat ullamcorper. Sed nec volutpat est, at pharetra mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eu ultrices metus. Morbi placerat tempus nibh nec ultricies.

Proin finibus aliquam suscipit. Mauris malesuada ornare sollicitudin. Sed faucibus lacinia pharetra. Nunc ultrices neque eget accumsan dignissim. Fusce efficitur ultricies volutpat. Maecenas ut mauris in dui pretium eleifend eu at purus. Etiam pretium luctus massa eget condimentum. Morbi gravida, elit at molestie rutrum, ligula est accumsan nunc, fringilla suscipit orci ligula vel est.

Aliquam auctor cursus lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non porttitor ligula, vitae ultricies nisl. Phasellus quis arcu arcu. Praesent at nunc faucibus, sagittis ipsum non, egestas magna. Nam enim eros, fermentum nec odio vitae, blandit molestie lorem. Pellentesque sed mattis elit.

Donec vulputate id nisi ut pharetra. Nunc et risus lorem. Praesent in lectus nulla. Cras convallis odio eros, consectetur tristique turpis dictum feugiat. Aenean leo sem, blandit quis ante eu, tempus laoreet nisi. Duis in tincidunt lacus. Donec ornare ac nisl nec convallis. Etiam interdum ipsum nisl, sollicitudin luctus quam sollicitudin quis.

Ut ipsum libero, cursus vel scelerisque eget, elementum quis velit. Donec quis velit at ex faucibus cursus. Nulla at erat sed leo consectetur auctor sed dignissim est. Maecenas nec gravida dui. Maecenas non nisi nibh. Nunc viverra nisl sed risus sagittis vulputate. Quisque egestas eros non ornare mollis. Nunc ornare viverra nibh vitae faucibus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eget porta sapien. Donec eu sapien egestas, blandit sem in, consectetur neque. Cras quis diam id ipsum volutpat pretium vulputate sit amet dolor. Nunc quis tortor scelerisque, egestas lectus vitae, auctor augue. Proin sit amet efficitur tellus, et lacinia lorem.

Etiam lacus mauris, mattis ut sagittis et, suscipit ac elit. Nulla vitae luctus leo. Vivamus sit amet est vitae nisi vulputate iaculis vitae in lorem. Nullam lectus lectus, luctus vitae ante ut, finibus ultricies eros. Aenean quis rhoncus nibh. Ut nibh massa, venenatis id neque quis, sodales semper lorem. Mauris feugiat elementum arcu, eu rutrum erat congue quis. Nam lacinia orci id facilisis aliquet. Vestibulum tellus elit, feugiat nec sem ac, gravida interdum augue. Donec ligula augue, viverra eu odio sit amet, tempor euismod augue.

To use tabs in your post, you can use the following code snippet:

<!--[ Tabs, remove classname 'stick' to disable floating title ]-->
<div class='tabs stick'>
  <!--[ Active function ]-->
  <input id='tabT-1' type='radio' name='postTabs' checked=''>
  <input id='tabT-2' type='radio' name='postTabs'>
  <input id='tabT-3' type='radio' name='postTabs'>
  <input id='tabT-4' type='radio' name='postTabs'>

  <!--[ Tabs header/title ]-->
  <div>
    <!--[ Change atribute data-text='...' to replace tabs title ]-->
    <label for='tabT-1' data-text='Tab 01'></label>
    <label for='tabT-2' data-text='Tab 02'></label>
    <label for='tabT-3' data-text='Tab 03'></label>
    <label for='tabT-4' data-text='Tab 04'></label>
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tabC-1'>
    tab_1_content
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tabC-2'>
    tab_2_content
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tabC-3'>
    tab_3_content
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tabC-4'>
    tab_4_content
  </div>
</div>

Split Post

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:34:00 +0000

Post style to divide articles into several pages.

Looking for documentation? Navigate to page 2.

Sample text to extend content

Documentation

In post editor view, click icon at the bottom right of the title.
Two options will appear: HTML view and Writing view.
Select 'HTML View'.

Copy and paste the following code and make appropriate changes.

<div id='postSplit'>
page_1_contents

<!--nextpage-->
page_2_contents

<!--nextpage-->
page_3_contents

<!--nextpage-->
page_4_contents
</div>

If you are using version 3.0.0, you need to add the following just below the above code snippet.

Warning
Do not add it if you are using version above to 3.0.0

<!--[ Split Post javascript ]-->
<script>
/*! Plus UI Javascript (split-post.js) | Authors: Deo Kumar, Armaan Kumar (https://fineshopdesign.com) | License: Unlicensed | Copyright (c) 2024 Fineshop Design */
"use strict";((e,t,a,i)=>{let{df:l,gId:s,mc:n,vw:o,eHTML:r}=e;o.iBt||l.then((()=>{let e=s(i.id);if(e){let a=e.innerHTML.split("\x3c!--nextpage--\x3e"),i=a.length,l=t.location.search.match(/[?&]page=(\d+)/),s=l&&l[1]?Number(l[1]):1;s>i&&(s=1);let o=a[s-1],d="<svg class='line' viewBox='0 0 24 24'><path d='M9.57 5.92993L3.5 11.9999L9.57 18.0699' stroke-miterlimit='10'></path><path d='M20.5 12H3.67004' stroke-miterlimit='10'></path></svg>",p="<svg class='line' viewBox='0 0 24 24'><path d='M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699' stroke-miterlimit='10'></path><path d='M3.5 12H20.33' stroke-miterlimit='10'></path></svg>";o+="<div class='blogN numP'>",o+=`<div class='nPst' data-text='Page ${s} of ${i}:'></div>`,s-1==0&&(o+=`<div class='nwLnk nPst'>${d}</div>`);for(let e=1;e<=i;e++)e===s?o+=`<div class='nPst' data-text='${e}'></div>`:e===s-1?o+=`<a class='nwLnk' href='?page=${e}' rel='nofollow noreferrer noopener' aria-label='${r(n.previous,!0,!1)}' data-text='${e}'>${d}</a>`:e===s+1?o+=`<a class='olLnk' href='?page=${e}' rel='nofollow noreferrer noopener' aria-label='${r(n.next,!0,!1)}' data-text='${e}'>${p}</a>`:e>=s-3&&e<=s+3||1===e||e===i?o+=`<a href='?page=${e}' rel='nofollow noreferrer noopener' aria-label='Page ${e}' data-text='${e}'></a>`:(e===s-4||e===s+4)&&(o+="<div class='nPst' data-text='...'></div>");s+1>i&&(o+=`<div class='olLnk nPst'>${p}</div>`),o+="</div>",e.innerHTML=o}else console.warn(`Split post element with id '${i.id}' does not exist in document while split-post.js is used!`)}))})(PU,window,document,{id:"postSplit"});
</script>

Fullpage Post

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:33:00 +0000

Fullpage post style makes the post content more focused by hiding the sidebar. It can be enabled by adding a label Fullpage to the post.

Product Post

noreply@blogger.com (Unknown) — Sun, 27 Oct 2024 15:32:00 +0000

₹55,990.00

SeriesHP Pavilion Laptop 15-eh1101AU

BrandHP

Specific Uses For ProductMultimedia

Screen Size15.6 Inches

Operating SystemWindows 10 Home

Human Interface InputTouchscreen

CPU ManufacturerAMD

Graphics Card DescriptionIntegrated

ProcessorAMD Ryzen 5 5500U

Storage512 GB SSD

Memory8 GB DDR4-3200 MHz

Special FeatureMicro-Edge Display, Thin

ColourSilver

What is in the Box?HP Laptop, 65 W Smart AC power adapter, user manuals

or Shop through your favorite 'Market Place' :

Switch to Documentation tab for guides.

AMD Ryzen 5 5500U (up to 4.0 GHz max boost clock, 8 MB L3 cache, 6 cores, 12 threads)

Live life without limits with a laptop that gets things done. Be more productive and prove your worth when you have the latest AMD Ryzen Processors, up to 16GB Dual channel 3200 DDR4 memory, and AMD Raedon graphics to embraces your switches between games, entertainment, and creative work, so seamlessly. Experience powerful performance and seamless computing for your everyday tasks. That includes improved productivity, smooth streaming, and brilliant Full HD entertainment with immersive, anti-glare display. Also, get a huge performance advantage with SSDs — they’re faster to start up, faster to shut down, and faster to transfer data.

39.6 cm (15.6') diagonal, FHD (1920 x 1080), IPS, micro-edge, BrightView, 250 nits, 45% NTSC

With its superior color ranging capabilities, this laptop ensures stunning display of colors on its FHD IPS display. Ease of access and a completely comfortable design allows you to maximize your machine’s potential. A compact laptop that brings life the visual experience with FHD, and Micro Edge bezel. A laptop with larger screen-to-body ratio, and Micro-edge bezels that maximize your view and make sure that you have crystal clear graphics and also a larger screen to enjoy your favourite videos.

Experience rich and authentic audio through the Bang & Olufsen Play. Each sound enriched to immerse you in a sound that takes you away. Combining it with the Dual HP Speakers & HP Audio Boost, brings to life each note and sound, be it when you’re listening to music or watching a movie.

Worried about your power going down while travelling for long hours? Keep your worries aside and get the HP Pavilion laptop that comes with super-fast battery charging. Enjoy a faster, smoother, and amazingly responsive computing experience that lets you do all your tasks on-the-go without any worries. Built with a battery that smartly adapts to the system demands, you are sure to be offered the best possible performance. HP Adaptive Battery Fast Charges in less time w/ 43WH adapter- 50% in 30 min will allows you to get more hours back in less time.

In post editor view, click icon at the bottom right of the title.
Two options will appear: HTML view and Writing view.
Select 'HTML View'.

Copy and paste the following code and make appropriate changes.

<!--[ Image with caption ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='HP Pavilion Laptop 15-eh1101AU' width='1280' height='720' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlmxjjEVsUtVQBywwPr71Kaub2SWDF9S_vm5vBJzh5q3u-Whz_rIg6jABe2mP9wGkMTxUxvFMHORB_7K9MSpif8ogjaGRxjf3_gMJnwaO9-FdX_M-adxvFadG10QKbHMvlSUVi2V9pyKQIiMCaErp5USIN1v4L16MdrIUji8B9YBHcxVLwm19pU8IMQ/s1280/HP_Pavilion.webp'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption' data-text='HP Pavilion Laptop 15-eh1101AU'></td>
    </tr>
  </tbody>
</table>

<!--[ Price to show in homepage ]-->
<div class='pPric pPad' data-text='Price'>₹55,990.00</div>

<!--more-->

<!--[ Post snippet ]-->
<div class='hidden'>Specifications, Design, Performance, Battery</div>

<div class='pInfo pPad'>
  <div class='L'><small>Series</small><span>HP Pavilion Laptop 15-eh1101AU</span></div>
  <div class='R'><small>Brand</small><span>HP</span></div>
</div>

<div class='pInfo pPad'>
  <div class='L'><small>Specific Uses For Product</small><span>Multimedia</span></div>
  <div class='R'><small>Screen Size</small><span>15.6 Inches</span></div>
</div>

<div class='pInfo pPad'>
  <div class='L'><small>Operating System</small><span>Windows 10 Home</span></div>
  <div class='R'><small>Human Interface Input</small><span>Touchscreen</span></div>
</div>

<div class='pInfo pPad'>
  <div class='L'><small>CPU Manufacturer</small><span>AMD</span></div>
  <div class='R'><small>Graphics Card Description</small><span>Integrated</span></div>
</div>

<div class='pInfo pPad'>
  <div class='L'><small>Processor</small><span>AMD Ryzen 5 5500U</span></div>
  <div class='R'><small>Storage</small><span>512 GB SSD</span></div>
</div>

<div class='pInfo pPad'>
  <div class='L'><small>Memory</small><span>8 GB DDR4-3200 MHz</span></div>
  <div class='L'><small>Special Feature</small><span>Micro-Edge Display, Thin</span></div>
</div>

<div class='pInfo pPad'>
  <div class='R'><small>Colour</small><span>Silver</span></div>
</div>

<div class='pInfo pPad o'><small>What is in the Box?</small><span>HP Laptop, 65 W Smart AC power adapter, user manuals</span></div>

<div class='pMart'>
  <small>or Shop through your favorite '<b>Market Place</b>' :</small>
  
  <!--[ Change attribute href='#' to add url ]-->
  <a title='Market 1' href='#' target='_blank' rel='noopener'>
    <img alt='Market 1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisldTSPR5qQSsrqZDyfYV81HFSq4Pko5u8xpbzKJ7V05CZAaCkfxG550uqbp2xlCxukxcVL4i2so2XxNri-wqqUO0yuVLLznfFes1rdmg7Ywq8pWE8FXwWQfcyrNiAPlyI3_ngX12x7-KGzAVPfjiTWPMP3HdwelG4pn729xMfH05-hdWVbQyaIsgMkQg/s100/favicon.png'/>
  </a>
  <a title='Market 2' href='#' target='_blank' rel='noopener'>
    <img alt='Market 2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisldTSPR5qQSsrqZDyfYV81HFSq4Pko5u8xpbzKJ7V05CZAaCkfxG550uqbp2xlCxukxcVL4i2so2XxNri-wqqUO0yuVLLznfFes1rdmg7Ywq8pWE8FXwWQfcyrNiAPlyI3_ngX12x7-KGzAVPfjiTWPMP3HdwelG4pn729xMfH05-hdWVbQyaIsgMkQg/s100/favicon.png'/>
  </a>
</div>

<div class='tabs stick'>
  <!--[ Active function ]-->
  <input id='tabT-1' type='radio' name='postProduct' checked=''>
  <input id='tabT-2' type='radio' name='postProduct'>
  <input id='tabT-3' type='radio' name='postProduct'>
  <input id='tabT-4' type='radio' name='postProduct'>

  <!--[ Tabs header/title ]-->
  <div>
    <!--[ Change atribute data-text='...' to replace tabs title ]-->
    <label for='tabT-1' data-text='Processor'></label>
    <label for='tabT-2' data-text='Display'></label>
    <label for='tabT-3' data-text='Audio'></label>
    <label for='tabT-4' data-text='Battery'></label>
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tabC-1'>

    <p>AMD Ryzen 5 5500U (up to 4.0 GHz max boost clock, 8 MB L3 cache, 6 cores, 12 threads)</p>
    <p>Live life without limits with a laptop that gets things done. Be more productive and prove your worth when you have the latest AMD Ryzen Processors, up to 16GB Dual channel 3200 DDR4 memory, and AMD Raedon graphics to embraces your switches between games, entertainment, and creative work, so seamlessly. Experience powerful performance and seamless computing for your everyday tasks. That includes improved productivity, smooth streaming, and brilliant Full HD entertainment with immersive, anti-glare display. Also, get a huge performance advantage with SSDs — they’re faster to start up, faster to shut down, and faster to transfer data.</p>

  </div>

  <!--[ Tabs content ]-->
  <div class='tabC-2'>

    <p>39.6 cm (15.6') diagonal, FHD (1920 x 1080), IPS, micro-edge, BrightView, 250 nits, 45% NTSC</p>
    <p>With its superior color ranging capabilities, this laptop ensures stunning display of colors on its FHD IPS display. Ease of access and a completely comfortable design allows you to maximize your machine’s potential. A compact laptop that brings life the visual experience with FHD, and Micro Edge bezel. A laptop with larger screen-to-body ratio, and Micro-edge bezels that maximize your view and make sure that you have crystal clear graphics and also a larger screen to enjoy your favourite videos.</p>

  </div>

  <!--[ Tabs content ]-->
  <div class='tabC-3'>

    <p>Experience rich and authentic audio through the Bang &amp; Olufsen Play. Each sound enriched to immerse you in a sound that takes you away. Combining it with the Dual HP Speakers &amp; HP Audio Boost, brings to life each note and sound, be it when you’re listening to music or watching a movie.</p>

  </div>
  
  <!--[ Tabs content ]-->
  <div class='tabC-4'>

    <p>Worried about your power going down while travelling for long hours? Keep your worries aside and get the HP Pavilion laptop that comes with super-fast battery charging. Enjoy a faster, smoother, and amazingly responsive computing experience that lets you do all your tasks on-the-go without any worries. Built with a battery that smartly adapts to the system demands, you are sure to be offered the best possible performance. HP Adaptive Battery Fast Charges in less time w/ 43WH adapter- 50% in 30 min will allows you to get more hours back in less time.</p>

  </div>
</div>

Add a label Product to the post.

Plus UI

Plus UI v3.7.0 Released: Multi-page SafeLink & SEO

1. Custom Home Page Title (SEO)

2. Multi-page SafeLink (Advanced)

2.3 SafeLink Options Explained

2.4 Custom Placement (Advanced)

Configure SafeLink Pages

Safelink Generator Tool

3. Bug Fixes: Middle Post Ads

4. PWA Stability Improvements

5. Core Updates: Adslinkfly & Status Code

5.1 Adslinkfly Script Update

5.2 Blog Status Code (Last Month Views)

Live Demo

Conclusion

Plus UI Menu Generator Tool

Menu Item Class Reference

Add Standard Link

Add Badge Link

Add Dropdown (Style 1: No Sub-Item Icons)

Add Dropdown (Style 2: With Sub-Item Icons)

Add Dropdown (Style 3: Top Level Sub-Menu)

Generated Menu Code

Method 1: Using Layout

Method 2: Editing Theme Code

Safelink and Shortlink - v3.2+

Shortlink Generator

How to Get Firebase Web API Key

How to Create a page.link Domain for Dynamic Links

Adding the Script to Blogger

Safelink + Shortlink Generator

Tips

conclusion

UI Components and Typography

Paragraph

Paragraph with Text Indent

Paragraph with Drop Cap

Post Reference Paragraph

Post Image

Image with Caption

Image with Automatic Lightbox

Images with Grid Layout

Images with Show All Function

Images with Scroll Layout

Lazyload Image

External Link

Button

Download Link

Blockquote

Note Block

Alert

Table

Steps

Code Block

Multi-tabs Code Block

Spoiler

Accordion

FAQs in microdata

Table of Contents

Manual Table of Contents

Automatic Table of Contents

Related Posts

Manual Related Posts

Automatic Related Posts

Lazy YouTube

Defer YouTube

Essentials

Explicit Post Snippet

Explicit Post Thumbnail

Header Subtitle

Getting Started and Installation

Download Files

Good to know

Theme Designer

Edit HTML

Mobile Settings

Theme Installation

Upload XML

Override XML

Removing previous theme

How to Create a `page.link` Domain for Dynamic Links