Post Shortcodes

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Post Shortcodes
Native HTML is the best SEO friendly!
{tocify} $title={Table of Contents}

Default Buttons

<a class="button" href="https://www.vietrick.com/" target="_blank">Default</a>
<a class="button preview" href="https://www.vietrick.com/" target="_blank">Preview</a>
<a class="button download" href="https://www.vietrick.com/" target="_blank">Download</a>
<a class="button link" href="https://www.vietrick.com/" target="_blank">Link</a>
<a class="button cart" href="https://www.vietrick.com/" target="_blank">Shop cart</a>
<a class="button share" href="https://www.vietrick.com/" target="_blank">Share</a>
<a class="button info" href="https://www.vietrick.com/" target="_blank">More info</a>

Default Preview Download Link Shop cart More info

Colored Buttons

<a class="button green" href="https://www.vietrick.com/" target="_blank">Default</a>
<a class="button preview red" href="https://www.vietrick.com/" target="_blank">Preview</a>
<a class="button download yellow" href="https://www.vietrick.com/" target="_blank">Download</a>
<a class="button link purple" href="https://www.vietrick.com/" target="_blank">Link</a>
<a class="button cart blue" href="https://www.vietrick.com/" target="_blank">Shop cart</a>
<a class="button share orange" href="https://www.vietrick.com/" target="_blank">Share</a>
<a class="button info dark" href="https://www.vietrick.com/" target="_blank">More info</a>
<a class="button white preview" href="https://www.vietrick.com/" target="_blank">Preview</a>

Default Preview Download Link Shop cart More info Preview

Download Buttons

<a class="dl" href="https://www.vietrick.com/#" target="_blank">Lorem Ipsum is simply dummy text</a>
<a class="dl" file-size="Light, Fast & Creative" href="https://www.vietrick.com/#" target="_blank">VTrick Creative Blogger</a>
<a class="dl pdf" file-size="6.0 MB" href="https://www.vietrick.com/#pdf" target="_blank">VTrick Creative Blogger User Manual.pdf</a>
<a class="dl zip" file-size="5.34 MB" href="https://www.vietrick.com/#zip" target="_blank">VTrick Creative Blogger.zip</a>
<a class="dl media" file-size="326.1 MB" href="https://www.vietrick.com/#media" target="_blank">VTrick Creative Blogger Video</a>
<a class="dl code" file-size="324.3 KB" href="https://www.vietrick.com/#code" target="_blank">VTrick Creative Blogger Source Code</a>

Lorem Ipsum is simply dummy text VTrick Creative Blogger VTrick Creative Blogger User Manual.pdf VTrick Creative Blogger.zip VTrick Creative Blogger Video VTrick Creative Blogger Source Code

Alert Boxes

<blockquote class='check'>Lorem Ipsum...</blockquote>
<blockquote class='flag'>Lorem Ipsum...</blockquote>
<blockquote class='warn'>Lorem Ipsum...</blockquote>
<blockquote class='alert'>Lorem Ipsum...</blockquote>
<blockquote class='star'>Lorem Ipsum...</blockquote>

Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.


Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.


Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.


Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.


Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.


Bordered Table

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com


Contact Form

Syntax

<b>{contactForm}</b>

{contactForm}

Code Box

Simple <pre> code

Default PRE
$("#main-nav #s").focus(function());


Codebox syntax powered by Prism

Code box syntax with param: lang="js"

<pre lang="js">$("#main-nav #s").blur(function()...</pre>

👉 Result:

$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});

$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});


Code box syntax with param: lang=""

<pre lang="">$("#main-nav #s").blur(function()...</pre>

Result:

$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});

$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});


Code box syntax with param: lang="css"

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  }

18 Comments

Post a Comment