Beranda
Documentation

SimWhite UI Documentation

Team Tokko

Introduce

Langkah-Langkah Awal

  1. Instalasi Blogger
  2. Dapatkan Dan Import Dummy Content
  3. Penting Gunakan Twinny Framework - Dashboard Settings:
  4. Aktifkan Search Reference
  5. Work With Blogger  Designer Tool

Not all of the styles below can be used directly in "Writing view" mode, but there are also some features that can only be used from "HTML View" mode.

Image with Caption and Auto Lightbox

Caption di gambar ini tidak akan terbaca pada deskripsi/snippet artikel. Anda juga dapat memilih untuk tetap membuat caption terbaca pada snippet artikel

All Style Typography and Format Posts
Semua gambar dalam artikel akan otomatis memiliki fungsi lightbox kecuali gambar dalam tag <figure>, cobalah klik salah satu gambar dalam postingan ini.

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:

Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
<!--[ Scroll Image ]-->
<div class="psImg scImg scrlH">  
<div class="zmImg"> .... </div>
  <div class="zmImg"> .... </div>
  <div class="zmImg"> .... </div>
</div>

Manual Related Post

Penting untuk diketahui bahwa fitur ini ditulis secara manual, tidak otomatis tampil disetiap halaman.

Baca juga : 
<div class="pRelate notranslate">
  <!--[ Related title ]-->
  <b>Baca juga :</b>

  <ul>
    <li><a href="#">Split Post - Split Article Into Several Pages</a></li>
    <li><a href="#">Tabs Post - Split Article with Tab Function</a></li>
    <li><a href="#">Post with Full Page Feature</a></li>
  </ul>
</div>

Post Break

Fitur ini dapat anda gunakan untuk memisahkan paragraf atau untuk membuka bab 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.

<span class="dropCap">M</span>

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 dapat 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.
<blockquote class="s-1 notranslate">
  <div>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. 
    <ul>
      <li>Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.</li>
      <li>Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</li>
    </ul>
  </div>
</blockquote>

Table

Tabel pada tema ini sudah disetting 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 
<div class="table">
  <table style="white-space: nowrap;">
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Data_table_1</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data_table_2</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Data_table_3</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Data_table_4</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

Manual Table of Content

Anda bisa memilih untuk menggunakan ToC manual jika tidak ingin semua tag judul/heading(h1, h2, h3, h4, h5, h6) ditampilkan dalam Table of Contents.

Untuk penulisan manual anda harus menambahkan atribut id=' ... ' baru pada setiap tag heading yang ingin anda tambahkan ke daftar isi, mungkin sedikit sulit diterapkan tapi Anda bisa memilih Judul mana yang ingin ditampilkan.

Contents
  1. Image with Caption
  2. Manual Related Post
  3. Post Break
  4. Blockquote

With sub-heading

  1. Heading_title
    1. Subheading_1
    2. Subheading_2
    3. Subheading_3
<details class="sp toc" open="">
  <summary data-show="Show all" data-hide="Hide all">Contents</summary>  
  <div class="toC">
    <ol>
      <li><a href="#Image_with_Caption_and_Auto_Lightbox">Image with Caption</a></li>
      <li><a href="#Manual_Related_Post">Manual Related Post</a></li>
      <li><a href="#Post_Break">Post Break</a></li>
      <li><a href="#Blockquote">Blockquote</a></li>
    </ol>

    <!--[ Sample with subheading ]-->
    <p>With sub-heading</p>
    <ol>
      <li><a href="javascript:;">Heading_title</a>
        <ol>
          <li><a href="javascript:;">Subheading_1</a></li>
          <li><a href="javascript:;">Subheading_2</a></li>
          <li><a href="javascript:;">Subheading_3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>

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 
<details class="sp toc">
    <summary data-show="Show all" data-hide="Hide all">Table of Contents</summary>
    <div class="toC" id="toContent">
        <ol>
            <li><a href="#Image_with_Caption_and_Auto_Lightbox">Image with Caption and Auto Lightbox</a></li>
            <li><a href="#Image_with_Grid_Layout">Image with Grid Layout</a></li>
            <li><a href="#Image_with_Show_All_Function">Image with Show All Function</a></li>
            <li><a href="#Image_with_Scroll_Layout">Image with Scroll Layout</a></li>
            <li><a href="#Manual_Related_Post">Manual Related Post</a></li>
            <li><a href="#Post_Break">Post Break</a></li>
            <li><a href="#Paragraph_with_Text_Indent">Paragraph with Text Indent</a></li>
            <li><a href="#Paragraph_with_Drop_cap">Paragraph with Drop cap</a></li>
            <li><a href="#Blockquote">Blockquote</a></li>
            <li><a href="#Table">Table</a></li>
            <li><a href="#Manual_Table_of_Content">Manual Table of Content</a></li>
            <li><a href="#Semi_Automatic_Table_of_Content">Semi Automatic Table of Content</a></li>
            <li><a href="#Syntax_Highlighter">Syntax Highlighter</a></li>
            <li><a href="#MultiTabs_Syntax_Highlighter">MultiTabs Syntax Highlighter</a></li>
            <li><a href="#Show_Hide_Button">Show Hide Button</a></li>
            <li><a href="#Accordion_/_Toggle_Menu">Accordion / Toggle Menu</a></li>
            <li><a href="#Note_Block">Note Block</a></li>
            <li><a href="#External_Link">External Link</a></li>
            <li><a href="#Button_Link">Button Link</a></li>
            <li><a href="#Download_Link">Download Link</a></li>
            <li><a href="#Lazy_Youtube">Lazy Youtube</a></li>
            <li><a href="#Post_Reference">Post Reference</a></li>
        </ol>
    </div>
