Shortcode

Shortcode adalah format penulisan yang bersumber dari HTML, salah satu contoh dari Shortcode dengan meempatkan kode agar memberikan efek tambahan di dalam setiap obyek kerja.

Berikut ini adalah contoh-contoh dari Shortcode untuk bisa di terapkan pada design template blogger dari situs ini.

Prem Syntax


<style>
/*framework*/
* {
    max-width: 100%;
}
img {
    display: block;
    margin: auto;
}
body {
    font: normal normal 14px Oswald;
    background: #ffffff;
}
</style>


Kode pemasangannnya sebagai berikut: 


<pre><code>
<style>
/*framework*/
* {
    max-width: 100%;
}
img {
    display: block;
    margin: auto;
}
body {
    font: normal normal 14px Oswald;
    background: #ffffff;
}
</style>
</code></pre>


Kode Button Terbaru

Button red Button orange Button green Button blue Button purple Button yellow Button mint Button aqua Button pink Button white Button grey Button

dark-grey Button


Kode Penerapanya sebagai berikut:


<a class="button" href="https://www.karomah.eu.org/">Button</a>
<a class="button red" href="https://www.karomah.eu.org/">red Button</a>
<a class="button orange" href="https://www.karomah.eu.org/">orange Button</a>
<a class="button green" href="https://www.karomah.eu.org/">green Button</a>
<a class="button blue" href="https://www.karomah.eu.org/">blue Button</a>
<a class="button purple" href="https://www.karomah.eu.org/">purple Button</a>
<a class="button yellow" href="https://www.karomah.eu.org/">yellow Button</a>
<a class="button mint" href="https://www.karomah.eu.org/">mint Button</a>
<a class="button aqua" href="https://www.karomah.eu.org/">aqua Button</a>
<a class="button pink" href="https://www.karomah.eu.org/">pink Button</a>
<a class="button white" href="https://www.karomah.eu.org/">white Button</a>
<a class="button grey" href="https://www.karomah.eu.org/">grey Button</a><br />  <br />
<a class="button dark-grey" href="https://www.karomah.eu.org/">dark-grey Button</a><br />


Button red Button orange Button green Button blue Button purple Button yellow Button mint Button aqua Button pink Button grey Button dark-grey Button

Kode Penerapanya sebagai berikut:


<a class="button transparent" href="https://www.karomah.eu.org/">Button</a>
<a class="button transparent red" href="https://www.karomah.eu.org/">red Button</a>
<a class="button transparent orange" href="https://www.karomah.eu.org/">orange Button</a>
<a class="button transparent green" href="https://www.karomah.eu.org/">green Button</a>
<a class="button transparent blue" href="https://www.karomah.eu.org/">blue Button</a>
<a class="button transparent purple" href="https://www.karomah.eu.org/">purple Button</a>
<a class="button transparent yellow" href="https://www.karomah.eu.org/">yellow Button</a>
<a class="button transparent mint" href="https://www.karomah.eu.org/">mint Button</a>
<a class="button transparent aqua" href="https://www.karomah.eu.org/">aqua Button</a>
<a class="button transparent pink" href="https://www.karomah.eu.org/">pink Button</a>
<a class="button transparent grey" href="https://www.karomah.eu.org/">grey Button</a>
<a class="button transparent dark-grey" href="https://www.karomah.eu.org/">dark-grey Button</a>


Kode di atas adalah contoh tombol yang bisa kamu gunakan untuk halaman post atau halaman tombol download

Penulisa Awalan Artikel Cantik

Untuk format vareasi penulisan seperti contoh awal pertama artikel sebagai berikut

Create amazing user profiles, member directories and forms for login, user registration, password reset and edit profile with our drag-and-drop and advanced builders.

Your members will never have to see your WordPress admin panel. Everything is handled on the frontend. Add beautiful user profiles to your site which can be fully customised to your site's specific requirements.

Display users avatars and allow users to upload their profile pictures from the frontend of your site. Display content previews with an offer to become a member to view the content.



Codenya Penulisa Awalan 


<p><span class="text-dropcap dcap1">C</span>epat</p>
<p><span class="text-dropcap dcap2">Y</span>ayang</p>
<p><span class="text-dropcap dcap3">D</span>apatkan</p>


Membuat Menu Website


<li><a href='#' title=''>Blog</a></li>
<li><a class='dropdown' href='#' title=''>News</a>
<ul class='menus'>
<li><a href='' title=''>Kriminal</a></li>
<li><a href='#' title=''>Breaking</a></li>
<li><a href='#' title=''>Magazine</a></li>
<li><a href='#' title=''>eCommerce</a></li>
</ul>
</li>
<li><a href='#' title=''>Video</a></li>
<li><a class='dropdown' href='#' title=''>Intertainment</a>
<ul class='menus'>
<li><a href='#' title=''>Music</a></li>
<li><a href='#' title=''>Wallpaper</a></li>
<li><a href='#' title=''>Gallery</a></li>
<li><a href='#' title=''>Video</a></li>
</ul>
<li><a href='/p/shortcode.html' title=''>Shortcode</a></li>
</li>


Hasil Membuat Menu Website

  • Blog
  • News
  • Video
  • Intertainment
  • Shortcode


    • Table 2

    Product
    Unit Price
    Quantity
    Date Sold
    Status
    Solid oak work table
    $800
    10
    03/15/2023
    Waiting for Pickup
    Leather iPhone wallet
    $45
    120
    02/28/2023
    In Transit
    27" Apple Thunderbolt displays
    $1000
    25
    02/10/2023
    Delivered
    Bose studio headphones
    $60
    90
    01/14/2023
    Delivered

    Example of a normal h2 Heading Tag

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 

    Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

    Example ul

    • Vestibulum eu porta augue. 
    • Pellentesque at suscipit justo. 
    • Cras tempus in tortor malesuada euismod. 
    • Vivamus sit amet augue et leo pellentesque euismod.

    Success Message

    success message : You successfully read this important messages

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

    Button

    Buttonred Buttonorange Button green Buttonblue Buttonpurple Buttonyellow Buttonmint Buttonaqua Button

    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

    Example ol

    1. Vestibulum eu porta augue. 
    2. Pellentesque at suscipit justo. 
    3. Cras tempus in tortor malesuada euismod. 
    4. Vivamus sit amet augue et leo pellentesque euismod.

    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus