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)
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 <p>Your_Paragraf_Here</p> 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.
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
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
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 ofnoneto eg400pxto specify the maximum height of syntax is only 400 pixels.- Use
<i class='red'>code_here</i>to add red/orage color. - Use
<i class='blue'>code_here</i>to add blue color. - Use
<i class='green'>code_here</i>to add green color. - Use
<i class='gray'>code_here</i>to add gray color. - Use
<i class='block'>code_here</i>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
<i class='block'></i>, 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
checkedattribute defines the first tab that appears by default. - Make sure
id='...'andfor='...'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:
DownloadDemo
<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:
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:
<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.