Shortcodes Theme Blogger

Shortcode adalah sebuah alat yang sangat berguna dalam pengelolaan situs web, dan salah satu contoh yang patut dicontoh adalah shortcode yang dirancang khusus untuk mempermudah navigasi. Dengan menggunakan shortcode ini, pengguna dapat dengan cepat dan efisien mengakses berbagai bagian penting dari situs tanpa harus menelusuri halaman-halaman yang panjang.

Fungsionalitas ini sangat bermanfaat terutama untuk situs web yang memiliki banyak halaman atau sejumlah besar konten. Dengan hanya menambahkan shortcode ini ke halaman atau postingan, pengelola situs dapat meningkatkan pengalaman pengguna dengan memungkinkan akses yang lebih mudah dan cepat ke berbagai bagian situs yang relevan. Singkatnya, ini adalah solusi yang cerdas untuk memperbaiki navigasi situs dan membuat pengunjung merasa lebih nyaman dan efisien saat menjelajahi konten yang disediakan.

Script TOC

<a class="tocify-title" href="javascript:;" role="button" title="Table of Contents">Table of Contents</a>
<div class="tocify-inner" style="display: none;">
  <ol data-toc="div.item-post-inner" data-toc-headings="h2,h3,h4"></ol>
</div>
<script>
  document.querySelector('.tocify-title').addEventListener('click', function() {
    var tocInner = document.querySelector('.tocify-inner');
    if (tocInner.style.display === 'none') {
      tocInner.style.display = 'block';
    } else {
      tocInner.style.display = 'none';
    }
  });
</script>

Default Buttons

Default Button

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn">Default Button</a>

Preview

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn preview">Preview</a>

Download

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn download">Download</a>

Visit a Link

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn link">Visit a Link</a>

Buy Now

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn cart">Buy Now</a>

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn share">Share</a>

More Info

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn info">More Info</a>

Colored Buttons

Colored Button

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn colored-button" style="background-color:#16a085;">Colored Button</a>

Preview

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn preview colored-button" style="background-color:#27ae60;">Preview</a>

Download

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn download colored-button" style="background-color:#2980b9;">Download</a>

Visit a Link

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn link colored-button" style="background-color:#8e44ad;">Visit a Link</a>

Buy Now

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn cart colored-button" style="background-color:#f39c12;">Buy Now</a>

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn share colored-button" style="background-color:#e74c3c;">Share</a>

More Info

<a href="https://www.mtalkblog.com/" rel="nofollow" target="_blank" class="button btn info colored-button" style="background-color:#34495e;">More Info</a>

Alert Boxes

<div class="alert-message alert-success">This is Script Code For Success Alert</div>

<div class="alert-message alert-info">This is Script For New Info Alert</div>

<div class="alert-message alert-warning">This is Script Code For Warning Alert</div>

<div class="alert-message alert-error">This is Script Code For Error Alert</div>

Bordered Table

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

Contact Form

<div class="contact-form">

<div class="widget ContactForm" data-version="2" id="ContactForm1">

<div class="widget-title">

<h3 class="title">Formulir Kontak</h3>

</div>

<div class="widget-content contact-form-widget">

<div class="form">

<form name="contact-form">

<input aria-label="Nama" class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="">

<input aria-label="Email *" class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="">

<textarea aria-label="Pesan *" class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan *" rows="5"></textarea>

<input class="contact-form-button btn contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim">

<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>

<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>

</form>

</div>

</div>

</div>

</div>

Code Box

<h2 id="Code Box">Code Box</h2>
<pre class="code-box"> Kode/Script dengan Karakter Escape </pre>

Note: Masukkan Kode Yang Telah Di Modifikasi Dengan Karakter Escape

Baca Juga: Cara Mengedit Kode HTML Menjadi Karakter Escape