Shortcodes

Peble Jeine
Prestyled Code for Posts

Use the following HTML format in your posts for YouTube videos, images, tables, product description tables, quotations, etc. These pre-styled elements will enhance the visual appeal of your site.

Predefined formats

Make the most out of this theme! While you may already know how to use it, but some features are designed to be utilized in specific ways.


If you are promoting your own Ads, please follow the provided format below. Similarly, if you want to add a YouTube video to your post, there is a specific format to use.


In addition to Ads and YouTube videos, there are several predefined formats available. Simply copy, paste, and fill in your original data.


I believe these preformatted codes will be extremely helpful for sharing your valuable content. If you encounter any issues or have questions, please reach out through the contact form. Thank you.

Adding YouTube Videos to Your Post

If you want to add a YouTube video to your post, use the following HTML code format.


<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. -->

Sidebar Ad

If you are using your own ad, please use the following HTML format. Otherwise, paste the vendor's advertising codes.


<a class="aifwh abwim staic siwiv ioclc sicst ltrgr ooari rcpim athlb" aria-label="Store link" href="https://product.mysite.com" rel="nofollow noopener noreferrer" target="_blank">
<img alt="Advertisement Banner" data-src="banner.jpg" height="000" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="000"/>
</a>

<!-- 
Replace 'https://product.mysite.com' with your store link and 'banner.jpg' with your ad banner image. Replace the 000 with original values. 
-->

Post Advertisement (Top, Middle and Bottom)

If you are using your own ad, please use the following HTML format. Otherwise, paste the vendor's advertising codes.


<div class="etele prohi">	
<a class="ipaas paaim ciihl athlw spiac sucwh staic siwiv ioclc sicst ltrgr paari bihov rcpim athlb" aria-label="Store link" href="https://product.mysite.com" rel="nofollow noopener noreferrer" target="_blank">
<img alt="Advertisement Banner" height="000" 
 data-src="banner.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="000"/>
<span class="spact">Get this theme</span>	
</a>
</div>

<!-- 
Replace 'https://product.mysite.com' with your store link and 'banner.jpg' with your ad banner image. Replace the 000 with original values.
-->

Codes

If you are sharing JavaScript code, please use the following HTML format.


<pre><code>
  //Your code goes here
</code></pre>

Quotation

If you need to include a quotation in your post, use the following HTML code format.


<blockquote>
  <p>Quotation</p>
  <footer>― Author</footer>
</blockquote>

Figure and Caption

Use the following HTML code format for the figure and caption


<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> HTML tag -->

Product Description Table

If you want to add a table for product features and descriptions, use the following format


<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>

Product Description Table Output

The output of the code above is shown below.


Title
Feature Description
Feature Description
Feature Description
Title
Feature Description
Feature Description
Feature Description
Feature Description
Title
Feature Description
Feature Description

Responsive Table (Sample 5 Column 5 Rows table)

The table is optimized for all screen sizes. Use the following HTML code. Here, I used a table with 5 columns and 5 rows.


<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>

<!-- Replace the demo values with your original values. 

If you need a table with 3 rows, remove the last <tr> tag.

To add an additional row, copy the last <tr> tag and place it next to the existing one.

To add a new column, insert a <td> or <th> tag in every <tr> tag.

If you want to remove a column, delete the corresponding <td> or <th> tag from every <tr> tag.

-->

Table Output

The output of the code above is shown below.


Column 1 Column 2 Column 3 Column 4 Column 5
Row 1 Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3 Row 3
Row 4 Row 4 Row 4 Row 4 Row 4
Row 5 Row 5 Row 5 Row 5 Row 5

Column Focus Table

The table is optimized for all screen sizes. Use the following HTML code for a column-focused 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>

Table Output

The output of the code above is shown below.


Year 2022 2023 2024
Sale 95 85 89
Return 2 7 5
Tax 18 18 18
Expenses 17 29 35
Income 58 31 31

Reading is a pleasure