Shortcodes
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<b:skin/>
</head>
<body>
<b:section id='id'/>
</body>
</html>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<b:skin/>
</head>
<body>
<b:section id='id'/>
</body>
</html>
Text Highlights
Text highlight 1
Text highlight 2
Text highlight 3
Text highlight 4
Text highlight 5
Text highlight 6
Text highlight 7
Text highlight 8
Text highlight 9
Text highlight 10
Text highlight 2
Text highlight 3
Text highlight 4
Text highlight 5
Text highlight 6
Text highlight 7
Text highlight 8
Text highlight 9
Text highlight 10
Use the following shortcodes in your posts when using the Sleeik Blogger Template. These codes are fully compatible with the Sleeik template and can also be used in any HTML-based project. All code is W3C-verified to ensure proper markup and standards. Feel free to use them as needed.
Predefined Formats
Just copy and paste the code, then replace the placeholder text or images with your own. These shortcodes help maintain a clean, consistent structure in your blog posts.
Image
<!-- Image figure tag format -->
<figure>
<img alt="Image description" border="0" data-original-height="000" data-original-width="000" height="000" loading="lazy" src="Demo-Image.jpg" title="Image Title" width="000" />
<figcaption>Caption Text</figcaption>
</figure>
<!-- Replace the 000 with original values. If you do not need a caption, remove the <figcaption> tag -->
Headings
<h2>H2 heading</h2>
<h3>H3 heading</h3>
<h4>H4 heading</h4>
Paragraph
<p>Text goes here</p>
Ordered list
<ol>
<li>Ordered list</li>
<li>Ordered list</li>
<li>Ordered list</li>
</ol>
Unordered list
<ul>
<li>Unordered list</li>
<li>Unordered list</li>
<li>Unordered list</li>
</ul>
Quotation
<blockquote>Quotation_text</blockquote>
YouTube Videos
<div class="prohi arvpf">
<iframe class="athlw" loading="lazy"; srcdoc="<style>*{margin:0;overflow:hidden;padding:0;}html,body{height:100%;}img,svg{bottom:0;margin:auto;position:absolute;top:0;width:100%;}svg{filter:drop-shadow(1px 1px 10px hsl(206.5, 70.7%, 8%));transition:all 250ms ease-in-out;}body:hover svg{filter:drop-shadow(1px 1px 10px hsl(206.5, 0%, 10%));transform:scale(1.2);}</style><a href='https://www.youtube.com/embed/YOUTUBE-VIDEO-ID?autoplay=1'><img src='https://img.youtube.com/vi/YOUTUBE-VIDEO-ID/hqdefault.jpg' alt='Video Title'><svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='#ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play-circle'><circle cx='12' cy='12' r='10'></circle><polygon points='10 8 16 12 10 16 10 8'></polygon></svg></a>" src="https://www.youtube.com/embed/YOUTUBE-VIDEO-ID" title="Video Title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- Replace 'YOUTUBE-VIDEO-ID' with your actual YouTube video ID. You need to make this replacement in three places within the HTML code provided above. -->
Text Highlight
<span class="highlight">Text highlight 1</span>
<span class="highlight1">Text highlight 2</span>
<span class="highlight2">Text highlight 3</span>
<span class="highlight3">Text highlight 4</span>
<span class="highlight4">Text highlight 5</span>
<span class="highlight5">Text highlight 5</span>
FQAs
<section class='casec'>
<h2>Section Title</h2>
<div class="caise">
<div class="cacon cacwr">
<button class="caqco caocb">Question</button>
<div class="caaco">
<div class="caaoc">
<div class="caaci">Answer</div>
</div>
</div>
</div>
<div class="cacon cacwr">
<button class="caqco caocb">Question</button>
<div class="caaco">
<div class="caaoc">
<div class="caaci">Answer</div>
</div>
</div>
</div>
<div class="cacon cacwr">
<button class="caqco caocb">Question</button>
<div class="caaco">
<div class="caaoc">
<div class="caaci">Answer</div>
</div>
</div>
</div>
</div>
</section>
<section class='casec'>
<h2>Section Title</h2>
<div class="caise">
<div class="cacon cacwr">
<button class="caqco caocb">Question</button>
<div class="caaco">
<div class="caaoc">
<div class="caaci">Answer</div>
</div>
</div>
</div>
<div class="cacon cacwr">
<button class="caqco caocb">Question</button>
<div class="caaco">
<div class="caaoc">
<div class="caaci">Answer</div>
</div>
</div>
</div>
<div class="cacon cacwr">
<button class="caqco caocb">Question</button>
<div class="caaco">
<div class="caaoc">
<div class="caaci">Answer</div>
</div>
</div>
</div>
</div>
</section>
<section class='casec'>
<h2>Section Title</h2>
<div class="caise">
<div class="cacon cacwr">
<button class="caqco caocb">Question</button>
<div class="caaco">
<div class="caaoc">
<div class="caaci">Answer</div>
</div>
</div>
</div>
<div class="cacon cacwr">
<button class="caqco caocb">Question</button>
<div class="caaco">
<div class="caaoc">
<div class="caaci">Answer</div>
</div>
</div>
</div>
<div class="cacon cacwr">
<button class="caqco caocb">Question</button>
<div class="caaco">
<div class="caaoc">
<div class="caaci">Answer</div>
</div>
</div>
</div>
</div>
</section>
Table
<table class="ortab">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
</table>Description Table
<table class="detab">
<tbody>
<tr>
<th>Title</th>
</tr>
<tr>
<th>Feature</th>
<td>Description</td>
</tr>
<tr>
<th>Feature</th>
<td>Description</td>
</tr>
<tr>
<th>Feature</th>
<td>Description</td>
</tr>
<tr>
<th>Title</th>
</tr>
<tr>
<th>Feature</th>
<td>Description</td>
</tr>
<tr>
<th>Feature</th>
<td>Description</td>
</tr>
<tr>
<th>Feature</th>
<td>Description</td>
</tr>
<tr>
<th>Feature</th>
<td>Description</td>
</tr>
<tr>
<th>Title</th>
</tr>
<tr>
<th>Feature</th>
<td>Description</td>
</tr>
<tr>
<th>Feature</th>
<td>Description</td>
</tr>
</tbody>
</table>Column Focus Table
<div class="cotac">
<table class="cotab">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">2022</th>
<th scope="col">2023</th>
<th scope="col">2024</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Sale</th>
<td>95</td>
<td>85</td>
<td>89</td>
</tr>
<tr>
<th scope="row">Return</th>
<td>2</td>
<td>7</td>
<td>5</td>
</tr>
<tr>
<th scope="row">Tax</th>
<td>18</td>
<td>18</td>
<td>18</td>
</tr>
<tr>
<th scope="row">Expenses</th>
<td>17</td>
<td>29</td>
<td>35</td>
</tr>
<tr>
<th scope="row">Income</th>
<td>58</td>
<td>31</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>Header Image Ad
<div class="etele prohi">
<a class="ipaas ciihl athlw spiac sucwh staic siwiv ioclc sicst ibdbi ltrgr cobns bihov rcpim athlb" aria-label="Store link: Buy this theme!" href="https://cliup.etsy.com/" rel="nofollow noopener noreferrer" target="_blank">
<img alt="Advertisement Banner" height="90"
data-src="https://blogger.googleusercontent.com/img/a/AVvXsEj3XGxuPI_Y3VbZPUcInf8NkYnc5gR9nZjxFHrEakmdO8NMAWqeXJJFzPxQsCNuH2aDCQddPmFr553msQgdjxEMrJyXw-L9crz_FrD5lePEZTBX4ijzX64KJQIEdb1cH-rOOVKQEmLLnhwgaLaL9WmK7hQVGoppaXYUW_yfFuU4Xv7KM2qIG_Z0RWIEEcxT=s970" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg" width="998"/><span class="vhtel">Buy this theme!</span>
</a>
</div>Sidebar Image Ad
<a class="abibs staic siwiv ioclc sicst ibdbi ltrgr ooari rcpim athlb" aria-label="Store link: Buy this theme!" href="https://cliup.etsy.com" rel="nofollow noopener noreferrer" target="_blank"><img alt="Advertisement Banner" data-src="https://blogger.googleusercontent.com/img/a/AVvXsEg6YfiNg7UNm0DpSbhap67zPjP-x1dSVQ2c49AWeIqXGICQQiOoRmUO7UghWwTv3Qq-E0yci8sl8A0cPvvxoen7sV76QJISm1nfP41ajubPD2h2OYV2MYyZqRt1spmM6USv77_1UB_rlZCNSzeM-5u3pPVNYdblTnt1CTcUwGh0eIyfxjG3PqUkho2dPIvs=s1080" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg" height="1080" width="1080"/><span class="vhtel">Buy this theme!</span></a>Footer Image Ad
<div class="etele prohi">
<a class="ipaas ciihl athlw spiac sucwh staic siwiv ioclc sicst ibdbi ltrgr ctbws bihov rcpim athlb" aria-label="Store link: Buy this theme!" href="https://cliup.etsy.com/" rel="nofollow noopener noreferrer" target="_blank">
<img alt="Advertisement Banner" height="90"
data-src="https://blogger.googleusercontent.com/img/a/AVvXsEhkVXAGxGHUwcQc3qwy3AnpTBv5IzJGuNlg8nfPWWiLmbjc7kNYcrFbNYkDyr1-9xgURO395iiChMRQVe8mp-Xif7II9evC0rZtvUD9phJKaYEhyj8aKxWkGfcfo-vnlAmseBRvqe1-04KD6wSALtzkKJjD3POcb-6rbOr1yxH-aCqCH2-O4BKQHxpnlcMV=s980" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg" width="998"/><span class="vhtel">Buy this theme!</span>
</a>
</div>Header Text Ad
<a class="hsfta tashe lbrte" aria-label="Store link: Buy this theme!" href="https://cliup.etsy.com" rel="nofollow noopener noreferrer" target="_blank">
<span class="vhtel">Live Preview</span>
</a>Sidebar Text Ad
<a class="hsfta tassi lbrte" aria-label="Store link: Buy this theme!" href="https://cliup.etsy.com" rel="nofollow noopener noreferrer" target="_blank">
<span class="vhtel">Live Preview</span>
</a>Footer Text Ad
<a class="hsfta tasfo lbrte" aria-label="Store link: Buy this theme!" href="https://cliup.etsy.com" rel="nofollow noopener noreferrer" target="_blank">
<span class="vhtel">Live Preview</span>
</a>If you need additional support, feel free to contact me.