Tipografi dan format penulisan kode pada template ICloudice v1.53

Ar-rahim 🇵🇸

Diperbarui: 12 Nov, 2024 • 0 • menit membaca

Daftar Isi

Terima kasih atas pembelian Anda! Kami senang Anda memilih template Blogger kami, dan kami berharap ini akan meningkatkan blog Anda ke tingkat yang lebih tinggi.

Sebagian besar fitur ini hanya dapat digunakan dalam mode 'Tampilan HTML', dan Anda juga tidak dapat beralih ke mode 'Tampilan penulisan' saat menggunakan beberapa fitur ini.

Dalam tampilan editor postingan, silahkan klik ikon di kanan bawah judul
Akan muncul dua pilihan: Tampilan HTML dan Tampilan penulisan
Pilih 'Tampilan HTML atau Mode HTML'.

Tips: Gunakan tag Your_paragraph_here untuk menambahkan paragraf ke artikel.

Format Penulisan untuk : ICloudice Premium Bertema v1.53 Templat
Diperbarui pada : 5 Maret 2023

Gambar dengan Keterangan dan Lightbox Otomatis

Caption pada gambar ini tidak akan terbaca pada deskripsi/cuplikan artikel. Anda juga dapat memilih agar teks tetap terbaca pada cuplikan artikel.

All Typography and Format Posts for Template Blogger ICloudice Premium v1.53

Semua gambar di postingan otomatis memiliki fungsi lightbox dan tampilan penuh, klik gambar ini untuk melihat fungsi lightbox pada gambar.

Ditambahkan class='fullN' berfungsi untuk menghapus tampilan gambar penuh pada layar hanya berfungsi untuk tampilan seluler.

Format penulisan:

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

Gambar dengan Tata Letak Grid

Pembangunan Jalan Raya Baru by ICloudice.com

Langtang Melacak Daya Tarik Utama oleh ICloudice.com

Pengalaman Berperahu di Pokhara oleh ICloudice.com

Format penulisan:

<!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
</div>

Gambar dengan Tampilkan Semua Fungsi

Digunakan untuk menyembunyikan beberapa gambar dan akan ditampilkan ketika pengguna mengklik tombol 'Tampilkan Semua'. Fungsi Tampilkan Semua hanya dapat diaktifkan satu kali, Gambar tidak dapat disembunyikan lagi bila diaktifkan.

Langtang Melacak Atraksi Utama by ICloudice.com

Pengalaman Berperahu di Pokhara by ICloudice.com

Show All

Format penulisan:

<!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  
  <div class='btImg'>
    <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'>Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  </div>
</div>

Gambar dengan Tata Letak Gulir

Sama seperti layout gambar diatas, hanya saja pada tampilan mobile gambar akan disusun sejajar dengan tambahan fungsi side scroll pada tampilan mobile.

Kami juga menambahkan efek gulir halus ke fitur ini. Silakan coba buka halaman ini di perangkat seluler Anda:

Format penulisan:

<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img class='fullN' alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
</div>

Gambar Lazyload

Berguna untuk menunda pemuatan gambar sehingga skor PageSpeed blog lebih tinggi, gambar hanya akan dimuat ketika pengguna menggulir ke area gambar. Semua gambar di artikel ini menggunakan Lazyload.

Format penulisan:

<div>
  <img class='lazy' alt='image_title_here' data-src='https://4.bp.blogspot.com/.../name.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/></noscript>
</div>

Posting Terkait Manual

Penting untuk diperhatikan bahwa fitur ini ditulis secara manual, tidak otomatis muncul di setiap halaman.

Anda mungkin ingin membaca posting ini:

Format penulisan:

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>

  <ul>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
  </ul>
</div>

Posting Terkait Otomatis

Pos terkait

Format penulisan:

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='toC' id='aRel'></div>
</details>

Pasca Istirahat

Anda dapat menggunakan fitur ini untuk memisahkan paragraf atau membuka bab baru dalam sebuah postingan, berikut contoh tampilannya:

Format penulisan:

<!--[ To break paragraphs apart ]-->
<hr>

Paragraf dengan Indentasi Teks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

