Template Blogger Premium DISINI

Kumpulan Script Code Dokumentasi Plus UI Template Blogger

Kumpulan Script Code Template Plus UI (Post Style and Typography Free Customize)
Harap tunggu 0 detik...
Selamat! Link Berhasil Dimuat.
Gulir ke Bawah dan klik Buka Link untuk membuka Link Tujuan

Halo Sobat Tutorial, Apakah Kalian Menggunakan Template Plus UI Pada Blog Kalian? Jika Iya, Pada Kesempatan Kali Ini Blog Tutorial Akan Membagian Kumpulan Script Code Template Plus UI (Post Style and Typography Free Customize).

Belakangan Ini Template Plus UI Memanglah Sangat Populer Di Kalangan Blogger Khususnya Pengguna Blogspot. Dimana Template Plus UI Memiliki Design Yang Elegan Dan Menarik Untuk Di Terapkan Pada Blog Kita.

Namun Masih Banyak Pengguna Template Plus UI Yang Bingung Cara Menggunakan Template Tersebut Agar Lebih Efisien Dan Lebih Menarik Lagi. Berikut Ini Blog Tutorial Bagikan Kumpulan Script Code Template Plus UI (Post Style and Typography Free Customize).

Perlu Diingat Bahwa Sebagian Besar Fitur Ini Hanya Dapat Di Gunakan Pada Mode "Tampilan HTML" Selain Itu, Sobat Tutorial Juga Tidak Bisa Beralih Ke Mode "Tampilan Menulis" Saat Menggunakan Beberapa Fitur Ini.

Berikut ini langkah-langkahnya :

  1. Login ke dalam Akun Blogger kalian.
  2. Silahkan buat postingan baru.
  3. Pada menu tampilan terdapat dua opsi "Tampilan Menulis" dan "Tampilan HTML".
  4. Silahkan pilih "Mode HTML".

Tips : Gunakan <p>Paragraf_kalian_disini</p> Tag Untuk Menambahkan Paragraf Baru Ke Dalam Artikel.

Format penulisan untuk : Template Plus UI Versi 2.6.1 keatas
Template Diperbarui pada : 1 Juni 2022


Daftar Isi Artikel:

Format Gambar

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
Semua gambar di postingan otomatis memiliki fungsi lightbox dan tampilan penuh, klik gambar ini untuk melihat fungsi lightbox pada gambar.

Tambahkan class='full' 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' class='full' 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

Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara

Format penulisan:

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

Gambar dengan Fungsi Show All

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.

Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara
Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara

Format penulisan:

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

<div class='btImg'>
<img 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'>Tampilkan Semua</label>
</div>

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

Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations

Format penulisan:

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

Lazyload Image

Format kode untuk gambar Lazyload telah diubah pada pembaruan kecil berikutnya, tidak disarankan menggunakan yang berikut ini.

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>

Related Post

Manual Related Post

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

Format Penulisan:

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>Kalian mungkin ingin membaca posting ini:</b>

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

Auto Related Post

Artikel Terkait:

Format Penulisan:

<details class='sp toc' open=''>
  <summary data-show='Buka' data-hide='Tutup'><b>Artikel Terkait:</b></summary>  
  <div class='toC' id='aRel'></div>
</details>

Post Break

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


Format penulisan:

<!--[ Untuk memisahkan paragraf ]-->
<hr>

Text Indent

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'>Paragraf-kalian-disini.</p>

Drop cap

Drop cap 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 atau lebih baris ke bawah. Banyak jenis media cetak yang menggunakan drop cap seperti buku, majalah, surat kabar dan sebagainya karena dapat menambah daya tarik visual.

Format penulisan:

<p><span class='dropCap'>P</span>aragraf-kalian-disini.</p>

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.

— 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.<br />
  <br />
  — Anonymous
</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>

Social 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. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

Writing Format:

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

Note Block

Fitur Ini Dapat Digunakan Untuk Menambahkan Informasi Penting Seperti Catatan (Note) Dan Lain Sebagainya.

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>

Warna Yang 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>

Coustom List Numbering

Ikuti petunjuk berikut:

  1. Masuk ke dasbor blogger Anda
  2. Klik navigasi sidebar
  3. Klik pada opsi tata letak
  4. Menambahkan widget HTML baru
    Anda dapat menggunakan jam ini di halaman utama/beranda situs web Anda untuk hasil yang lebih baik
  5. Salin kode di bawah ini dan tempel

Format penulisan:

