Table of Contents
Please note that some styles can be used directly in 'Writing view' mode and some can only be used in 'HTML View' mode but we still try to make their use as easy for you as possible.
Image with Caption
Untuk bagian ini anda bisa langsung menggunakannya dalam mode 'Tampilan menulis', caption di gambar ini tidak akan terbaca pada deskripsi/snippet artikel.
Semua gambar dalam artikel akan otomatis memiliki fungsi lightbox kecuali gambar dalam tag <figure> , cobalah klik salah satu gambar dalam postingan ini. |
Image with Grid Layout
Image with Show All Function
Digunakan untuk menyembunyikan beberapa gambar dan akan ditampilkan ketika user mengklik tombol 'Show All'. Fungsi Show All hanya dapat diaktifkan satu kali, Gambar tidak bisa disembunyikan kembali ketika Anda mengaktifkannya.
Image with Scroll Layout
Sama seperti layout gambar diatas, hanya saja pada tampilan seluler gambar akan di susun sejajar dengan tambahan fungsi scroll samping pada tampilan mobile.
Kami juga menambahkan efek smooth scroll pada fitur ini, Silahkan coba buka laman ini pada perangkat seluler anda:
Manual Related Post
Penting untuk diketahui bahwa fitur ini ditulis secara manual, tidak otomatis tampil disetiap halaman.
Dikarenakan ada masalah pada script Related Posts in-Article yang tidak bekerja pada perangkat IOS maka kami memutuskan untuk mengubahnya menjadi manual.
Kelebihannya anda bisa menambahkannya pada paragraf manapun yang anda inginkan, jumlah link tidak terbatas dan judul related yang bisa anda ubah, juga semua link yang anda tambahkan pada artikel terkait ini akan ikut di index oleh robot pencarian sebagai halaman perujuk.
Post Break
Fitur ini dapat anda gunakan untuk memisahkan paragraf atau untuk membuka pembahasan baru dalam postingan, berikut contoh tampilannya:
Paragraph with Text Indent
Pada paragraf ini akan memiliki indentasi baris pertama, sederhanyanya untuk membuat sebuah kalimat yang ada di paragraf pertama menjorok ke dalam dengan nilai yang sudah ditentukan.
Anda bisa menerapkan fitur ke banyak paragraf sesuai kebutuhan
Paragraph with Drop cap
Merupakan huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf atau bagian. Ukuran batas turun biasanya adalah dua garis atau lebih.
Drop cap akan mengubah ukuran huruf pertama paragraf sehingga huruf tersebut turun satu atau beberapa baris ke bawah. Banyak jenis media cetak yang memanfaatkan drop cap seperti buku, majalah, koran dan sebagainya karena dapat menambah daya tari visual.
Blockquote
Harga teman adalah harga yang lebih tinggi dari harga normal karena bertujuan untuk membantu teman yang merintis usaha
—Ivan Lanin
Format style lainnya yang bisa Anda gunakan:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
- Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
- Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
Table
Tabel pada tema ini sudah diset agar mendukung responsive, sebagai contoh jika jumlah kolom atau lebar tabel melebihi lebar layar maka agar tidak merusak layoutnya secara otomatis table akan memiliki fungsi scroll.
Silahkan buka artikel ini pada perangkat seluler anda dan sorot bagian tabel dibawah:
No | Column_1 | Column_2 | Column_3 | Column_4 | Column_5 |
---|---|---|---|---|---|
1 | Data_table_1 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
2 | Data_table_2 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
3 | Data_table_3 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
4 | Data_table_4 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
Manual Table of Content
Ada 2 pilihan yang bisa anda gunakan untuk menambahkan table of content atau daftar isi pada postingan, pertama secara manual dan yang kedua adalah semi otomatis.
Untuk penulisan manual anda harus menambahkan atribut id=' ... ' baru pada setiap tag heading yang ingin anda tambahkan ke daftar isi, kelebihannya adalah anda bisa memilih tag mana yang ingin ditambahkan walau penggunaanya mungkin akan sedikit sulit untuk pemula.
Ini adalah contoh daftar isi yang dibuat secara manual:
Contents
Semi Automatic Table of Content
Pilihan kedua ini akan menambahkan table of content secar otomatis di postingan anda, hanya kekurangannya akan menambahkan setiap tag heading kedalam ToC, urutannya mungkin akan berantakan atau error jika tag heading yang anda tulis teratur
Table of Contents
Syntax Highlighter
Format ini digunakan untuk menuliskan baris kode HTML dalam postingan, biasa dipakai pada blog dengan tema koding atau tutorial blogging.
Berikut contoh tampilannya:
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<title>Sample Page</title>
</head>
<!--[ <body> open ]-->
<body>
<p>Sample content here!</p>
</body>
<!--[ </body> close ]-->
</html>
Anfa juga bisa menuliskan kode <html>
dalam paragraf seperti ini: <p>code</p>
MultiTabs Syntax Highlighter
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<title>Sample Page</title>
</head>
<!--[ <body> open ]-->
<body>
<p>Sample content here!</p>
</body>
<!--[ </body> close ]-->
</html>
/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}
JS here
Show Hide Button
Spoiler:
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion / Toggle Menu
Accordion_first_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_second_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_third_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_fourth_title (alt)
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Note Block
Fitur ini berfungsi untuk menambahkan info penting, kalimat warning atau kalimat sorotan, ada dua style yang bisa anda coba diantaranya:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
Warning!
Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.
External Link
Jika ada link eksternal yang terdapat dalam postingan, anda bisa memberitahukannya kepada user dengan menggunakan fitur ini:
Sample_external_linkButton Link
Standard_buttonAlternative style
Downloadwith download icon:
DownloadAvailable icons:
DemoCatatan: Anda juga bisa menambahkan icon lain menggunakan <svg>
Two buttons in one bar:
Download Link
Lazy Youtube
Berfungsi untuk memuat video youtube setelah halaman di scroll agar mempercepat loading blog
Menunda pemuatan iframe dengan lazysize
Post Reference
Untuk menambahkan daftar referensi artikel yang anda tulis:
Referensi:
www.jagodesain.com