Sjanu Template Shortcodes

This page provides the HTML snippets for the built-in shortcodes (UI components) available in the Sjanu template.

These components are designed to work seamlessly with both the Blogger Native Editor (HTML View) and Markdown-it (if you are writing in Markdown and allowing HTML passthrough).

---

1. Alerts / Callouts

Use alerts to highlight important information, warnings, or success messages.

Info Alert (Blue)

<div class="alert info">
  <svg class="alert-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  <div class="alert-content">
    <strong>Note:</strong> This is an informational message. Use it to provide extra context.
  </div>
</div>

Note: This is an informational message. Use it to provide extra context.

Warning Alert (Yellow)

<div class="alert warning">
  <svg class="alert-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
  <div class="alert-content">
    <strong>Warning:</strong> Please read this carefully before proceeding.
  </div>
</div>

Warning: Please read this carefully before proceeding.

Success Alert (Green)

<div class="alert success">
  <svg class="alert-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
  <div class="alert-content">
    <strong>Success!</strong> The operation was completed successfully.
  </div>
</div>

Success! The operation was completed successfully.

Danger/Error Alert (Red)

<div class="alert danger">
  <svg class="alert-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  <div class="alert-content">
    <strong>Error:</strong> Something went wrong. Please try again.
  </div>
</div>

Error: Something went wrong. Please try again.

---

2. Action Buttons

Beautiful, clickable buttons for links or downloads.

Primary Button

<a href="#" class="btn-sc primary">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
  Download Now
</a>

Download Now

Outline Button

<a href="#" class="btn-sc outline">
  View Documentation
</a>

View Documentation

Dark Button

<a href="#" class="btn-sc dark">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
  Listen on Spotify
</a>

Listen on Spotify

---

3. Download / Resource Box

A rich card layout perfect for sharing files, templates, or software.

<div class="dl-box">
  <div class="dl-icon-wrap">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" x2="12" y1="22.08" y2="12"/></svg>
  </div>
  <div class="dl-info">
    <span class="dl-title">Sjanu Premium Template v2.0</span>
    <div class="dl-meta">
      <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg> ZIP File</span>
      <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> 2.5 MB</span>
    </div>
  </div>
  <div class="dl-action">
    <a href="#" class="btn-sc primary">Download</a>
  </div>
</div>

Sjanu Premium Template v2.0

ZIP File 2.5 MB

Download

---

4. Accordion / FAQ (Spoiler)

A native HTML5 collapsible panel. No JavaScript required. Perfect for FAQs or hiding long content.

<details class="sc-accordion">
  <summary>How do I install this Blogger template?</summary>
  <div class="sc-accordion-content">
    <p>To install the template, go to your Blogger Dashboard > Theme > Edit HTML. Select all existing code, delete it, and paste the new XML code. Click Save.</p>
  </div>
</details>

<details class="sc-accordion">
  <summary>Is this template SEO friendly?</summary>
  <div class="sc-accordion-content">
    <p>Yes! It includes advanced JSON-LD structured data, optimized heading tags, and fast loading speeds.</p>
  </div>
</details>

How do I install this Blogger template?

To install the template, go to your Blogger Dashboard > Theme > Edit HTML. Select all existing code, delete it, and paste the new XML code. Click Save.

Is this template SEO friendly?

Yes! It includes advanced JSON-LD structured data, optimized heading tags, and fast loading speeds.

---

5. Mac-Style Code Window

If you are writing HTML directly (not using Markdown), you can wrap your <pre><code> blocks in this window for a beautiful Mac-like UI.

JAVASCRIPT

console.log("Hello, World!");
const theme = "Dark Mode";