Cara Penggunaan Shortcodes pada template piki?
Click Here and Follow the Documentation
Membuat Huruf Depan Tulisan Besar atau Drop Caps
Cara Sebagai berikut yang bisa anda gunakan di postingan anda, agar terlihat cantik pada awal tulisan.
T(caps)opi saya bundar, bundar topi saya, kalau tidak bundar bukan topi saya. Trek dung, trek dung, Trek dung, tra la la, Trek dung, trek dung, Trek dung, tra la la, Trek dung, trek dung, Trek dung, tra la la laa...Topi saya bundar. Topi saya bundar, Bundar topi saya, Kalau tidak bundar, Bukan topi saya. Trek dung, trek dung, Trek dung, tra la la, Trek dung, trek dung, Trek dung, tra la la, Trek dung, trek dung, Trek dung, tra la la laa...Topi saya bundar.
Caranya anda harus memasukan kode seperti ini <strike>T(caps)</strike> , T(caps)opi saya bunda, kemudian di teruskan dengan tulisan lainnya.
Menambahkan Table of Content Pada Artikel Blogger
Carannya anda cukup memasukan kode seperti ini: <strike>Table of Content (toc)</strike> dan hasilnya seperti dibawah ini
Shortcodes
<strike>Table of Content (toc)</strike> (code-box)
Cara Memasukan Tombol Default Buttons
Small Button (small-bt) Medium Button (medium-bt) Large Button (large-bt)
Download Sekarang
Codenya dibawah ini:
<p><strike><a href="/">Small Button (small-bt)</a></strike> <strike><a href="/">Medium Button (medium-bt)</a></strike> <strike><a href="/">Large Button (large-bt)</a></strike> </p> <br> <b><strike>Download Sekarang</strike></b>(code-box)
Menambahkan Warna Pada Tombol Buttons
Masukan Kode Scriptnya seperti dibawah ini.
<strike><a href="/">Buy Button (buy)</a></strike> <strike><a href="/">Cart Button (cart)</a></strike> <strike><a href="/">Link Button (link)</a></strike> <strike><a href="/">Open Button (open)</a></strike> <strike><a href="/">Info Button (info)</a></strike> <strike><a href="/">Demo Button (demo)</a></strike> (code-box)
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Points Selection
- Blog IDMaspur Pertama
- Blog IDMaspur Kedua
- Blog IDMaspur Ketiga
- Blog IDMaspur Ini Hanyalah contoh Kebawah
Number Counting
- Lorem ipsum dolor sit amet
- Cras luctus pretium libero
- Donec suscipit, arcu
- In interdum sem pulvinar
Contact Form Message
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ullamcorper justo, et suscipit ex. Vivamus ornare eu mauris id imperdiet. (alert-success)
Alert Message Passed Kodenya (alert-passed)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ullamcorper justo, et suscipit ex. Vivamus ornare eu mauris id imperdiet. (alert-passed)>
Alert Message Warning Kodenya (alert-warning)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ullamcorper justo, et suscipit ex. Vivamus ornare eu mauris id imperdiet. (alert-warning)
Alert Message Error Kodenya (alert-error)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ullamcorper justo, et suscipit ex. Vivamus ornare eu mauris id imperdiet. (alert-error)
Code Box Alert Kodenya (code-box)
$("#new-bottom-ad-placeholder").each(function() { var a = $(this); a.length $("#bottom-ad-placeholder").appendTo(a); }); (code-box)
PERHATIAN..! Semua Tulisan Kode Wajib di berikan kode seperti ini : <blockquote>ini adalah contoh tulisan saya dan kode yang di pilih dimasukan disini kode anda </blockquote> agar semua tulisan yang blok bisa berwarna sesuai yang di harapkan anda.
Membuat Table Pada Postingan
Features | Availability |
---|---|
SEO Friendly | True |
Personal Blog | True |
2 Column | True |
Top Navigation | True |
Breadcrumbs | True |
2 Option Search Box | True |
Back to Top Button | True |
Footer Menu | True |
ShareThis Share Button | True |
Featured Recent Post | Pro Version |
2 Option Comment System | Pro Version |
Fast Version | Pro Version |
Newsletter Widget | Pro Version |
Related Post | Pro Version |
Sticky Sidebar | Pro Version |
Image Lightbox | Pro Version |
Sitemap Widget | Pro Version |
Contact Form Widget | Pro Version |
Instagram Widget | Pro Version |
Fixed Menu on Mobile | Pro Version |
Version 1 and 2 | Pro Version |
Shortcodes | Pro Version |
Copy Codenya Dibawah ini.
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr> <th>Features</th> <th>Availability</th> </tr> <tr> <td>SEO Friendly</td> <td>True</td> </tr> <tr> <td>Personal Blog</td> <td>True</td> </tr> <tr> <td>2 Column</td> <td>True</td> </tr> <tr> <td>Top Navigation</td> <td>True</td> </tr> <tr> <td>Breadcrumbs</td> <td>True</td> </tr> <tr> <td>2 Option Search Box</td> <td>True</td> </tr> <tr> <td>Back to Top Button</td> <td>True</td> </tr> <tr> <td>Footer Menu</td> <td>True</td> </tr> <tr> <td>ShareThis Share Button</td> <td>True</td> </tr> <tr> <td>Featured Recent Post</td> <td>Pro Version</td> </tr> <tr> <td>2 Option Comment System</td> <td>Pro Version</td> </tr> <tr> <td>Fast Version</td> <td>Pro Version</td> </tr> <tr> <td>Newsletter Widget</td> <td>Pro Version</td> </tr> <tr> <td>Related Post</td> <td>Pro Version</td> </tr> <tr> <td>Sticky Sidebar</td> <td>Pro Version</td> </tr> <tr> <td>Image Lightbox</td> <td>Pro Version</td> </tr> <tr> <td>Sitemap Widget</td> <td>Pro Version</td> </tr> <tr> <td>Contact Form Widget</td> <td>Pro Version</td> </tr> <tr> <td>Instagram Widget</td> <td>Pro Version</td> </tr> <tr> <td>Fixed Menu on Mobile</td> <td>Pro Version</td> </tr> <tr> <td>Version 1 and 2</td> <td>Pro Version</td> </tr> <tr> <td>Shortcodes</td> <td>Pro Version</td> </tr> </tbody></table>(code-box)
Membuat Postingan 1 Halaman
<strike>(full-width)</strike> (code-box)
Gila Material Pro
Alerts
Berikan pesan umpan balik kontekstual untuk tindakan pengguna biasa.
Varian Alert
Alert memiliki dua varian berbeda:
<div class="gmp_alert">
<div class="alert_message">
A simple default alert—check it out!
</div>
</div>
<div class="gmp_alert alert_outline">
<div class="alert_message">
A simple outlined alert—check it out!
</div>
</div>
Alert dengan Background Solid
Varian gaya background yang solid. Gunakan salah satu dari empat gaya di bawah ini:
<div class="gmp_alert alert_info">
<div class="alert_message">
A simple info alert—check it out!
</div>
</div>
<div class="gmp_alert alert_warning">
<div class="alert_message">
A simple warning alert—check it out!
</div>
</div>
<div class="gmp_alert alert_success">
<div class="alert_message">
A simple success alert—check it out!
</div>
</div>
<div class="gmp_alert alert_error">
<div class="alert_message">
A simple error alert—check it out!
</div>
</div>
Alert dengan Gaya Garis
Varian gaya garis tepi dengan batas. Gunakan salah satu dari empat gaya di bawah ini:
<div class="gmp_alert alert_info alert_outline">
<div class="alert_message">
A simple info alert—check it out!
</div>
</div>
<div class="gmp_alert alert_warning alert_outline">
<div class="alert_message">
A simple warning alert—check it out!
</div>
</div>
<div class="gmp_alert alert_success alert_outline">
<div class="alert_message">
A simple success alert—check it out!
</div>
</div>
<div class="gmp_alert alert_error alert_outline">
<div class="alert_message">
A simple error alert—check it out!
</div>
</div>
Alert dengan Deskripsi Background Solid
Anda dapat menggunakan alert dengan isi konten deskripsi:
<div class="gmp_alert alert_info">
<div class="alert_message">
<strong>Info</strong>
A simple info alert—check it out!
</div>
</div>
<div class="gmp_alert alert_warning">
<div class="alert_message">
<strong>Warning</strong>
A simple warning alert—check it out!
</div>
</div>
<div class="gmp_alert alert_success">
<div class="alert_message">
<strong>Success</strong>
A simple success alert—check it out!
</div>
</div>
<div class="gmp_alert alert_error">
<div class="alert_message">
<strong>Error</strong>
A simple error alert—check it out!
</div>
</div>
Alert dengan Gaya Garis Deskripsi
Anda dapat menggunakan alert dengan isi deskripsi gaya garis:
<div class="gmp_alert alert_info alert_outline">
<div class="alert_message">
<strong>Info</strong>
A simple info alert—check it out!
</div>
</div>
<div class="gmp_alert alert_warning alert_outline">
<div class="alert_message">
<strong>Warning</strong>
A simple warning alert—check it out!
</div>
</div>
<div class="gmp_alert alert_success alert_outline">
<div class="alert_message">
<strong>Success</strong>
A simple success alert—check it out!
</div>
</div>
<div class="gmp_alert alert_error alert_outline">
<div class="alert_message">
<strong>Error</strong>
A simple error alert—check it out!
</div>
</div>
Button
Button adalah elemen yang dapat diklik yang digunakan untuk memicu tindakan. Mereka mengomunikasikan ajakan bertindak kepada pengguna dan memungkinkan pengguna berinteraksi dengan halaman dalam berbagai cara. Label button mengungkapkan tindakan apa yang akan terjadi saat pengguna berinteraksi dengannya.
Varian Button
Button memiliki empat varian berbeda:
<a class="gmp_button" href="#">Default Button</a>
<a class="gmp_button outline" href="#">Outline Button</a>
<a class="gmp_button unelevated" href="#">Unelevated Button</a>
<a class="gmp_button raised" href="#">Raised Button</a>
Ukuran Button
Button memiliki tiga ukuran berbeda:
<a class="gmp_button small unelevated" href="#">Small Button</a>
<a class="gmp_button medium unelevated" href="#">Medium Button</a>
<a class="gmp_button large unelevated" href="#">Large Button</a>
Bentuk Button
Button dapat memiliki bentuk tambahan:
<a class="gmp_button unelevated" href="#">Default Button</a>
<a class="gmp_button unelevated rounded" href="#">Rounded Button</a>
Button Dinonaktifkan
Button jika tidak ada tindakan:
<a class="gmp_button disabled" href="#">Default Button Disabled</a>
<a class="gmp_button outline disabled" href="#">Outline Button Disabled</a>
<a class="gmp_button unelevated disabled" href="#">Unelevated Button Disabled</a>
<a class="gmp_button raised disabled" href="#">Raised Button Disabled</a>
<a class="gmp_button unelevated rounded disabled" href="#">Rounded Button Disabled</a>
Button dengan Ikon
Buat button dengan ikon cukup tambahkan Ikon SVG:
<a class="gmp_button outline" href="#">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<path d="M12 9a3 3 0 1 0 0 6 3 3 0 1 0 0-6z"></path>
</svg>
Demo
</a>
<a class="gmp_button unelevated" href="#">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
<path d="M12 15V3"></path>
</svg>
Download
</a>
Tabel
Menggunakan markup tabel paling dasar, inilah tampilan Tabel. Semua gaya tabel diwariskan, artinya setiap tabel bertingkat akan ditata dengan cara yang sama seperti induknya.
No. | Nama | Jenis Kelamin | Kota | Hobi |
---|---|---|---|---|
1 | Ishar Yulian Satriani | Laki-laki | Pandeglang, Banten | Membuat design template Blogger |
2 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
3 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
4 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
5 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
<div class="gmp_table">
<table>
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>
Opsi Kepala Tabel
Gunakan pilihan dari keempat class ini untuk mengubah warna Kepala Tabel: table_primary
, table_warning
, table_success
, dan table_error
.
No. | Nama | Jenis Kelamin | Kota | Hobi |
---|---|---|---|---|
1 | Ishar Yulian Satriani | Laki-laki | Pandeglang, Banten | Membuat design template Blogger |
2 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
3 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
4 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
5 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
<div class="gmp_table">
<table class="table_primary">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>
Tabel dengan Baris Bergaris
Gunakan class table_stripped
untuk menambahkan zebra-striping ke baris tabel mana pun di tbody.
No. | Nama | Jenis Kelamin | Kota | Hobi |
---|---|---|---|---|
1 | Ishar Yulian Satriani | Laki-laki | Pandeglang, Banten | Membuat design template Blogger |
2 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
3 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
4 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
5 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
<div class="gmp_table">
<table class="table_stripped">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>
Tabel dengan Baris yang Dapat Dilayangkan
Gunakan class table_hovered
untuk mengaktifkan efek hover pada baris tabel di tbody.
No. | Nama | Jenis Kelamin | Kota | Hobi |
---|---|---|---|---|
1 | Ishar Yulian Satriani | Laki-laki | Pandeglang, Banten | Membuat design template Blogger |
2 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
3 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
4 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
5 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
<div class="gmp_table">
<table class="table_hovered">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>
Tabel Sticky
Gunakan class table_sticky
untuk menggunakan tabel sticky.
No. | Nama | Jenis Kelamin | Kota | Hobi |
---|---|---|---|---|
1 | Ishar Yulian Satriani | Laki-laki | Pandeglang, Banten | Membuat design template Blogger |
2 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
3 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
4 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
5 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
6 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
7 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
<div class="gmp_table table_sticky">
<table>
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>6</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>7</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>
Accordion/Collapsible Panel
Contoh:
<div class="gmp_collapse">
<div class="collapse_panel">
<div class="collapse_header">
<div class="collapse_title">Collapse 1 - Click Me!</div>
</div>
<div class="collapse_content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<div class="collapse_panel">
<div class="collapse_header">
<div class="collapse_title">Collapse 2 - Click Me!</div>
</div>
<div class="collapse_content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<div class="collapse_panel">
<div class="collapse_header">
<div class="collapse_title">Collapse 3 - Click Me!</div>
</div>
<div class="collapse_content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</div>
Blockquote
Gunakan blockquote
dengan span
, small
atau footer
.
IDMaspur selalu berusaha memberikan yang terbaik untuk Anda.
@idmaspur
<blockquote>
IDMaspur selalu berusaha memberikan yang terbaik untuk Anda.
<span>@idmaspur</span>
</blockquote>
Tag Pre Code
Tag pre
code
telah disertakan dengan fitur copy to clipboard. Jika teksnya HTML jangan lupa untuk mem-parse teks menggunakan Alat Parse HTML.
Di bawah ini adalah kombinasi dari tag awal dengan tag kode dan tambahkan judul ke tag awal seperti di bawah ini:
<div class="gmp_highlight">
<pre data-lang="yout-title-here"><code>Your code here</code></pre>
</div>
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample HTML</title>
</head>
<body>
<p>Sample Text</p>
</body>
</html>
body{font-size:14px;font-weight:400;color:inherit;}
$('#mybutton').click(function() {
$(this).toggleClass('active');
});
Di bawah ini seperti dokumen angular.io:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My First Angular App!';
}
Postingan Terkait Manual
Postingan Terkait Manual dapat digunakan untuk membuat artikel terkait dalam postingan secara manual.
Contoh:
<div class="manual_related_post">
<span>Baca Juga:</span>
<a href="#">
Gila Material Pro - Komponen Template
</a>
</div>
Media
Gunakan class media_player
untuk membuat embed
, iframe
, dan object
yang responsif.
Contoh untuk embed iframe YouTube dengan fitur lazyload.
<div class="media_player lyt" data-embed="2Oi87E2Wk2g">
<div class="play_button">
<svg viewBox="0 0 24 24">
<path d="M10 15l5.2-3L10 9v6m11.6-7.8a8.4 8.4 0 0 1 .2 1.9 16.2 16.2 0 0 1 .1 2.1v.8a25.1 25.1 0 0 1-.4 4.8 2.7 2.7 0 0 1-1.8 1.8l-2.6.2H12a50.8 50.8 0 0 1-7.8-.4 2.7 2.7 0 0 1-1.8-1.8 8.4 8.4 0 0 1-.2-1.9 16.2 16.2 0 0 1-.1-2.1V12a25.1 25.1 0 0 1 .4-4.8 2.7 2.7 0 0 1 1.7-1.8 12.6 12.6 0 0 1 2.6-.2H12a50.8 50.8 0 0 1 7.8.4 2.7 2.7 0 0 1 1.8 1.6z"></path>
</svg>
</div>
</div>
Postingan Referensi
Untuk menambahkan daftar referensi ke artikel yang Anda tulis:
Referensi:
https://resep.baca.news/2022/12/cara-membuat-backlink-di-blogger.html
<p class="post_reference">
Reference:
<br />
https://resep.baca.news/2022/12/cara-membuat-backlink-di-blogger.html
</p>
Lain-lain
Ini adalah komponen lain yang berguna untuk digunakan.
Daftar Isi
Dengan JavaScript, secara otomatis membuat Daftar Isi untuk postingan Anda. Ini akan berfungsi jika postingan Anda menyertakan judul h2
dan h3
.
Gunakan kode HTML di bawah ini dan tempelkan di Postingan Blogger dalam mode Tampilan HTML.
<div id="toc_wrap">
<div class="toc_header">
<div class="toc_title">
Daftar Isi
</div>
<div class="show_hide_toc_button">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m6 9 6 6 6-6"></path>
</svg>
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m18 15-6-6-6 6"></path>
</svg>
</div>
</div>
<div id="toc_content"></div>
</div>
Menambahkan Item Menu ke Menu Navigasi
Anda dapat menambah, menghapus, atau menambahkan item menu di Menu Navigasi dengan mengikuti langkah-langkah berikut:
Masuk ke Dashboard Blogger > pilih menu Tata Letak.
Cari bagian yang berjudul MENU NAVIGASI UTAMA.
Klik tombol edit (ikon pensil) di Gadget Menu Navigasi Utama (Gadget Daftar Link).
Akan muncul pop-up konfigurasi Widget.
Pada kolom Judul isi sesuai keinginan (Opsional).
Pada kolom Jumlah item yang tampil di daftar biarkan aja kosong.
Pada bagian Pengurutan biarkan aja default.
Pada bagian Daftar link atur seperti di bawah ini.
- Klik TAMBAHKAN ITEM BARU
- Pada kolom Nama situs isi dengan judul menu sesuai keinginan.
- Pada kolom URL situs isi dengan URL link tujuan.
- Setelah diatur semua klik tombol SIMPAN di sampingnya.
Setelah semua dikonfigurasi klik tombol SIMPAN.
Pasang di bagian awal judul pada kolom Nama situs. Misalnya seperti contoh di bawah ini.
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path><path d="M12 15V3"></path></svg> Judul Menu
Membuat Qoute
Gunakan Kode dibawah ini
<div class="gmp_alert alert_info">
<div class="alert_message">
<strong> Allahumma sholli wasallim 'ala Sayyidina Muhammad wa ala Ali Sayyidina Muhammad. </strong>
<b>Artinya:</b> "Ya Allah semoga rahmat senantiasa tercurah kepada Nabi Muhammad dan juga kepada Keluarga Nabi Muhammad."
</div>
</div>
IDMaspur is an Educational Blog, Accept Website Design Services, Companies, Online Stores, Social Institutions, Schools, News Portals, Optimization