Shortcodes

Sleeik Blogget Template Shortcodes
Sleeik Blogget Template Shortcodes

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>

If you need additional support, feel free to contact me.