Kumpulan Script Code Dokumentasi Median UI Template Blogger

Sebagian besar fitur ini hanya bisa digunakan dalam mode 'Tampilan HTML', Anda juga tidak bisa berganti ke mode 'Tampilan menulis' selama menggunakan beberapa fitur ini.

Berikut ini langkah-langkahnya :

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

Tips : Gunakan tag <p>Isi_paragraf_disini</p> untuk menambahkan paragraf pada artikel.

1. Image with caption

Menambahkan cuplikan ke gambar.

Caption adalah teks pendek yang muncul di bawah gambar di buku, majalah, atau surat kabar yang mendeskripsikan gambar atau menjelaskan apa yang dilakukan atau dikatakan orang di dalamnya.

Anda dapat menambahkan langsung melalui Compose Mode atau menggunakan kode ini:

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img class='lazy full' alt='judul_gambar' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Text_here</td>
    </tr>
  </tbody>
</table>

2. Lightbox image

Menampilkan pratinjau gambar besar.

Format penulisan:

<div class='lightBox'>
  <details>
    <summary class='n'><span class='c flex center'></span></summary>
  </details>
  <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>

3. Grid images

Menampilkan banyak gambar dalam tata letak kisi.

Format penulisan:

<div class='psImg grImg'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

4. Scroll images

Menampilkan banyak gambar dengan fungsi gulir (hanya aktif pada tampilan seluler).

Fungsi gulir hanya akan aktif pada tampilan seluler.

Format penulisan:

<div class='psImg scImg scrlH'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

5. Show/hide images

Menampilkan banyak gambar sambil menyembunyikan/menampilkan sisanya.

Setelah mengklik "Tampilkan semua", gambar tidak dapat disembunyikan lagi.

Tampilkan semua

Format penulisan:

<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  
  <div class='btImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage'>Tampilkan semua</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
  </div>
</div>

Pastikan atribut id='...' dan for='...' memiliki nilai yang sama, dalam contoh ini kita menggunakan for-hideImage.
Jangan beralih ke Mode Tulis/Tampilan Menulis saat menggunakan fitur ini, jika tidak, widget ini mungkin tidak berfungsi dengan benar.

6. Lazy load image

Menunda pemuatan gambar hingga terlihat di viewport untuk meningkatkan kinerja situs.

Sekadar informasi, gambar dengan lazyload tidak akan ditampilkan saat pengguna menonaktifkan Javascript di browser mereka. Juga thumbnail tidak akan muncul jika semua gambar dalam satu postingan menggunakan lazyLoad.

Format penulisan:

<div class='separator'>
  <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>

Penting untuk mengubah atribut alt='image_title' dengan judul gambar Anda.
Ganti semua kode di atribut data-scr dan src pada baris berikutnya dengan url gambar Anda.
<noscript> penting untuk digunakan sebagai cadangan jika pengguna menonaktifkan Javascript di browser mereka.
Agar thumbnail muncul, pastikan ada satu gambar tanpa lazyLoad.

7. Related Post

Menampilkan rekomendasi artikel terkait di tengah postingan secara manual.

Artikel Terkait:

Tautan di atas hanyalah contoh, tidak akan menuju halaman mana pun saat diklik.

Format penulisan:

<div class='pRelate notranslate'>
  <!--[ Related title ]-->
  <b>Artikel Terkait:</b>
  <ul>
    <li><a href='your_url'>post_title</a></li>
    <li><a href='your_url'>post_title</a></li>
    <li><a href='your_url'>post_title</a></li>
  </ul>
</div>

8. Post Break

Pembatas antara 2 paragraf atau lebih

Tersedia dalam 3 gaya yang berbeda

Format Sandar

Format penulisan:
```
<hr>
```
Format Titik

Format penulisan:
```
<hr class='dot'>
```
Format Garis

Format penulisan:
```
<hr class='line'>
```

9. Text Indent

Property text-indent menentukan jumlah ruang horizontal yang harus dimiliki oleh baris teks pertama di dalam wadah level blok.

Jumlah ruang ditentukan sehubungan dengan tepi kiri (atau tepi kanan di tata letak kanan-ke-kiri) elemen blok yang berisi teks. Arah teks ditentukan oleh properti arah.

Kedua paragraf di atas merupakan contoh penerapan Text Indent pada postingan blogger.

Format penulisan:

<p class='pIndent'>text_paragraph</p>

10. Drop Cap

