All Style, Text and Writing Formats and Other Additional Features

Xin lưu ý rằng một số kiểu có thể được sử dụng trực tiếp trong chế độ 'Chế độ xem viết' và một số chỉ có thể được sử dụng ở chế độ 'Chế độ xem HTML' nhưng chúng tôi vẫn cố gắng làm cho việc sử dụng chúng dễ dàng nhất có thể cho bạn.

Hình ảnh có chú thích

Đối với phần này, bạn có thể trực tiếp sử dụng nó ở chế độ 'Chế độ xem viết', chú thích trong hình ảnh này sẽ không được đọc trong mô tả / đoạn trích bài viết.

Tất cả các kiểu chữ, kiểu chữ và định dạng bài viết

Tất cả các hình ảnh trong bài viết sẽ tự động có chức năng hộp đèn ngoại trừ các hình ảnh trong thẻ , hãy thử nhấp vào một trong các hình ảnh trong bài đăng này.<figure>

Hình ảnh với bố cục lưới

Hình ảnh với Show All Function

Được sử dụng để ẩn một số hình ảnh và sẽ được hiển thị khi người dùng nhấp vào nút 'Hiển thị tất cả'. Chức năng Hiển thị tất cả chỉ có thể được kích hoạt một lần, Hình ảnh không thể bị ẩn lại khi bạn bật nó.

Hiển thị tất cả

Hình ảnh với bố cục cuộn

Cũng giống như bố cục hình ảnh ở trên, chỉ là trên màn hình di động, hình ảnh sẽ được sắp xếp song song với chức năng cuộn bên bổ sung trên màn hình di động.

Chúng tôi cũng đã thêm hiệu ứng cuộn mượt mà vào tính năng này, vui lòng thử mở trang này trên thiết bị di động của bạn:

Hướng dẫn sử dụng bài viết liên quan

Điều quan trọng cần lưu ý là tính năng này được viết thủ công, không tự động xuất hiện trên mọi trang.

Vì có vấn đề với tập lệnh Bài viết liên quan trong bài viết không hoạt động trên thiết bị iOS, chúng tôi quyết định thay đổi nó thành thủ công.

Ưu điểm là bạn có thể thêm nó vào bất kỳ đoạn nào bạn muốn, số lượng liên kết là không giới hạn và tiêu đề liên quan mà bạn có thể thay đổi, ngoài ra tất cả các liên kết mà bạn thêm vào bài viết liên quan này sẽ được robot tìm kiếm lập chỉ mục dưới dạng trang giới thiệu.

Baca juga :

Sau giờ giải lao

Bạn có thể sử dụng tính năng này để tách các đoạn văn hoặc để mở một cuộc thảo luận mới trong một bài đăng, đây là một ví dụ về giao diện của nó:

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

Image with Caption
Manual Related Post
Post Break
Blockquote

With sub-heading

Heading_title

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

Image with Caption
Image with Grid Layout
Image with Show All Function
Image with Scroll Layout
Manual Related Post
Post Break
Paragraph with Text Indent
Paragraph with Drop cap
Blockquote
Table
Manual Table of Content
Semi Automatic Table of Content
Syntax Highlighter
MultiTabs Syntax Highlighter
Show Hide Button
Accordion / Toggle Menu
Note Block
External Link
Button Link
Download Link
Lazy Youtube
Post Reference

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 dalam paragraf seperti ini: <html><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