<h2>Ikuti petunjuk</h2>
  <ol class="style1">  
    <li>Masuk ke dasbor blogger Anda</li> 
    <li>Klik navigasi sidebar</li>
    <li>Klik pada opsi tata letak</li>
    <li>Menambahkan widget HTML baru
        Anda dapat memasang kode ini di halaman utama/beranda situs web Anda untuk hasil yang lebih baik</li>
    <li>Salin kode di bawah ini dan tempel</li>
    
  <style> /* Custom List Numbering*/ 
  ol.style1 { counter-reset:numbers; list-style:none; padding:0; } ol.style1 > li { counter-increment:numbers; margin-bottom:25px; position:relative; margin-left:55px; } ol.style1 > li img { margin:15px 0; width:100%; display:block; } ol.style1 > li #box-download img { margin:0;} ol.style1 > li::before { content: counter(numbers); line-height: 23px; font-family: 'Noto Sans',sans-serif; font-size: 14px; font-weight: 700; left: -45px; width: 32px; height: 32px; text-align: center; position: absolute; color: #9c27b0; border: 5px solid rgba(116,103,251,.17); border-radius: 50px; top: -2px; } ol.standard li, ol.style2 li, ol.style0 li, ol.style1 li ul li { margin-bottom:15px; } ol.style1 li ul { margin-top:15px; } .dark-mode ol.style1 > li::before { color:rgb(80, 103, 197); border-color:rgba(57, 60, 155, 0.3); } </style></ol><p></p> </div>

Table

Tabel pada tema ini sudah di setting responsive, misalnya jika jumlah kolom atau lebar tabel melebihi lebar layar, agar tidak merusak tata letak maka secara otomatis tabel akan memiliki fungsi scroll.

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

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $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>
  1. white-space:nowrap; menentukan teks menjadi satu baris, itu tidak akan membungkus ke baris berikutnya dan akan berlanjut sampai tag <br> ditemukan.
  2. min-width:100%; menentukan lebar minimum tabel, Anda dapat mengubahnya ke unit px misalnya 500px. Ubah ke 0 jika Anda ingin lebar tabel ditentukan secara otomatis.

Table of Content

Manual Table of Content

Daftar Isi Artikel :

Menggunakan Table of Content manual lebih rumit daripada versi otomatis, Anda harus menambahkan atribut ID yang berbeda di setiap tag judul dan menuliskannya di daftar konten.

Ini adalah contoh tag judul dengan ID khusus:

<h2>Judul</h2>

<h3>Sub_Judul_1</h3>
<h2 id='judul'>Judul</h2>

<h3 id='subJudul'>Sub_Judul_1</h3>

Format Penulisan :

<details class='sp toc' open=''> 
  <summary data-show='Buka' data-hide='Tutup'>Daftar Isi Artikel</summary>
  <div class='toC'>
  	<ol>
    	<li><a href='#judul'>Judul</a></li>
        ...
        ...
        ...
    </ol>
    
<!--[ Contoh ToC dengan subjudul ]--> <ol> <li><a href='#judul'>Judul</a> <ol> <li><a href='#subJudul'>Sub_Judul_1</a></li> ... ... ... </ol> </li> </ol> </div> </details>
  1. Silahkan hapus open='' untuk menutup otomatis Table of Content saat halaman pertama kali dimuat
  2. Kalian dapat mengganti judul "Buka / Tutup" pada bagian yang ditandai

Semi Automatic Table of Content

Daftar Isi Artikel :

Cara paling mudah untuk menampilkan Table of Content (Daftar Isi). Fitur ini akan menampilkan semua tag judul terdiri dari 3 level penulisan pada postingan kalian (h2 - h4), jadi pastikan Anda menuliskan tag judul secara berurutan saat menulis artikel. Baca: Kesalahan Umum

Kode untuk menentukan lokasi widget ToC semi-otomatis:

<details class='sp toc'>
  <summary data-show='Buka' data-hide='Tutup'><b>Daftar Isi Artikel</b></summary>
  <div class='toC' id='autoToc'></div>
</details>

Syntax Highlighter

Gunakan Syntax Highlighter untuk mendifinisikan kode yang ingin kalian tambahkan pada artikel seperti (HTML, CSS, Javascript, dan lain sebagainya.)