Fungsi Drop Cap adalah membuat huruf pertama dalam suatu paragraf lebih besar dari huruf lainnya. Sebagai contoh, lihat paragraf di bawah ini:

Drop Cap adalah huruf awal suatu paragraf yang diperbesar. Maksudnya huruf pada awal suatu paragraf besarnya beberapa baris lebih besar daripada huruf-huruf lainnya. Besarnya huruf pada awal paragraph ini bisa diatur beberapa baris dari tulisan dan jarak antara drop cap dan tulisan yang lain.

Format penulisan:

<p><span class='dropCap'>T</span>ext_paragraph</p>

11. Blockquote

Blockquote merupakan bagian kutipan yang ditulis untuk membedakan dengan paragraf lain.

Standar Blockquote

Hiduplah dalam pekerjaan yang disemangati oleh impian, karena impianmu adalah gambaran tentang keindahan masa depanmu.

— Mario Teguh

Format penulisan:
```
<blockquote>text_paragraph</blockquote>
```
Gaya lain:

Janganlah hidup dalam kenangan, karena kenangan itu tentang masa lalu.

— Mario Teguh

Format penulisan:
```
<blockquote class='s-1'>text_paragraph</blockquote>
```

12. Note Block

Standar Note

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

Format penulisan:
```
<p class='note'>text_paragraph</p>
```
Warning Note

Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

Format penulisan:
```
<p class='note wr'>text_paragraph</p>
```

13. Guide List

Berguna untuk membungkus runtutan langkah-langkah untuk memudahkan pembaca dalam membaca daftar tutorial atau panduan posting dan lain sebagainya.

Contoh langkah dalam membuka lembar kerja Mode HTML pada Blogger :

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

Format penulisan:

<ol class='step noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

14. Pros/Cont List

Menampilkan konten yang mencantumkan kelebihan atau kekurangan suatu produk.

Berikut ini sebagai contoh kelebihan dan kekurangan Template Median UI.

Pros: Kelebihan Median UI

Template yang lebih Modern. Median UI untuk Blogger ini sudah responsive. Konsep dashboard UI dengan tampilan yang lebih modern menjadi inspiratif template ini dibuat.
Lebih mudah diedit. template ini lebih mudah untuk di edit. Anda bisa langsung mengubah warna melalui Desainer Tema Blogger atau menu Tata Letak.
Loading yang cepat. Seperti pada gambar diatas, kecepatan loading template ini luar biasa. Blog dengan kecepatan load yang lebih akan berpotensi untuk berada dihalaman pertama hasil pencarian.
SEO Friendly. Fitur ini merupakan fitur yang wajib ada pada template saat ini. Percuma memiliki blog yang tidak seo friendly. Benar bukan?
Tersedianya beberapa slot iklan. Bagi anda yang suka nyari recehan, median ui blogger template ini juga slot iklan yang bisa anda manfaatkan. Namun jika anda tidak memerlukan fitur ini, anda bisa mengabaikannya.

Format penulisan:

<b>pros:</b>
<ol class='pros noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

Cons: Kekurangan Median UI

Kurang berwarna. Template median UI ini hanya memiliki satu warna. Anda yang terbiasa dengan template yang penuh warna mungkin akan sedikit kaget. Beda banget soalnya.
Tidak bisa mengedit menu navigasi pada Tata Letak Blogger. Jika anda ingin mendit menu, anda harus mengedit menu navigasi pada Edit HTML. Dan perlu anda ketahui bahwa kebanyakan template responsive kekurangannya ya yang satu ini.

Format penulisan:

<b>cons:</b>
<ol class='cons noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

15. Tables

Tabel Default

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

Tanpa garis kolom

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

Dengan latar belakang warna

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

Dengan latar belakang warna saat hover (kursor diarahkan)

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

Format penulisan:

<div class='table noWrap w100'>
  <table>
    <thead>
      <tr>
        <th>title_1</th>
        <th>title_2</th>
        <th>title_3</th>
        <th>title_4</th>
        <th>title_5</th>
        <th>title_6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
    </tbody>
  </table>
</div>

noWrap digunakan untuk menonaktifkan baris baru, artinya teks dalam kolom hanya akan ditulis pada satu baris.
w100 berarti tabel akan memiliki lebar 100% atau sama dengan lebar halaman posting, opsi lain yang tersedia adalah w90 untuk lebar 90% atau hapus className ini agar lebar dapat menyesuaikan secara otomatis.
Tambahkan class='table noLine' untuk menghapus garis vertikal pada kolom.
Gunakan class='table withBg' untuk menambahkan warna latar belakang pada baris.
Gunakan class='table hoverBg' untuk menampilkan warna latar belakang saat kursor diarahkan ke baris tabel.
Kombinasi class='table noLine withBg' atau class='table noLine hoverBg' diperbolehkan.

