Table of Contents
Related Posts
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'.
Paragraph
Use p tag to add paragraphs to the article.
<!--[ Paragraph ]-->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</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'>Your_paragraph_is_here.</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'>Y</span>our_paragraph_is_here.</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' 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.
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>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 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,galWrpor 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 theimgtag. - To explicitly opt-out lightbox automatically containing the
altattribute contents, add attributedata-caption='false'to theimgtag.
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.
<!--[ Images with Show All Function ]-->
<input class='inImg hidden' id='for-hideImage-1' 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='for-hideImage-1' 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 (Type 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.
Here is another scroll layout style but it will only be active in mobile view. Please try opening this page on your mobile device.
<!--[ Images with Scroll Layout (Type 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='/>Good to know:
- All the images in the post are automatically lazyloaded.
- Since images are automatically lazyloaded, we discourage the use of above code snippet.
- To explicitly opt-out automatic lazyload for a particular image, add attribute
data-lazyload='false'to theimgtag.
Warning!
Never manually lazyload the first image of the post. Doing so, results in unexpected behaviours.
External Link
Notifies users if the link will lead to another site.
link_titleButton
link_title link_title link_title link_titleDownload Link
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
Anonymous
<!--[ 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
Anonymous
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
Anonymous
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
Table
| 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 |
Syntax Highlighter
Used to define lines of computer code (HTML, CSS, Javascript, etc.) in posts.
<pre data-comment='.html' data-source='src/index.html'><code>code_here</code></pre>code tag can be used to define inline code like this: code_here.
<code>code_here</code>Good to know:
- 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 atleast one code block in the post to make sure we don't make extra requests.
- Inline codes are also highlighted.
MultiTabs Syntax Highlighter
Used to group multiple code blocks together.
[HTML] code_here[CSS] code_here[JS] code_here[JSON] code_here<!--[ MultiTabs Syntax Highlighter ]-->
<div class='pre tabs'>
<!--[ Active function ]-->
<input id='preT-1' type='radio' name='preTab' checked=''/>
<input id='preT-2' type='radio' name='preTab'/>
<input id='preT-3' type='radio' name='preTab'/>
<input id='preT-4' type='radio' name='preTab'/>
<!--[ Header/title ]-->
<div>
<!--[ Change atribute data-text='...' to replace title ]-->
<label for='preT-1' data-text='HTML'></label>
<label for='preT-2' data-text='CSS'></label>
<label for='preT-3' data-text='JS'></label>
<label for='preT-4' data-text='JSON'></label>
</div>
<!--[ Content ]-->
<pre class='preC-1' data-source='src/index.html'><code>[HTML] code_here</code></pre>
<pre class='preC-2' data-source='src/style.css'><code>[CSS] code_here</code></pre>
<pre class='preC-3' data-source='src/main.js'><code>[JS] code_here</code></pre>
<pre class='preC-4' data-source='src/rules.json'><code>[JSON] 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
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
Title_here
text_here
Title_here
text_here
Title_here
text_here
Title_here
text_here
Title_here
text_here
Table of Contents
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
Manual Related Posts
Automatic Related Posts
Related Posts
<!--[ 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 posts with a particular label.
- To specify a label, add attribute
data-label='My Label'to.aRelelement. - If attribute
data-labelis not specified or there is no post with label specified indata-label, then it will fallback to a random label from the current post if it is unsed 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>Defer YouTube
Defers iframe loading using @aFarkas/lazysizes.
<!--[ Defer YouTube ]-->
<div class='videoYt'>
<iframe class='lazyload' data-src='https://www.youtube.com/embed/DT61L8hbbJ4' 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>Header Subtitle
Adds subtitle next to header title in a particular post or page.
<style>
/* Custom Header subtitle */
.headH::after{content:'Subtitle'}
</style>Essentials
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-->