Exploring Typography and Element Styles of the Simpli Blogger Template

Discover Simpli Template's Typography & Styles: Headings, Lists, Hyperlinks, Images, Videos & More!

Heading <h2>

Subheading <h3>

Minor Heading <h4>

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

 This is bold text using the `<strong>` element. This is bold text using the `<b>` element. 

This is emphasized text using the `<em>` element. This is italicized text using the `<i>` element.

The underlined texts use `<span class='underline'>` because underlined tag `<u>` is not SEO Friendly. You just need to set the text to underlined with the Blogger post editor, this template will automatically change it into `<span>`.

This is text with strikethrough using the `<s>` element. 

This is ^superscript text using the `<sup>` element. This is _subscript text using the `<sub>` element.

This is a hyperlink to ZendCode using the `<a>` element. 

Dropcaps

Skillful in crafting engaging content and connecting with their audience, a blogger uses their creativity and expertise to shape compelling narratives that resonate with readers worldwide.

Inspired by the world around them, a blogger embarks on a journey of self-expression, sharing their unique perspectives and insights to foster a community of like-minded individuals.

Motivated to inspire positive change, a blogger uses their platform to address pressing issues, sparking discussions and promoting awareness on topics that matter.

Passionate about storytelling, a blogger weaves words into captivating tales, transporting readers to far-off lands and exploring the depths of human emotion.

Loyal to their readers, a blogger cultivates authenticity, building trust through genuine interactions and maintaining a strong sense of integrity in their work.

Innovative in their approach, a blogger adapts to the ever-changing digital landscape, embracing new technologies and trends to reach a broader audience.

Blockquote

Standard:

Blogging is the art of sharing thoughts, inspiring minds, and connecting hearts across the boundless realm of the internet.

With author (cite element):

Writing is a journey of discovery, for every sentence is an exploration into the unknown, and each paragraph a revelation of the self. Khaled Hosseini

Code Highlighter

If you want to use the `<code>` element to highlight code or monospaced text, you don't need to write it manually.

Just wrap your code into backticks (`). Note: You must place it within a paragraph for proper functionality.

The result would be like this: `This is your code using code element`.

The `<code>` element is used to represent a fragment of computer code inline within the text of a paragraph or any other inline content.

It is typically used to highlight code snippets or programming-related terms within a sentence or paragraph.

If you want to use a couple lines of code, use `<pre>`.

function greet(name) {
	return "Hello, " + name + "!";
}

var userName = "John";
var greeting = greet(userName);

console.log(greeting);

Lists

Ordered List with Numbers

1. First item
2. Second item
3. Third item

Unordered List with Bullets

• Apple
• Orange
• Banana

Nested Unordered List

• Parent item 1
  • Nested item 1
  • Nested item 2
  • Nested item 3
• Parent item 2
• Parent item 3
• Nested item 4
• Nested item 5

Boxes

Images 

We offer a diverse range of image styles to enhance your viewing experience: 

Image Lightbox

Click on an image, and it opens in a sleek and elegant lightbox, allowing you to focus solely on the image without any distractions. 

This a default Image with a caption on Blogger Post Editor

We provide 3 styles of caption: fill, outline, and underline. The above example is fill style, which is the default style if the class name not defined. 

Below is the outline style: 

This caption uses the class name outline.

Last, underline: 

This caption uses the class name underline.

Videos or YouTube Embed

As of 2023, lazy loading for iframes is supported and can be achieved using the loading attribute on the `<iframe>` element. So, simply add `loading="lazy"` attribute on the iframe. 

Tabs

You can add tabs as much as you want. The tab title will be scrollable with buttons to scroll.

The Vertical Tabs

To create vertical tabs, simply add an additional class name: `vertical`. 

Accordions

An accordion is a widely-used user interface component that allows content to be hidden or revealed with ease. 

Frequently employed in FAQ (Frequently Asked Questions) sections, an accordion presents a list of questions or headings, and when users click on a question, its associated answer smoothly expands, displaying the relevant content. 

Tables