production

Theme62
Docs Sign In Sign Up
Panduan Shortcode Dinamis
Theme62.com

Daftar Isi
Panduan Shortcode Dinamis

Shortcode dinamis adalah shortcode yang dapat disesuaikan, anda dapat dengan bebas membuat shortcode sesuai kemauan anda, shortcode dinamis menggunakan tanda kurung siku [...] sebagai identifikasinya.

Contoh kasus penggunaan dari shortcode dinamis, katakanlah anda memiliki kode yang sangat panjang dan sering digunakan, alih-alih menggunakan kode yang sangat panjang tersebut, anda cukup menggunakan shortcode dinamis untuk membuatnya lebih ringkas dan cepat.

Shortcode dinamis dapat diterapkan di widget maupun postingan, kecuali dalam area pengaturan shortcode dinamis di Tata Letak Blogger bagian paling bawah.

Cara menambahkan shortcode dinamis

  1. Buka Blogger.com -> Tata Letak
  2. Di bagian area pengaturan Shortcode, tambahkan widget baru
  3. Pilih HTML/JavaScript
  4. Judul :
    Isi dengan nama shortcode (tidak perlu dengan kurung siku)
    Konten :
    Isi dengan kode anda

Untuk memulai, kita ambil contoh sederhana membuat sebuah tombol menggunakan shortcode dinamis.

Judul Konten
btn 
	<button>Download</button>

Untuk menggunakan shortcode tersebut, gunakan [btn/] maka akan tampil berikut :

	<button>Download</button>

Atribut dan Isi

Agar lebih dinamis, anda dapat menerapkan atribut dan isi, identifikasinya sebagai berikut :

Atribut : #{nama_atribut}
Isi : #{}

Kecuali di Blade Codes, tulis langsung nama atributnya nama_atribut

Contoh

Judul Konten
btn 
	<a class="button #{style}" href="#{url}">
    #{}
</a>

Shortcode [btn style="rounded" url="//example.com"]Example[/btn] akan menghasilkan berikut :

	<a class="button rounded" href="//example.com">
    Example
</a>

Blade Codes

Kami juga memberikan fitur Blade Codes yang mirip dengan Template Engine Laravel, digunakan untuk mempermudah pembuatan kode yang kompleks.

Panduan Blade Codes
Panduan Blade Codes
https://theme62.com/id/docs/blade

Shortcode siap pakai

Berikut ini adalah shortcode siap pakai yang dibuat oleh kami.

Youtube

Digunakan untuk memasang video youtube dengan fitur lazyload.

Judul Konten
youtube 
	<iframe width="560" height="315" src="https://www.youtube.com/embed/#{id}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Atribut

Atribut shortcode

id Isi dengan ID video youtube.
Contoh: https://www.youtube.com/watch?v=9wMNHyTe03s
Maka ID nya adalah 9wMNHyTe03s

Contoh

Shortcode [youtube id="9wMNHyTe03s"/] akan menghasilkan berikut :

	<iframe width="560" height="315" src="https://www.youtube.com/embed/9wMNHyTe03s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Button

Digunakan untuk membuat link bergaya tombol.

Judul Konten
button 
	<a class="button #{style}" href="#{url}">
    #{}
</a>

Atribut

Atribut shortcode

style Isi dengan gaya tombol, seperti: rounded, outlined, icon-download.
url Isi dengan url.

Contoh

Shortcode [button style="rounded" url="//example.com"]Example[/button] akan menghasilkan berikut :

	<a class="button rounded" href="//example.com">
    Example
</a>

Download File

Digunakan untuk membuat tombol download file.

Judul Konten
download 
	<div class="box-download">
    <div>
        #{ext}
    </div>
    <div>
        <span>#{file}</span>
        <span>#{size}</span>
    </div>
    <div>
        <a href="#{url}" class="button icon-download">Download</a>
    </div>
</div>

Atribut

Atribut shortcode

ext Isi dengan ekstensi file.
file Isi dengan nama file.
size Isi dengan ukuran file.
url Isi dengan url download file.

Contoh

Shortcode [download file="template.zip" size="150KB" ext="zip" url="#"/] akan menghasilkan berikut :

	<div class="box-download">
    <div>
        zip
    </div>
    <div>
        <span>template.zip</span>
        <span>150KB</span>
    </div>
    <div>
        <a href="#" class="button icon-download">Download</a>
    </div>
</div>

Alert

Digunakan untuk membuat pesan peringatan.

Judul Konten
alert 
	@var type = "info"
<div class="alert alert-#{type}">
    #{}
</div>

Atribut

Atribut shortcode

type Isi dengan jenis peringatan, seperti: success, info, warning, error.
Setelan bawaan berisi "info".

Contoh

Shortcode [alert]Lorem Ipsum is simply dummy text[/alert] akan menghasilkan berikut :

	<div class="alert alert-info">
    Lorem Ipsum is simply dummy text
</div>

Shortcode [alert type="warning"]Lorem Ipsum is simply dummy text[/alert] akan menghasilkan berikut :

	<div class="alert alert-warning">
    Lorem Ipsum is simply dummy text
</div>

Feed Posts

Digunakan untuk memuat postingan dari feed.

Anda dapat menggunakan ini untuk membuat related posts (baca juga) di tengah postingan dengan menerapkan shortcode statis {post:before} {post:middle} {post:after}

Panduan Plugin Insert to Post
Panduan Plugin Insert to Post
https://theme62.com/id/docs/plugin-insert-to-post
Judul Konten
feedposts 
	@var max = 3
<div class="list-container">
    @if text
    <div class="list-header">
        <div class="list-header-label">#{text}</div>
    </div>
    @endif
    <div class="list-content">
        <ul class="FeedPosts">
            @if label
            <div class="data-labels notranslate" hidden>#{label}</div>
            @endif
            <div class="data-maxposts notranslate" hidden>#{max}</div>
            <div class="data-content notranslate" hidden>
                <li>
                    <a href="##{url}">##{title}</a>
                </li>
            </div>
        </ul>
    </div>
</div>

Atribut

Atribut shortcode

text Isi dengan header feedposts, seperti: Baca Juga, Postingan Terkait.
Atribut text tidak wajib, anda dapat menghapusnya jika tidak digunakan.
label Isi dengan label (case sensitive), postingan hanya akan tampil sesuai dengan label yang ditentukan.
Jika ingin banyak label, pisahkan dengan , seperti: Tips,Technology
Atribut label tidak wajib, anda dapat menghapusnya jika tidak digunakan, maka akan tampil sesuai dengan label saat ini.
max Isi dengan maksimal postingan yang tampil.
Setelan bawaan berisi "3".

Contoh

Shortcode [feedposts text="Baca Juga"/] akan menghasilkan berikut :

	<div class="list-container">
    <div class="list-header">
        <div class="list-header-label">Baca Juga</div>
    </div>
    <div class="list-content">
        <ul class="FeedPosts">
            <div class="data-maxposts notranslate" hidden>3</div>
            <div class="data-content notranslate" hidden>
                <li>
                    <a href="#{url}">#{title}</a>
                </li>
            </div>
        </ul>
    </div>
</div>