Format penulisan:

<p class='pIndent'>Your_paragraph_is_here.</p>

Paragraf dengan Drop cap

M adalah huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf atau bagian. Ukuran batas menurun biasanya dua garis atau lebih.

Drop cap akan mengubah ukuran huruf pertama paragraf sehingga menjatuhkan satu baris atau lebih ke bawah. Banyak jenis media cetak yang menggunakan drop cap seperti pada buku, majalah, koran dan lain sebagainya karena dapat menambah daya tarik visual.

Format penulisan:

<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Kutipan Blok

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

— Anonymous

Format penulisan:

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</blockquote>

Gaya Lain:

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.

Format penulisan:

<blockquote class='s-1'>
  <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>

Kutipan Blok Sosial

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.

Format penulisan:

<blockquote class='pu_blq' data-author='Anonymous'>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.</blockquote>

Blok Catatan

Fitur ini berfungsi untuk menambahkan info penting, kalimat peringatan atau kalimat highlight, ada dua gaya yang bisa Anda coba antara lain:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

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

Dengan Warna Berbeda:

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'>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>

Meja

Tabel pada tema ini sudah diatur responsive, misalnya jika jumlah kolom atau lebar tabel melebihi lebar layar, agar tidak merusak layout maka otomatis tabel tersebut memiliki fungsi scroll.

Silakan buka artikel ini di perangkat seluler Anda dan sorot bagian tabel di bawah ini:

Nama	Posisi	Kantor	Usia	Tanggal mulai	Gaji
Harimau Nixon	Arsitek Sistem	Edinburgh	61	25/04/2011	$320.800
Garrett Musim Dingin	Akuntan	Tokyo	63	25/07/2011	$170.750
Ashton Cox	Penulis Teknis Junior	San Fransisco	66	2009/01/12	$86.000
Cedric Kelly	Pengembang Javascript Senior	Edinburgh	22	29/03/2012	$433.060
Airi Satou	Akuntan	Tokyo	33	28/11/2008	$162.700

Format penulisan:

<div class='table'>
  <table style='white-space:nowrap; min-width:100%;'>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
    </tbody>
  </table>
</div>

white-space:nowrap; menetapkan teks menjadi satu baris, tidak akan digabungkan ke baris berikutnya dan akan berlanjut hingga tag   ditemukan.
min-width:100%; mendefinisikan lebar minimum tabel, Anda dapat mengubahnya menjadi satuan px misalnya 500px. Ubah menjadi 0 jika Anda ingin lebar tabel ditentukan secara otomatis.

Daftar Isi Manual

Contents

Image with Caption
Manual Related Post
Post Break
Blockquote

With sub-heading:

Heading_title

Penggunaan Daftar Isi manual lebih rumit dibandingkan versi otomatis, Anda harus menambahkan atribut ID yang berbeda di setiap tag heading dan menuliskannya di daftar konten.

Ini adalah contoh tag heading dengan custom ID:

<h2>Your_Heading</h2>
    
<h3>Sub_Heading_1</h3>

<h2 id='heading'>Your_Heading</h2>
    
<h3 id='subHeading'>Sub_Heading_1</h3>

Format penulisan:

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Contents</summary>  
  <div class='toC'>
    <ol>
      <li><a href='#heading'>Your_Heading</a></li>
      ...
      ...
      ...
    </ol>

    <!--[ Sample ToC with subheading ]-->
    <ol>
      <li><a href='#heading'>Your_Heading</a>
        <ol>
          <li><a href='#subHeading'>Sub_Heading_1</a></li>
          ...
          ...
          ...
        </ol>
      </li>
    </ol>
  </div>
</details>

Hapus atribut open='' untuk menutup otomatis Daftar Isi saat halaman pertama kali dimuat.
Anda dapat mengubah judul atau frasa 'Tampilkan semua/Sembunyikan semua' di bagian yang ditandai.

Daftar Isi Semi Otomatis

Table of Contents

Pilihan termudah untuk menampilkan Daftar Isi. Fitur ini akan menampilkan semua tag heading pada postingan Anda (tiga level h2 - h4), jadi pastikan Anda menulis tag heading secara berurutan. Baca: Kesalahan Umum