16. Tabs

Mengatur konten di berbagai layar, kumpulan data, dan interaksi lainnya.

Anda hanya dapat menambahkan maksimal hingga 4 tab

Perhatikan contoh penerapannya berikut ini.

Template Median UI 1.7 аdаlаh template dengan gауа blog уаng sangat trеndі untuk berita, online shop, mаjаlаh, gаmе, dаn blоg tеrkаіt video gаmе atau tentang artikel lаіnnуа. Tеmрlаtе ini dіbuаt оlеh JаgоDеѕаіn dаn memiliki dеѕаіn уаng terlihat sangat bеrѕіh уаng аkаn terlihat bagus di layar android, tablet, monitor, аtаu ukurаn layar apa рun.

Saya аkаn bеrbаgі dеngаn Anda dоkumеntаѕі tеmрlаtе blоggеr ini agar Andа tahu bagaimana саrаnya mеnаmbаhkаn аtаu mеngеdіt kоntеn atau elemen tertentu pada template kesayangan Anda ini. Dоkumеntаѕі tеmрlаtе blogger Prеmіum Mеdіаn 1.7 аkаn mengarahkan Andа untuk mengetahui fіtur dan fungѕі dari template blоggеr уаng tеlаh Andа beli іnі.

Median UI V1.7 аdаlаh template blоggеr уаng еlеgаn, kuat, rаmріng, dаn rеѕроnѕіf. Template ini memiliki dеѕаіn canggih уаng аkаn mеmbuаt situs wеb Anda lеbіh mеnаrіk bаgі pengunjung dаn mеnghаѕіlkаn lеbіh bаnуаk pembaca. Dan yang раlіng penting template ini bіѕа dіgunаkаn baik oleh blogger аhlі maupun pemula.

Anda bisa mеndараtkаn template blogger premium Mеdіаn UI V.1.7 ini dengan mеmbеlіnуа secara lаngѕung melalui wеbѕіtе Jago Desain untuk mendukung реngеmbаng аgаr bіѕа tеruѕ bеrkаrуа.

Documentation Download

Format penulisan:

<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for='fTabs-1' data-text='Judul 1'></label>
  <label for='fTabs-2' data-text='Judul 2'></label>
  <label for='fTabs-3' data-text='Judul 3'></label>
  <label for='fTabs-4' data-text='Judul 4'></label>
</div>

<div class='tbCn'>
  <!--[ Tabs content ]-->
  <div class='tbText-1'>
    isi_konten_judul_1_disini
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-2'>
    isi_konten_judul_2_disini
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-3'>
    isi_konten_judul_3_disini
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-4'>
    isi_konten_judul_4_disini
  </div>
</div>

17. Table of Content (ToC)

Menguraikan bab, sub bab atau bagian nama lain pada postingan sebuah artikel.

Dalam beberapa tema Table of Content (Daftar Isi) dapat ditulis secara semi otomatis.

Daftar Isi Artikel

Format penulisan:

<details class='sp toc' open=''>
  <summary><b>Daftar Isi Artikel</b></summary>
  <div class='toC'>
    <ol>
      <li><a href='#your_url'>judul_1</a></li>
      <li><a href='#your_url'>judul_2</a></li>
      <li>
        <a href='#your_url'>judul_3</a>
        <ol>
          <li><a href='#your_url'>subjudul_3.1</a></li>
          <li><a href='#your_url'>subjudul_3.2</a></li>
          <li><a href='#your_url'>subjudul_3.3</a></li>
          <li><a href='#your_url'>subjudul_3.4</a></li>
        </ol>
      </li>
      <li><a href='#your_url'>judul_4</a></li>
    </ol>
  </div>
</details>

open='' digunakan untuk menjaga agar widget tetap terbuka, hapus atribut ini untuk menutup widget saat halaman dimuat.
Ganti tulisan 'Daftar Isi Artikel' untuk mengganti judul widget.

Ini mungkin sedikit lebih rumit karena ditulis secara manual, tetapi Anda dapat menempatkan sesuka hati di mana widget ini akan dipasang, ikuti langkah-langkah di bawah ini:

Menambahkan atribut ID:

Tag heading pada postingan ditandai dengan <h2>, <h3>, <h4>, atau pada Compose Mode / Mode Penulisan pilih Judul, Subjudul, Judul Kecil. Tambahkan ID khusus di setiap tag heading yang ditemukan.

Berikut contoh penulisan yang benar:
```
<h2>Judul Utama</h2>
```
```
<h2 id='judul_utama'>Judul Utama</h2>
```
Penggunaan setiap ID harus berbeda, dilarang menggunakan pengulangan ID yang sama dalam satu postingan/artikel.
Menautkan ke tag judul:

Tambahkan # sebelum setiap ID yang ingin Anda panggil, misalnya: tag judul dengan id='judul_utama' dapat dipanggil dengan href='#judul_utama'.

Contoh penulisan yang benar:
```
<li><a href='#judul_utama'>Judul Utama</a></li>
```
```
<li><a href='judul_utama'>Judul Utama</a></li>
```

18. Toggle Show/Hide

Sebuah widget interaktif sebagai detail tambahan yang dapat disembunyikan atau ditampilkan oleh pengguna sesuai permintaan.

Apa itu Median UI?

Median UI merupakan template blogger responsive untuk media berita dengan berbagai fitur yang menarik. Median UI di desain dengan konsep dashboard UI. Template ini lebih direkomendasikan di gunakan pada blog berita, desain yang lebih simple namun memiliki tingkat keterbacaan tinggi menjadi poin plus dari template ini.

Versi terakhir saat ini adalah median ui 1.7 setelah update dari versi sebelumnya median ui 1.6. Anda dapat mengunduh median ui free download . Link demo dan download sudah saya sediakan.

Format penulisan:

<details class='sp notranslate'>
  <summary><b>Judul Toggle</b></summary>
  <p>isi_paragraf</p>
</details>

19. Accordion

Beralih antara menyembunyikan dan menampilkan konten dalam jumlah besar.

Barisnya tidak terbatas, Anda bahkan dapat menambahkan hingga >100 baris.

Bagaimana cara menambahkan menu dropdown baru?

Anda bisa langsung menyalin kode navigasi Dropdown di atas lalu menempelnya pada baris baru, penempatan yang benar adalah seperti contoh berikut:

<!--[ Standar menu ]-->
<li class='leftC'>...</li>

<!--[ Dropdown ]-->
<li class='leftC dr'>...</li>

// your_new_menu

Bagaimana cara mengganti ikon pada menu?

Ikon dapat diubah dengan cara mengganti baris kode yang ditandai dengan  atau pada contoh di atas adalah tag <b:include name='folder-2-icon'/>, semua ikon SVG akan otomatis dikonversi ke ukuran 20px/20px.

Contoh penerapan yang benar:

<!--[ icon ]-->
<b:include name='folder-2-icon'/>