<!--[ Ubah data-text untuk .html, .css, .js atau bahasa apapun ]-->
<div class='pre pu notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>kode disini</pre>
</div>

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

  1. Ubah data-text='.html' untuk menentukan format kode lain, misalnya data-text='.css', data-text='.js', data-text='.php', dan lain sebagainya.
  2. Nilai white-space:pre-wrap; berguna untuk menonaktifkan pengguliran samping, kode panjang akan dipertahankan dan memberikan sedikit fungsi pengguliran agar tetap terbaca.
  3. max-height:none; mendefinisikan tinggi maksimum sintaks tidak disetel (otomatis), ubah nilainya none misalnya 400px untuk menentukan tinggi maksimum sintaks hanya 400 piksel.
  4. Gunakan <i class='red'>kode disini</i> untuk menambahkan warna merah/oranye.
  5. Gunakan <i class='blue'>kode disini</i> untuk menambahkan warna biru.
  6. Gunakan <i class='green'>kode disini</i> untuk menambahkan warna hijau.
  7. Gunakan <i class='gray'>kode disini</i> untuk menambahkan warna abu-abu.
  8. Gunakan <i class='block'>kode disini</i> untuk menambahkan blok warna biru.

a. Automatic Colored Syntax Highlighter

Script Code dapat secara otomatis disorot/diwarnai menggunakan Highlight.js

<!DOCTYPE html>
  <html dir='ltr' lang='en'>
    <head>
      <title>Halaman Contoh</title>
    </head>
    
    <!--[ <body> open ]-->
    <body>
      <p>Contoh konten di sini!</p>
    </body>
    
    <!--[ </body> close ]-->
  </html>
  

Kode untuk warna syntax:

<!--[ Tambahkan classname hl untuk warna syntax otomatis ]-->
<div class='pre hl notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>kode disni</pre>
</div>

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

Sebagai contoh :

<!--[ Tambahkan classname hl untuk warna syntax otomatis ]-->
<div class='pre hl language-javascript notranslate' data-text='.js'>
  <pre style='white-space:pre-wrap; max-height:none;'>kode disini</pre>
</div>

Batasan penggunaan warna Otomatis Syntax Highlighter:
Anda tidak dapat menambahkan tag apa pun di Kode Terformat Anda. Misalnya, Anda akan menambahkan <i class='block'></i>, Tag Tersebut Tidak Lagi Ditandai Dengan Warna Biru.

b. Multi Functional Syntax Highlighter

kode disini

Format Penulisan :

<!--[ Ganti data-text dengan nama apa pun untuk ditampilkan, data-file dengan nama file, data-lang dengan ekstensi file, data-time 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;'>kode disini</pre>
</div>

MultiTabs Syntax Highlighter

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Halaman Contoh</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Contoh konten di sini!</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://plus-ui.fineshopdesign.com/",
  "name": "Plus UI",
  "alternateName": "Plus UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://plus-ui.fineshopdesign.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'>
    <!--[ Ubah atribut data-text='...' untuk mengganti judul ]-->
    <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>kode disini</pre>
  </div>
  <div class='preC-2'>
    <pre>kode disini</pre>
  </div>
  <div class='preC-3'>
    <pre>kode disini</pre>
  </div>
</div>
  1. Atribut checked menentukan tab pertama yang muncul secara default.
  2. Pastikan atribut id='...' dan for='...' memiliki nilai yang sama. ID harus berbeda, tidak boleh ada dua ID yang sama dalam satu halaman.
  3. Ubah atribut data-text='HTML' di bagian yang ditandai untuk mengganti nama tab.

Toggle Show / Hide

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

Konten apa pun dapat dimasukkan dalam widget ini.

Spoiler:

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Format penulisan

<details class='sp'>
<summary data-show='Tampilkan' data-hide='Sembunyikan'>Spoiler:</summary>
<p>Tulis teks isi disini.</p>
</details>

Toggle Content or Accordion

Menentukan konten tambahan yang dapat dibuka dan ditutup pengguna sesuai permintaan dalam grup, biasanya digunakan untuk daftar pertanyaan atau FAQ (Frequently Asked Questions).

Judul pertama akordeon

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Judul kedua akordeon

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Judul ketiga akordeon

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Judul keempat akordeon

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Format penulisan:

<!--[ Accordion start ]-->
<div class='showH'>
<!--[ Accordion line 1 ]-->
<details class='ac'>
<summary>Judul disini</summary>
<div class='aC'>
<p>Teks isi disini.</p>
</div>
</details>

<!--[ Accordion line 2 ]-->
<details class='ac alt'>
<summary>Judul disini</summary>
<div class='aC'>
<p>Teks isi disini.</p>
</div>
</details>

...

...
</div>
  1. Gunakan classname alt yang ditandai pada kode di atas untuk mengubah gaya ikon.
  2. Jumlah widget akordeon yang dapat kalian tambahkan tidak terbatas.

FAQ schema in Microdata

<!--[ Accordion start ]-->
<div class='showH' itemscope='' itemtype='https://schema.org/FAQPage'>
<!--[ Accordion line 1 ]-->
<details class='ac' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
<summary itemprop='name'>Judul disini</summary>
<div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
<p itemprop='text'>Teks isi disini.</p>
</div>
</details>

<!--[ Accordion line 2 ]-->
<details class='ac alt' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
<summary itemprop='name'>Judul disini</summary>
<div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
<p itemprop='text'>Teks isi disini.</p>
</div>
</details>

...

...
</div>

External Link

Memberi tahu pengguna jika tautan akan mengarah ke situs lain.

Contoh tautan eksternal
Contoh tautan alternatif

Format penulisan:

<a class='extL' href='#' rel='noreferrer' target='_blank'>Contoh tautan eksternal</a>
<a class='extL alt' href='#' rel='noreferrer' target='_blank'>Contoh tautan alternatif</a>

Button Link

Tombol
<a class='button' href='alamat_url_disini'>Judul Tautan</a>

Gaya alternatif:

Tombol
<a class='button ln' href='alamat_url_disini'>Judul Tautan</a>

Dengan ikon:

Download
Demo
<a class='button' href='alamat_url_disini'><i class='icon dl'></i>Judul Tautan</a>
<a class='button' href='alamat_url_disini'><i class='icon demo'></i>Judul Tautan</a>

dengan ikon <svg>:

WhatsApp me!
Buy now!
<a class='button' href='alamat_url_disini'>
<svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg>
<span>WhatsApp me!</span>
</a>
<a class='button' href='alamat_url_disini'>
<svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>
<span>Buy now!</span>
</a>

Tambahkan atribut style='fill:#fff; margin-right:12px;' atau style='stroke:#fff; margin-right:12px;' untuk memberi ikon SVG warna putih.

Dua tombol dalam satu baris:

<div class='btnF'>
<a class='button ln' href='alamat_url_disini'>Demo</a>
<a class='button' href='alamat_url_disini'><i class='icon dl'></i>Download</a>
</div>

Download Link

Untuk memberikan informasi file yang diunduh kepada pengguna.

nama_file.zip 200kb
<div class='dlBox'>
<!--[ Ubah atribut data-text='...' untuk menambahkan jenis file baru ]-->
<span class='fT' data-text='zip'></span>
<div class='fN'>
<!--[ Nama file ]-->
<span>nama_file.zip</span>
<span class='fS'>200kb</span>
</div>

<!--[ Download link (ubah atribut href='...' untuk menambahkan tautan unduhan) ]-->
<a class='button' aria-label='Download' href='alamat_url_disini' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

Dengan gambar latar, bukan teks:

about_me.png 10kb
<div class='dlBox'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fT lazy' data-text='zip' data-style='background-image: url(//3.bp.blogspot.com/.../title.png)'></span>
<div class='fN'>
<!--[ File name ]-->
<span>about_me.png</span>
<span class='fS'>10kb</span>
</div>

<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

Countdown Download Box

Fitur ini akan menampilkan hitungan mundur sebelum pengguna mengunduh file apa pun.

Fitur ini memerlukan tautan unduhan langsung dari file cloud. Anda dapat menggunakan Google Drive untuk mendapatkan tautan unduhan langsung dari suatu file.

Dengan Gambar:

about_me.webp Jan 1, 2022 165KB 1080×1080 .webp

Tanpa Gambar:

about_me.webp Jan 1, 2022 165KB 1080×1080 .webp

Format penulisan:

<div class='dldCo' id='download1'>
<div class='dldBx'>
<div class='dldTp'>
<div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
<svg class='dldSv' viewBox='0 0 34 34'>
<circle class='b' cx='17' cy='17' r='15.92' />
<circle class='c dldPg' cx='17' cy='17' r='15.92' />
</svg>
</div>
<div class='dldIn'>
<span data-text='Name'>Music_Wallpaper.png</span>
<span data-text='Category'>Music</span>
<span data-text='Size'>3.05MB</span>
<span data-text='Resolution'>1920×1080</span>
<span data-text='Extension'>.png</span>
</div>
</div>
<button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
<button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
</div>
<div class='dldSl'>
<div class='dldMe'></div>
</div>
</div>

Download with Timer

Tahlil Qoshor.pdf 204kb

Salin kode di bawah ini dan tempelkan di atas ]]></b:skin>.

/* Countdown Download Script */
.downloadInfo{max-width:500px;background-color:#fefefe; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px}
.downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f0;border-radius:10px}
.downloadInfo a{background-color:#008080;color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px}
.downloadInfo a:after{content:attr(aria-label)}
.downloadInfo .fileType:before{content:attr(data-text)}
.downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px}
.downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8}
.icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.wcTargetLink{display:none} 
@media screen and (max-width:480px){
.downloadInfo{padding:12px}
.downloadInfo a{width:50px;height:50px;border-radius:10px}
.downloadInfo a:after{display:none}
.downloadInfo a .icon{margin:0}} 
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)}

Selanjutnya salin kode di bawah ini dan letakkan tepat di atas </body>.

<!-- Countdown Download Script -->
<script>
//<![CDATA[
// download countdown timer by wendy code
var timeLeft = 15; //atur waktunya di sini
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.wcTargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Harap Tunggu <span>'+timeLeft+'</span> Detik.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]> 
</script>

Terakhir, tempelkan kode berikut ini pada postingan pada mode HTML.

<!-- Download Timer Script -->
<div class='downloadInfo'>
  <span class='fileType' data-text='PDF'></span>
  <div class='fileName'>
    <span class='textd'>Tahlil Qoshor.pdf</span>
    <span class='fileSize'>204kb</span>
  </div>
  <a class='fileLink' aria-label='Download'><i class='icon download'></i></a>
</div>
<div class='wcTargetLink'>#</div>

Sesuaikan menurut selera kalian.

Selesai. Lihat hasilnya.


Lazy Youtube

Berguna untuk menunda memuat video Youtube setelah pengunjung menggulir halaman.

<!--[ Lazy youtube ]-->
<div class='ytShdw'>
  <div class='lazyYt' data-embed='Youtube_video_ID'>
    <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>
  </div>
</div>

Menunda pemuatan iframe dengan fungsi defer.js:

<!--[ Lazysize iframe ]-->
<div class='ytShdw'>
  <div class='videoYt'>
    <iframe title='Lazy Iframe' class='lazy' data-src='//www.youtube.com/embed/xxxxxxxxxxx' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
  </div>
</div>
  • Ubah bagian yang ditandai dengan video Youtube ID yang ingin Anda tampilkan.
  • ID video dapat ditemukan di url video Youtube, misalnya:
    youtube.com/watch?v=EuZrF16GCKo.

Post Reference

Untuk menulis daftar referensi atau catatan kaki di bawah posting

Source:
www.example.com

<p class='pRef'>Source:<br> www.example.com</p>

Header Subtitle

Untuk mengubah Subjudul Header pada postingan atau halaman tertentu.

<style>/*<![CDATA[*/
/* To change Header Subtitle */
.headH .headSub{max-width:none}
.headH .headSub::before{content:"Typography"}
/*]]>*/
</style>

Itu Tadi Adalah Beberapa Kumpulan Script Code Template Plus UI (Free Customize) Yang Seringkali Digunakan Dalam Penulisan Sebuah Artikel Agar Lebih Menarik Lagi. Namun Script Code Yang Kami Bagikan Kali Ini Hanyalah Beberapa Code Yang Menurut Kami Penting. Untuk Lebih Lengkapnya Kalian Dapat Mengunjuing Situs Resmi Plus UI : https://plus-ui.fineshopdesign.com/ Untuk Mendapatkan Format Penulisan Code Lainnya.

Anda mungkin tertarik artikel ini :

Terima kasih telah membaca artikel kami yang berjudul: Kumpulan Script Code Dokumentasi Plus UI Template Blogger, jangan lupa + IKUTI website kami dan silahkan bagikan artikel ini jika menurut Anda bermanfaat. Simak artikel kami lainnya di Google News.

Posting Komentar

Cara Berkomentar bagi yang tidak memiliki blog:
1. Klik select profile --> pilih "Name/URL".
2. Isi nama Anda dan isi dengan alamat facebook Anda.
3. Klik "Lanjutkan".
4. Ketik komentar Anda.
5. Klik "Publish".
6. Centang "CAPTCHA" yang menyatakan bahwa Anda bukan robot.
7. Klik "Publish".
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.