Kode untuk menentukan lokasi widget TOC semi-otomatis:

<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='autoToc'></div>
</details>

Penyorot Sintaks

Digunakan untuk mendefinisikan baris kode komputer (HTML, CSS, Javascript, dll) dalam postingan.

<!--[ Ubah teks data menjadi .html, .css, .js atau bahasa apa pun ]-->
<div class='pre pu notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Penambahan kode warna pada sintaks dapat ditulis secara manual, namun kami juga menyediakan fitur sintaks berwarna otomatis.

Ubah data-text='.html' untuk mendefinisikan format kode lain, yaitu data-text='.css', data-text='.js' , data-text='.php', dll
Nilai white-space:pre-wrap; berguna untuk menonaktifkan side scrolling, kode yang panjang akan dipertahankan dan memberikan sedikit fungsi scrolling agar tetap terbaca.
max-height:none; mendefinisikan tinggi maksimum sintaks tidak disetel (otomatis), ubah nilai none menjadi misalnya 400px menjadi tentukan tinggi maksimum sintaks hanya 400 piksel.
Gunakan code_here untuk menambahkan warna merah/oranye.
Gunakan code_here untuk menambahkan warna biru.
Gunakan code_here untuk menambahkan warna hijau.
Gunakan code_here untuk menambahkan warna abu-abu.
Gunakan code_here untuk menambahkan blok warna biru.

Penyorot Sintaks Berwarna Otomatis

Sintaks berikut secara otomatis disorot/diwarnai menggunakan Highlight.js

<!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>

Code to color syntax:

<!--[ Tambahkan nama kelas hl untuk mewarnai sintaksis secara otomatis ]-->
<div class='pre hl notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Kesalahan Umum:

Fitur ini secara otomatis mendeteksi bahasa dan menyorot warna. Namun dalam beberapa kasus, mungkin tidak secara otomatis mendeteksi bahasa kode, pada saat itu Anda harus menambahkan nama kelas sesuai bahasanya, misalnya jika html, Anda harus menambahkan html atau bahasa-html bersama dengan hl.

Sebuah contoh:

<!--[ Tambahkan nama kelas hl untuk mewarnai sintaksis secara otomatis ]-->
<div class='pre hl language-javascript notranslate' data-text='.js'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Batasan penggunaan Penyorot Sintaks Berwarna Otomatis:

Anda tidak dapat menambahkan tag apa pun ke dalam Kode yang Telah Diformat Sebelumnya. Misalnya, Anda menambahkan , agar tidak lagi diblokir dengan warna biru.

Penyorot Sintaks Multi Fungsional

Your_code_is_here

Format penulisan:

<!--[ Ganti data-teks dengan nama apa pun untuk ditampilkan, file data dengan nama file, data-lang dengan ekstensi file, waktu data dengan hitungan mundur dalam hitungan detik ]-->
<div class='pre pu notranslate' data-time='5' data-text='Codebox Writing Format' data-file='Typography Codebox' data-lang='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

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}

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://icloudice.com/",
  "name": "ICloudice Premium",
  "alternateName": "ICloudice Premium",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://icloudice.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

Kode Penulisan:

<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>Your_code_is_here</pre>
  </div>
  <div class='preC-2'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-3'>
    <pre>Your_code_is_here</pre>
  </div>
</div>

Atribut checked mendefinisikan tab pertama yang muncul secara default.
Pastikan atribut id='...' dan for='...' memiliki nilai yang sama. ID harus unik, tidak boleh ada dua ID yang identik dalam satu halaman.
Ubah atribut data-text='HTML' di bagian yang disorot untuk mengganti nama tab.

Alihkan Tampilkan / Sembunyikan

Digunakan untuk membuat widget interaktif yang dapat dibuka dan ditutup pengguna sesuai permintaan. Secara default widget ini bersifat tertutup, akan menampilkan konten di dalamnya ketika pengguna menekan tombol perintah.

Konten apa pun dapat dimasukkan dalam widget ini.

Spoiler: