Kumpulan Script Code Template Plus UI (Free Customize)

Nirwanapedia - Halo Sobat Pedia, Apakah Kalian Menggunakan Template Plus UI Pada Blog Kalian? Jika Iya, Pada Kesempatan Kali Ini Nirwanapedia Akan Membagian Kumpulan Script Code Template Plus UI (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 Nirwanapedia Bagikan Kumpulan Script Code Template Plus UI (Free Customize)

Script Code Template Plus UI (Free Customize)

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

Langkah-Langkah :

Login Ke Dalam Akun Blogger Sobat Pedia
Silahkan Buat Postingan Baru
Pada Menu Tampilan Terdapat Dua Opsi "Tampilan Menulis" Dan "Tampilan HTML"
Silahkan Pilih "Tampilan HTML"

Tips : Gunakan Your_Paragraf_Here Tag Untuk Menambahkan Paragraf Baru Ke Dalam Artikel

Manual Related Post

Note : Fitur Ini Perlu Di Tulis Secara Manual Dan Tidak Bisa Muncul Pada Setiap Artikel Secara Otomatis.

Baca Juga :

Format Penulisan:

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>Baca Juga :</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

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>

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

Manual Table of Content

Contents

Image with Caption
Manual Related Post
Post Break
Blockquote

With sub-heading:

Heading_title

Menggunakan Manual TOC (Table Of Content) Lebih Rumit Karena Sobat Pedia Harus Menambahkan Link Artikel Satu Persatu Secara Manual.

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>

Silahkan Hapus open='' Untuk Menutup Otomatis Table Of Content Saat Halaman Pertama Kali Di Muat
Sobat Pedia Dapat Mengganti Judul "Tampilkan Semua/Sembunyikan Semua" Pada Bagian Yang Telah Di Tandai

Semi Automatic Table of Content

Table of Contents

Cara Termudah Dalam Pembuatan Table Of Content Adalah Dengan Menggunakan Tag Heading Pada Artikel Sobat Pedia. Tag Heading Terdiri Dari 3 Level Penulisan (h2 - h4), Jadi Pastikan Sobat Pedia Menggunakan Tag Heading Pada Saat Menulis Artikel.

Code to specify semi-automatic ToC widget location:

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

Syntax Highlighter

Gunakan Syntax Highlighter Untuk Mendifinisakn Code Yang Ingin Kalian Tambahkan Pada Artikel Seperti (HTML, CSS, Javascript, etc.)

<!--[ Change data-text to .html, .css, .js or any language ]-->
<div class='pre pu notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Penambahan Warna Pada Penulisan Syntax Highlighter Dapat Di Tulis Secara Manual, Namun Anda Juga Dapat Menuliskannya Secara Otomatis Menggunakan Fitur Ini.

Change data-text='.html' to define another code format, i.e. data-text='.css', data-text='.js', data-text='.php', etc
Value white-space:pre-wrap; useful for disabling side scrolling, long code will be preserved and give a little scrolling function to keep it legible.
max-height:none; defines the maximum height of syntax isn't set (automatic), change the value of none to eg 400px to specify the maximum height of syntax is only 400 pixels.
Use code_here to add red/orage color.
Use code_here to add blue color.
Use code_here to add green color.
Use code_here to add gray color.
Use code_here to add a block of blue color.

Automatic Colored Syntax Highlighter

Script Code Dapat 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:

<!--[ Add a classname hl to automatically color syntax ]-->
<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 Dapat Secara Otomatis Mendeteksi Bahasa Dan Warna Pada Sebuah Script Code. Namun, Pada Beberapa Kasus Fitur Ini Tidak Dapat Secara Otomatis Mendeteksina. Jadi Sobat Pedia Harus Menambahkan Class Sesuai Dengan Bahasa Script Code Nya Seperti html Atau language-html Dengan hl.

Contoh :

<!--[ Add a classname hl to automatically color syntax ]-->
<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 Dalam Penggunaan Automatic Colored Syntax Highlighter:

Sobat Pedia Tidak Dapat Menambahkan Tag Pada Code Yang Telah Terformat Secara Otomatis. Sebagai Contoh, Sobat Pedia Ingin Menambahkan , Tag Tersebut Tidak Lagi Ditandai Dengan Warna Biru.

Multi Functional Syntax Highlighter

Your_code_is_here

Format Penulisan :

<!--[ Replace data-text with any name to show, data-file with filename, data-lang with file extension, data-time with countdown in seconds ]-->
<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://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"
  }
}

Writing Code:

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

The checked attribute defines the first tab that appears by default.
Make sure id='...' and for='...' attributes have the same value. ID must be unique, there cannot be two identical IDs in one page.
Change data-text='HTML' attribute in the highlighted section to rename the tab.

Button Link

Button

<a class='button' href='url_is_here'>Title_link</a>

Alternative style:

Button

<a class='button ln' href='url_is_here'>Title_link</a>

With icons:

Download
Demo

<a class='button' href='url_is_here'><i class='icon dl'></i>Title_link</a>
<a class='button' href='url_is_here'><i class='icon demo'></i>Title_link</a>

with <svg> icons:

WhatsApp me!
Buy now!

<a class='button' href='url_is_here'>
  <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='url_is_here'>
  <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>

Add style='fill:#fff; margin-right:12px;' or style='stroke:#fff; margin-right:12px;' attribute to give SVG icon a white color.

Two button in single line:

Demo Download

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

Penutup

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 Sobat Pedia Dapat Mengunjuing Situs Resmi Plus UI : https://plus-ui.fineshopdesign.com/ Untuk Mendapatkan Format Penulisan Code Lainnya.

Go to Link

Baca juga :

Nirwanapedia

Kumpulan Script Code Template Plus UI (Free Customize)

Manual Related Post

Auto Related Post

Blockquote

Note Block

Manual Table of Content

Semi Automatic Table of Content

Syntax Highlighter

Automatic Colored Syntax Highlighter

Multi Functional Syntax Highlighter

MultiTabs Syntax Highlighter

Button Link

Penutup

تعليق واحد

15+ Rekomendasi Novel Bahasa Inggris Best Seller Untuk Pemula

Cara Hapus Dan Menonaktifkan App Vault Di Semua Tipe Hp Xiaomi

Cara Membuat Safelink Random Artikel Di Blog Utama Blogger

Cara Membuat Form Order Checkout Menuju WhatsApp Di Blogger