</details>

Syntax Highlighter

Digunakan untuk menuliskan baris kode HTML dalam postingan

<!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
<div class="pre tb">
  <!--[ Active function ]-->
  <input class="prei hidden" id="preT-1" type="radio" name="preTab" checked="">
  <input class="prei hidden" id="preT-2" type="radio" name="preTab">
  <input class="prei hidden" id="preT-3" type="radio" name="preTab">
  <!--[ Header/title ]-->
  <div class="preH tbHd scrlH">
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for="preT-1" data-text="HTML"></label>
    <label for="preT-2" data-text="CSS"></label>
    <label for="preT-3" data-text="JS"></label>
  </div>

  <!--[ Content ]-->
  <div class="preC-1">
    <pre><i class="gray">&lt;!DOCTYPE html&gt;</i>
&lt;<i class="red">html</i> dir='<i class="blue">ltr</i>' lang='<i class="blue">en</i>'&gt;
  &lt;<i class="red">head</i>&gt;
    &lt;<i class="red">title</i>&gt;<i class="block">Sample Page</i>&lt;/<i class="red">title</i>&gt;
  &lt;/<i class="red">head</i>&gt;

  <i class="gray">&lt;!--[ &lt;body&gt; open ]--&gt;</i>
  &lt;<i class="red">body</i>&gt;
    &lt;<i class="red">p</i>&gt;<i class="green">Sample content here!</i>&lt;/<i class="red">p</i>&gt;
  &lt;/<i class="red">body</i>&gt;
  <i class="gray">&lt;!--[ &lt;/body&gt; close ]--&gt;</i>
&lt;/<i class="red">html</i>&gt;</pre>
  </div>
  <div class="preC-2">
    <pre><i class="gray">/* Standar CSS */</i>
::selection{color:#fff;background:var(--linkC)}
<i class="red">*</i>, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
<i class="red">h1</i>, <i class="red">h2</i>, <i class="red">h3</i>, <i class="red">h4</i>, <i class="red">h5</i>, <i class="red">h6</i>{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
<i class="red">h1</i>{font-size:1.9rem}
<i class="red">h2</i>{font-size:1.7rem}
<i class="red">h3</i>{font-size:1.5rem}
<i class="red">h4</i>{font-size:1.4rem}
<i class="red">h5</i>{font-size:1.3rem}
<i class="red">h6</i>{font-size:1.2rem}
<i class="red">a</i>{color:var(--linkC);text-decoration:none}
<i class="red">a</i>:hover{opacity:.9;transition:opacity .1s}</pre>
  </div>
  <div class="preC-3">
    <pre>JS here</pre>
  </div>
</div>

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.

<details class="sp notranslate">
  <summary data-show="Show all" data-hide="Hide all">Spoiler:</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

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.

<!--[ Accordion start ]-->
<div class="showH">
  <!--[ Accordion line 1 ]-->
  <details class="ac">
    <summary>Accordion_first_title</summary>
    <div class="aC">
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class="ac">
    <summary>Accordion_second_title</summary>
    <div class="aC">
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
  
  <!--[ Accordion line 3 ]-->
  <details class="ac">
    <summary>Accordion_third_title</summary>
    <div class="aC">
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
  
  <!--[ Accordion line 4 ]-->
  <details class="ac alt">
    <summary>Accordion_fourth_title (alt)</summary>
    <div class="aC">
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
</div>

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.

<p class="note notranslate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>

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.

<p class="note wr notranslate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>

Jika ada link eksternal yang terdapat dalam postingan, anda bisa memberitahukannya kepada user dengan menggunakan fitur ini:

Sample_external_link Standard_button

Alternative style

Download

with download icon:

Download

Available icons:

Demo

Catatan: Anda juga bisa menambahkan icon lain menggunakan <svg>

Two buttons in one bar:

Demo Download 
<div class="btnF">
  <a class="button ln" href="javascript:;">Demo</a>
  <a class="button" href="javascript:;"><i class="icon dl"></i>Download</a>
</div>
file_name.zip 200kb 
<div class="dlBox">
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class="fT" data-text="zip"></span>
  <div class="fN">
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class="fS">200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class="button" aria-label="Download" href="javascript:;"><i class="icon dl"></i></a>
</div>

Lazy Youtube

Berfungsi untuk memuat video youtube setelah halaman di scroll agar mempercepat loading blog

Youtube video
<!--[ Lazy youtube ]-->
<div class="lazyYt" data-embed="mNOdyNNRSrM">
  <div class="play">
    <svg viewBox="0 0 213.7 213.7"><polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon><circle class="c" cx="106.8" cy="106.8" r="103.3"></circle></svg>
  </div>
<img class="lazy" data-src="https://img.youtube.com/vi/mNOdyNNRSrM/sddefault.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Youtube video" lazied=""></div>

Post Reference

Untuk menambahkan daftar referensi artikel yang anda tulis:

Tokko Blogger

Selamat Datang di Bantuan Tokko

Jika anda membutuhkan bantuan kami silahkan Hubungi kami Team Tokko Official atau membutuhkan bantuan lain seperti dibawah ini:

Posting Komentar

Gabung dalam percakapan



SimWhite UI Documentation https://doc-tokko.blogspot.com/2020/08/white-winter-documentation.html

Your Cart

Check Tema Lainnya
( 0 ) 0
Butuh Bantuan? Pesan Sekarang...