<!--[ icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699'></path><path d='M3.5 12H20.33'></path></svg>

Bagaimana cara mengubah link tujuan?

Link tujuan baru harus dituliskan dalam atribut href, pada contoh di atas kami menggunakan href='#', gantilah simbol # dengan url baru Anda.

Bagaimana cara menambahkan baris pembatas pada menu?

Garis pemisah digunakan untuk mengkategorikan menu satu dengan lainnya. Untuk menggunakannya, tambahkan className baru br dalam tag <li, untuk lebih detailnya perhatikan contoh di bawah ini:

<!--[ Standar menu ]-->
<li class='leftC'>...</li>

<!--[ Dropdown ]-->
<li class='leftC dr'>...</li>

<!--[ Standar menu ]-->
<li class='leftC br'>...</li>

<!--[ Dropdown ]-->
<li class='leftC dr br'>...</li>

Format penulisan:

<!--[ Accordion start ]-->
<div class='showH'>
  <!--[ line 1 ]-->
  <details class='ac alt'>
    <summary>judul_accordion</summary>
    <div class='aC'>
      <p>isi_paragraf</p>
    </div>
  </details>
  
  <!--[ line 2 ]-->
  <details class='ac alt'>
    <summary>judul_accordion</summary>
    <div class='aC'>
      <p>isi_paragraf</p>
    </div>
  </details>
  
  <!--[ line 3 ]-->
  <details class='ac alt'>
    <summary>judul_accordion</summary>
    <div class='aC'>
      <p>isi_paragraf</p>
    </div>
  </details>
  
  <!--[ line 4 ]-->
  <details class='ac alt'>
    <summary>judul_accordion</summary>
    <div class='aC'>
      <p>isi_paragraf</p>
    </div>
  </details>
</div>

20. Syntax Highlighter

Blok untuk menampilkan kode seperti HTML, CSS atau Javascript.

Standard
```
<pre>kode_anda_disini</pre>
```

.html

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

  <!--[ <body> open ]-->
  <body>
    <p>Contoh konten di sini!</p>
  </body>
  <!--[ </body> close ]-->
</html>

.css

/* 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)}
a:hover{opacity:.9;transition:opacity .1s}

.js

function downloadJSAtOnload() {
    var d = document.createElement('script');
    d.src = 'https://www.googletagmanager.com/gtag/js?id=00000', document.body.appendChild(d)
}
window.addEventListener ? window.addEventListener('load', downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent('onload', downloadJSAtOnload) : window.onload = downloadJSAtOnload;
window.dataLayer = window.dataLayer || [];

function gtag() {
    dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', '00000');

Penyesuaian

'IntersectionObserver'in window||document.write('<script src='https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver'><\/script>');

Kode warna pada sintaks ditulis secara manual, kami tidak menyediakan fitur sintaks berwarna otomatis.

Format penulisan:

<!--[ Change classname to html, css, or js ]-->
<div class='pre'>
  <pre>kode_disini</pre>
</div>

Ganti class='pre' dengan class='pre html' untuk menentukan format kode .html, ada 3 opsi yang tersedia: pre html, pre css, pre js.
Ganti class='pre' dengan class='pre custom' data-text='custom_code' untuk menulis judul khusus.
Tambahkan atribut style='' pada tag <pre> untuk memodifikasinya, misalnya tambahkan style='white-space: pre-wrap;' untuk menonaktifkan fungsi gulir samping, kode panjang akan ditulis di baris baru. Tambahkan style='max-height: 400px;' untuk menentukan tinggi maksimum widget hanya 400px, atau gabungkan keduanya ke style='white-space: pre-wrap; max-height: 400px;'.
Penambahan warna secara manual:
- <i class='red'>code</i>: untuk warna merah,
- <i class='blue'>code</i>: untuk warna biru,
- <i class='geen'>code</i>: untuk warna hijau,
- <i class='gray'>code</i>: untuk warna abu-abu,
- <i class='block'>code</i>: untuk blok biru,
Atau gunakan alat HLJS Parse untuk menambahkan warna secara otomatis.

21. Multitabs Syntax

Menampilkan banyak kode dalam satu blok

<!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://median-ui.jagodesain.com/",
  "name": "Median UI",
  "alternateName": "Median UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://median-ui.jagodesain.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

Format 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='Javascript'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>code_here</pre>
  </div>
  <div class='preC-2'>
    <pre>code_here</pre>
  </div>
  <div class='preC-3'>
    <pre>code_here</pre>
  </div>
</div>

22. Link

Hyperlink, digunakan untuk menghubungkan dari satu halaman ke halaman lainnya.

New! link:
Dapatkan versi terbaru
Fee! link:
Unduh disini
External link:
Beli versi resmi

Tautan di atas hanyalah contoh, tidak akan menuju halaman mana pun saat diklik

Format penulisan:

<a class='new' href='url_anda'>nama_link</a>

<a class='free' href='url_anda'>nama_link</a>

<a class='extL' href='url_anda' rel='noreferrer' target='_blank'>nama_link</a>

Atribut rel='noreferrer' berfungsi untuk mem-bypass audit cross-origin destination pada Lighthouse.

23. Download Card

Kotak informasi file tambahan yang dapat diunduh pengguna.

nama_file.zip 200kb

Format penulisan:

<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>nama_file.zip</span>
    <span class='fS'>200kb</span>
  </div>
    
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_anda'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Dengan gambar, bukan teks:

tentang_saya.png 10kb

Format penulisan:

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(https://blogger.googleusercontent.com/img/.../image.png)'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>nama_file.zip</span>
    <span class='fS'>200kb</span>
  </div>
    
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_anda'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Tautan di atas hanyalah contoh, tidak akan menuju halaman mana pun saat diklik

24. Button

Tombol memungkinkan pengguna mengambil tindakan, dan membuat pilihan, dengan satu ketukan.

Tombol bawaan:

Tombol

Format penulisan:

<a class='button' href='url_anda'>Tombol</a>

Gaya garis luar:

Tombol

Format penulisan:

<a class='button ln' href='url_anda'>Tombol</a>

Tanpa latar belakang:

Tombol

Format penulisan:

<a class='button sc' href='url_anda'>Tombol</a>

Dengan ikon svg:

Tombol
Tombol
Tombol

Format penulisan:

<a class='button' href='url_anda'>
  <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  <span>Tombol</span>
</a>

Dua tombol dalam satu baris:

Info Download

Format penulisan:

<div class='btnF'>
  <a class='button ln' href='url_anda'>
    <span>Info</span>
  </a>
  <a class='button' href='url_anda'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
    <span>Download</span>
  </a>
</div>

Tautan di atas hanyalah contoh, tidak akan menuju halaman mana pun saat diklik

25. Lazy Youtube

Penundaan pemuatan video Youtube untuk meningkatkan performa blog.

Video Youtube akan dimuat setelah pengunjung menggulir halaman.

Format penulisan:

<div class='lazyYt' data-embed='Youtube_videoID' style='z-index: 1;'>
  <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>

Tunda video Youtube <iframe> dengan fungsi defer.js (alternatif):

Format penulisan:

<!--[ Defer iframe ]-->
<div class='videoYt'>
  <iframe title='Lazy video iframe' class='lazy' data-src='//www.youtube.com/embed/Youtube_videoID' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>

Ganti Youtube_videoID dengan ID Youtube pilihan Anda,
ID Video dapat ditemukan di url Youtube, mis. youtube.com/watch?v=EuZrF16GCKo.

26. Post Reference

Referensi, sumber atau catatan kaki di akhir posting.

Sumber:
https://docs.jagodesain.com

Format penulisan:

<p class='pRef'>post_reference</p>

// atau

<div class='pRef'>post_reference</div>

27. Thumbnails Without Showing

Bagaimana cara menambahkan thumbnail tanpa menampilkannya di postingan?

Anda mungkin ingin membuat postingan tanpa gambar, tapi walau bagaimanapun setidaknya harus ada satu gambar dalam postingan Anda yang nantinya akan dijadikan thumbnail, untuk mensiatasinya gunakan kode di bawah ini pada bagian awal postingan:

<!--<div class='separator hidden'>
  <img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/>
</div>-->

Tag komentar  membuat gambar hanya terbaca sebagai teks dan tidak akan muncul di halaman postingan, tetapi ditampilkan sebagai thumbnail postingan. Pastikan juga sudah mengganti url gambar beserta atribut alt=''.

28. Number to the Heading

Menambahkan nomor pada tag heading (opsional)

Sebagai bagian kecil dari fitur di tema Median UI V1.7, Anda dapat menambahkan nomor ke tag judul tanpa diindeks oleh mesin pencari (hanya sebagai deskripsi konten):

<h2 class='h' data-text='1. '>Your_heading_title</h2>

Ganti nomor pada atribut data-text dengan nomor yang sesuai untuk konten Anda. Penulisan teks khusus juga diperbolehkan.

Artikel Terkait:

Lanjut ke Link Tujuan

Anda mungkin tertarik artikel ini :

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

Dukung kami dengan memilih salah satu metode donasi di bawah ini:

Donasi via Saweria Donasi via Trakteer Donasi via PayPal

Dana / OVO / GoPay 0858 6878 6809

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

Blog Tutorial

Kumpulan Script Code Dokumentasi Median UI Template Blogger

1. Image with caption

2. Lightbox image

3. Grid images

4. Scroll images

5. Show/hide images

6. Lazy load image

7. Related Post

8. Post Break

9. Text Indent

10. Drop Cap

11. Blockquote

12. Note Block

13. Guide List

14. Pros/Cont List

15. Tables

16. Tabs

17. Table of Content (ToC)

18. Toggle Show/Hide

19. Accordion

20. Syntax Highlighter

21. Multitabs Syntax

22. Link

23. Download Card

24. Button

25. Lazy Youtube

26. Post Reference

27. Thumbnails Without Showing

28. Number to the Heading

Posting Komentar

Download Font Arab Standar Al-Quran dan Font Kitab dengan Bahasa Melayu

Download Rumus Fungsi Terbilang Rupiah di Excel Indonesia

Cara Setting Page Layout Buku Saku (A6) Ms. Word Serta Membuat Cover dengan Photoshop

Download Font Aksara Jawa Hanacaraka Tanpa Instal Languages

Instal Sony Vegas Pro 13 + Crack (Full Version)

elzeno.id