Post Shortcodes

https://vtrick.vietrick.com/p/post-shortcodes.html


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'><p style="margin-right: 30px;">مدونة بلوغينما...</p></blockquote>
<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>

مدونة بلوغينما...ذا كنت مثلي ، فأنا متأكد من أن العديد منكم يقرؤون هذا يعتقدون أن لديك فهمًا جيدًا لماهية التصميم الجرافيكي. اللوحات الإعلانية والشعارات والمجلات وألعاب الفيديو

 

مدونة بلوغينما...ذا كنت مثلي ، فأنا متأكد من أن العديد منكم يقرؤون هذا يعتقدون أن لديك فهمًا جيدًا لماهية التصميم الجرافيكي. اللوحات الإعلانية والشعارات والمجلات وألعاب الفيديو

 

مدونة بلوغينما...ذا كنت مثلي ، فأنا متأكد من أن العديد منكم يقرؤون هذا يعتقدون أن لديك فهمًا جيدًا لماهية التصميم الجرافيكي. اللوحات الإعلانية والشعارات والمجلات وألعاب الفيديو

 

مدونة بلوغينما...ذا كنت مثلي ، فأنا متأكد من أن العديد منكم يقرؤون هذا يعتقدون أن لديك فهمًا جيدًا لماهية التصميم الجرافيكي. اللوحات الإعلانية والشعارات والمجلات وألعاب الفيديو

 

مدونة بلوغينما...ذا كنت مثلي ، فأنا متأكد من أن العديد منكم يقرؤون هذا يعتقدون أن لديك فهمًا جيدًا لماهية التصميم الجرافيكي. اللوحات الإعلانية والشعارات والمجلات وألعاب الفيديو



Bordered Table

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com


Contact Form

Syntax

<b>{contactForm}</b>



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