Bismillah, Tulisan ini merupakan sebuah catatan khusus yang ada diBlog supar.web.id. Bisa dikatakan bahwa yang ana tulis adalah notes dari style penulisan, font, dan atribut lain yang ada diBlog ana.

Daftar isi

1 Membuat Daftar Isi/Table Of Content
2 Gaya Tulisan
3 Syntax Highlighter
4 Post Break
5 Text Arab
6 Mark/highlight
7 Tulisan code
8 Blockquote
9 Note Block
10 Related Post Manual
11 Varisai Kotak (BOX)
12 Gambar pada isi artikel
13 Embed video Youtube pada postingan
14 Tabel Responsive AMP HTML
15 Blogger Tag Conditional for Mobile
- 15.1 Menampilkan Widget di Mobile
- 15.2 Menyembunyikan Widget di Mobile
16 Ordered List
17 Unordered List
18 Nested
19 Buttons
20 Box Demo and Download
21 Show Hide Button/Spoiler

1. Membuat Daftar Isi/Table Of Content

Tuliskan pada tampilan HTML

<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
  <ul>
    <li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
    <li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
    <li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
    <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
    <li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
      <li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
  </ul>
</div>

Atur penulisan heading/judul dengan menyertakan id yang sama dengan toc

<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu

<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua

<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga

<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat

<h2 id="toc5">Judul Lima</h2>
...isi paragraf lima

<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
...isi paragraf lima part 1

<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
...isi paragraf lima part 2

<h2 id="toc6">Judul Enam</h2>
...isi paragraf enam

2. Gaya Tulisan

Bold

Italic

Underscore

~~Striketrough~~

Tuliskan pada tampilan HTML

<b>Bold</b>
<i>Italic</i>
<u>Underscore</u>
<strike>Striketrough</strike>

Heading < h1 >/Judul post

Heading < h2 >

Subheading < h3 >

Minor heading < h4 >

Tuliskan pada tampilan HTML

<h1>Heading < h1 >/Judul post</h1>
<h2>Heading < h2 ></h2>
<h3>Subheading < h3 ></h3>
<h4>Minor heading < h4 ></h4>

tulisan terkecil font-size:10px

tulisan kecil font-size:13px

tulisan normal font-size:16px

tulisan sedang font-size:18px

tulisan besar font-size:22px

tulisan terbesar font-size:26px

blog supar.web.id memakai font-size:16px

Tuliskan pada tampilan HTML

<div class="font_terkecil">
tulisan terkecil
</div>
  
<div class="font_kecil">
tulisan kecil
</div>
  
<div class="font_normal">
tulisan normal
</div>  
  
<div class="font_sedang">
tulisan sedang
</div>  
  
<div class="font_besar">
tulisan besar
</div>
  
<div class="font_terbesar">
tulisan terbesar
</div>

E = MC²

H₂O

Tuliskan pada tampilan HTML

E = MC<sup>2</sup>
  
H<sub>2</sub>O

3. Syntax Highlighter pada postingan blog

a. Buatlah sebuah postingan

b. Pindah ke tampilan HTML

c. Sebelum memasukan tag HTML, CSS atau Javascript pada Syntax Highlighter harus diparse dahulu. Misalkan parse online di Parse HTML

d. Masukan semua kode CSS, HTML atau Javascript yang sudah diparse pada tampilan HTML postingan, seperti ini

<pre><code>
<!--Masukkan kode CSS/HTML yang sudah diparse disini-->
</code></pre>

e. Setelah selesai menulis kemudian publish

4. Post Break

Fitur ini digunakan untuk memisahkan paragraf atau untuk membuka pembahasan baru dalam postingan. Caranya dengan menyisipkan kode <hr/> diantara paragraf pada mode tulisan HTML.

Lihat contoh dibawah ini:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis odio a tellus luctus rhoncus sit amet ac est. Nulla luctus sed nisi ac porta.

<hr/>

Vivamus nec justo eu metus lacinia efficitur vulputate non tortor. Fusce maximus orci et leo posuere efficitur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis odio a tellus luctus rhoncus sit amet ac est. Nulla luctus sed nisi ac porta.

Vivamus nec justo eu metus lacinia efficitur vulputate non tortor. Fusce maximus orci et leo posuere efficitur.

5. Menulis text arab.

<div class="text-arab">
<!--ketik text arab disini-->
</div>

لَا إِلَهَ إِلاَّ اللَّهُ وَحْدَهُ لاَ شَـرِيْكَ لَهُ. لَهُ الْمُلْكُ وَلَهُ الْحَمْدُ وَهُوَ عَلَى كُلِّ شَيْءٍ قَدِيْرٌ. سُبْحَانَ اللَّهِ وَالْحَمْدُ لِلَّهِ وَلاَ إِلَهَ إِلاَّ اللَّهُ وَ اللَّهُ أَكْبَرُ، وَلاَ حَوْلَ وَلاَ قُوَّةَ إِلاَّ بِاللَّهِ الْعَلِيِّ الْعَظِيْمِ رَبِّ اغْفِرْ ليِ

6. Membuat Mark/highlight.

Tuliskan pada tampilan HTML

<mark>
<!--tulis Mark/highlight-->
</mark>

7. Membuat `tulisan code.`

Tuliskan pada tampilan HTML

<code>
<!--tulisan code-->
</code>

8. Blockquote

sebaik-baik kalian adalah orang yang belajar al qur'an dan mengajarkannya

Tuliskan pada tampilan HTML

<blockquote>
<!--tulis blockquote anda disini-->
</blockquote>

9. Note Block

Fitur ini berfungsi untuk menambahkan info penting, kalimat warning atau kalimat sorotan, ada dua style yaitu:

Catatan: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam.

Tuliskan pada tampilan HTML

<div class="catetan"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13" /></svg><span>Catatan:</span>
<!--tuliskan notes/catetan disini-->
</div>

Warning! Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

Tuliskan pada tampilan HTML

<div class="peringatan"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" /></svg><span>Warning!</span>
<!--tuliskan catatan peringatan disini-->
</div>

10. Menyematkan Related Post Secara Manual

Tuliskan pada tampilan HTML

<div class="related">Baca Juga:
<!--tulis judul related post disini dengan linknya-->
</div>

Tuliskan pada tampilan HTML

<div class="related">Baca Juga:
<ul>
    <li><a href="#" rel="nofollow" target="_blank">Your_post_title_here</a></li>
    <li><a href="#" rel="nofollow" target="_blank">Your_post_title_here</a></li>
    <li><a href="#" rel="nofollow" target="_blank">Your_post_title_here</a></li>
</ul>
</div>

11. Varisai Kotak (BOX)

Box default,mulai menulis ...

Box green,mulai menulis ...

Box blue,mulai menulis ...

Box red,mulai menulis ...

Box yellow,mulai menulis ...

Tuliskan pada tampilan HTML

<div class="box">Box default,mulai menulis ...</div>

<div class="box green">Box green,mulai menulis ...</div>
  
<div class="box blue">Box blue,mulai menulis ...</div>

<div class="box red">Box red,mulai menulis ...</div>
  
<div class="box yellow">Box yellow,mulai menulis ...</div>

12. Menambahkan gambar pada isi artikel

Kode untuk memasang gambar ditengah postingan:

<div class='img-center'><amp-img alt='judul-alt-gambar' height='xxx' layout='responsive' src='url-gambar.jpg' width='xxx'></amp-img></div>

Kode untuk memasang gambar dikanan postingan:

<div class='img-right'><amp-img alt='judul-alt-gambar' height='xxx' layout='responsive' src='url-gambar.jpg' width='xxx'></amp-img></div>

Kode untuk memasang gambar dikiri postingan:

<div class='img-left'><amp-img alt='judul-alt-gambar' height='xxx' layout='responsive' src='url-gambar.jpg' width='xxx'></amp-img></div>

Catatan.

Ukuran width dan height megikuti ukuran Original gambar

13. Embed video Youtube pada postingan.

Ambil kode video dari url video Youtube yang ingin gunakan.

Letakkan pada kode amp-youtube.

<amp-youtube data-videoid='xxxxxxxxxxx' height='270' layout='responsive' width='480'></amp-youtube>

Ubah bagian yang di mark dengan kode video Youtube yang dipilih

14. Tabel Responsive AMP HTML

Bokingan Hari Biasa
Jenis Kamar	Harga	Jumlah Kamar	Jumlah
Ekonomi	Rp. 150.000	5 kamar	Rp. 750.000
Standar	Rp. 200.000	5 kamar	Rp. 1.000.000
Standar AC	Rp. 300.000	4 kamar	Rp. 1.200.000
VIP/Family	Rp. 350.000	1 kamar	Rp. 350.000

Tuliskan dalam tampilan HTML

<div class='table-responsive'>
  <table class="table">
    <tr>
      <th colspan="4" class="tg-center tg-bf">Bokingan Hari Biasa</th>
    </tr>
    <tr>
      <td>Jenis Kamar</td>
      <td>Harga</td>
      <td>Jumlah Kamar</td>
      <td>Jumlah</td>
    </tr>
    <tr>
      <td>Ekonomi</td>
      <td>Rp. 150.000</td>
      <td>5 kamar</td>
      <td>Rp. 750.000</td>
    </tr>
    <tr>
      <td>Standar</td>
      <td>Rp. 200.000</td>
      <td>5 kamar</td>
      <td>Rp. 1.000.000</td>
    </tr>
    <tr>
      <td>Standar AC</td>
      <td>Rp. 300.000</td>
      <td>4 kamar</td>
      <td>Rp. 1.200.000</td>
    </tr>
    <tr>
      <td>VIP/Family</td>
      <td>Rp. 350.000</td>
      <td>1 kamar</td>
      <td>Rp. 350.000</td>
    </tr>
  </table>
</div>

Untuk kode class="tg-center tg-bf" silahkan sesuai dengan keperluan untuk mengatur letak header table.

Keterangan:

tg-bf untuk huruf tebal

tg-it untuk huruf miring

tg-left untuk rata kiri

tg-right untuk rata kanan

tg-center untuk rata tengah

Atau cara lain dengan copy-paste dari Exel.

15. Blogger Tag Conditional for Mobile

Menampilkan Widget di Mobile

# Menampilkan widget hanya diversi mobile/seluler dengan menyisipkan kode berikut pada widget melalui edit HTML

cond='data:blog.isMobileRequest == &quot;true&quot;'

Contoh sebagai berikut:

<b:widget cond='data:blog.isMobileRequest == &quot;true&quot;' id='Label1' locked='false' title='Labels' type='Label' version='1'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
        <b:widget-setting name='display'>CLOUD</b:widget-setting>
        <b:widget-setting name='selectedLabelsList'/>
        <b:widget-setting name='showType'>ALL</b:widget-setting>
        <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
.............................
.............................
.............................
</b:widget>

Menyembunyikan Widget di Mobile

# Menyembunyikan widget atau Script tertentu pada versi mobile

Untuk menyembunyikan widget atau script dimobile/seluler dengan mengganti true pada kode diatas menjadi false

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

16. Ordered List

Pengurutan/ordered List dengan menggunakan angka ditulis dengan kode <ol>, sedangkan unordered list dengan menggunakan simbol ditulis dengan kode <ul>

Lihat Contoh dibawah ini

Is a list with number.

Ini adalah contoh daftar ordered list
Ini adalah contoh daftar ordered list
Ini adalah contoh daftar ordered list
Ini adalah contoh daftar ordered list
Ini adalah contoh daftar ordered list

Jika ingin membuat daftar list dengan angka (seperti contoh diatas) maka menggunakan tag <ol> yaitu tipe ordered list, silahkan buka text editor, lalu ketikan kode html dibawah ini.

Tuliskan pada tampilan HTML

<ol>
  <li>Ini adalah contoh daftar ordered list</li>
  <li>Ini adalah contoh daftar ordered list</li>
  <li>Ini adalah contoh daftar ordered list</li>
  <li>Ini adalah contoh daftar ordered list</li>
  <li>Ini adalah contoh daftar ordered list</li>
</ol>

Pada ordered list selain angka anda juga bisa menampilkan tipe pengurutan lainnya, seperti huruf besar dan lain-lain, caranya hanya dengan menambahkan atribut “type” tanpa tanda kutip, contohnya seperti dibawah ini

Ordered list berdasarkan huruf besar

Ordered list berdasarkan huruf besar
Ordered list berdasarkan huruf besar
Ordered list berdasarkan huruf besar
Ordered list berdasarkan huruf besar
Ordered list berdasarkan huruf besar

Tuliskan pada tampilan HTML

<ol type="A">
  <li>Ordered list berdasarkan huruf besar</li>
  <li>Ordered list berdasarkan huruf besar</li>
  <li>Ordered list berdasarkan huruf besar</li>
  <li>Ordered list berdasarkan huruf besar</li>
  <li>Ordered list berdasarkan huruf besar</li>
</ol>

Berikut ini adalah tabel tipe-tipe pengurutan yang bisa di gunakan untuk ordered list.

Tabel tipe Ordered list
Tipe	Keterangan
type=”1″	Pengurutan menggunakan angka (default)
type=”A”	Pengurutan berdasarkan huruf besar
type=”a”	Pengurutan berdasarkan huruf kecil
type=”I”	Pengurutan menggunakan angka romawi huruf besar
type=”i”	Pengurutan menggunakan angka romawi huruf kecil

17. Unordered List

Unordered list dengan menggunakan simbol ditulis dengan kode <ul>

Lihat contoh dibawah ini:

Is a list without number.

Ini adalah contoh daftar unordered list
Ini adalah contoh daftar unordered list
Ini adalah contoh daftar unordered list
Ini adalah contoh daftar unordered list
Ini adalah contoh daftar unordered list

Jika ingin membuat Unordered list dengan menggunakan simbol (seperti contoh diatas) maka menggunakan tag <ul> yaitu tipe Unordered list, silahkan buka text editor, lalu ketikan kode html dibawah ini.

Tuliskan pada tampilan HTML

<ul>
  <li>Ini adalah contoh daftar unordered list</li>
  <li>Ini adalah contoh daftar unordered list</li>
  <li>Ini adalah contoh daftar unordered list</li>
  <li>Ini adalah contoh daftar unordered list</li>
  <li>Ini adalah contoh daftar unordered list</li>
</ul>

Contoh undered list dengan menggunakan simbol kotak atau square

Contoh unordered list menggunakan simbol kotak
Contoh unordered list menggunakan simbol kotak
Contoh unordered list menggunakan simbol kotak
Contoh unordered list menggunakan simbol kotak
Contoh unordered list menggunakan simbol kotak

Tuliskan pada tampilan HTML

<ul style="list-style-type:square">
  <li>Contoh unordered list menggunakan simbol kotak</li>
  <li>Contoh unordered list menggunakan simbol kotak</li>
  <li>Contoh unordered list menggunakan simbol kotak</li>
  <li>Contoh unordered list menggunakan simbol kotak</li>
  <li>Contoh unordered list menggunakan simbol kotak</li>
</ul>

Berikut ini adalah tabel tipe-tipe simbol yang bisa di gunakan untuk unordered list.

Tabel tipe Unordered list
Tipe	Keterangan
list-style-type:disc	Pengurutan menggunakan simbol bullets (default)
list-style-type:circle	Pengurutan menggunakan simbol lingkaran
list-style-type:square	Pengurutan menggunakan simbol kotak
list-style-type:none	Menghilangkan simbol pengurutan

18. Nested

Contoh Nested
- Item daftar bersarang
- Item daftar bersarang
- Item daftar bersarang
Contoh Nested
- Item daftar bersarang
- Item daftar bersarang
- Item daftar bersarang
Contoh Nested
- Item daftar bersarang
- Item daftar bersarang
- Item daftar bersarang

Tuliskan pada tampilan HTML

<ul>
  <li>Contoh Nested
    <ul>
      <li>Item daftar bersarang</li>
      <li>Item daftar bersarang</li>
      <li>Item daftar bersarang</li>
    </ul>
  </li>
  <li>Contoh Nested
    <ul>
      <li>Item daftar bersarang</li>
      <li>Item daftar bersarang</li>
      <li>Item daftar bersarang</li>
    </ul>
  </li>
  <li>Contoh Nested
    <ul>
      <li>Item daftar bersarang</li>
      <li>Item daftar bersarang</li>
      <li>Item daftar bersarang</li>
    </ul>
  </li>
 </ul

19. Buttons

Demo Download Play Video Google Play App Store

Tuliskan pada tampilan HTML

<a class="btn btn_demo" href="#" title="Demo">Demo</a>
<a class="btn btn_download" href="#" title="Download">Download</a>  
<a class="btn btn_play" href="#" title="Play Video">Play Video</a>
<a class="btn btn_google" href="#" title="Google Play">Google Play</a>
<a class="btn btn_apple" href="#" title="Download On The App Store">App Store</a>

20. Box Demo and Download

Kompi Minimalis Redesign

Demo Download

Tuliskan pada tampilan HTML

<div class="unduh">
<h3 class="unduh-judul">Kompi Minimalis Redesign</h3>
<figure class="unduh-gambar">
<img alt="kompi minimalis AMP" src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkQ3RTE0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNTAgNTAiIHdpZHRoPSI3NXB4IiBoZWlnaHQ9Ijc1cHgiPjxwYXRoIGQ9Ik0gOSA0IEMgNi4yMzkgNCA0IDYuMjM5IDQgOSBMIDQgNDEgQyA0IDQzLjc2MSA2LjIzOSA0NiA5IDQ2IEwgNDEgNDYgQyA0My43NjEgNDYgNDYgNDMuNzYxIDQ2IDQxIEwgNDYgOSBDIDQ2IDYuMjM5IDQzLjc2MSA0IDQxIDQgTCA5IDQgeiBNIDIwIDEyIEwgMjUgMTIgQyAyOS40MiAxMiAzMy4wMzMgMTUuNjMyNTQ3IDMzIDIwLjA2MDU0NyBDIDMyLjk5MSAyMS4xNDE1NDcgMzMuOTE5IDIyIDM1IDIyIEwgMzYgMjIgQyAzNy4xMDUgMjIgMzggMjIuODk1IDM4IDI0IEwgMzggMzAgQyAzOCAzNC40IDM0LjQgMzggMzAgMzggTCAyMCAzOCBDIDE1LjYgMzggMTIgMzQuNCAxMiAzMCBMIDEyIDI1IEwgMTIgMjAgQyAxMiAxNS42IDE1LjYgMTIgMjAgMTIgeiBNIDIwIDE4IEMgMTguOSAxOCAxOCAxOC45IDE4IDIwIEMgMTggMjEuMSAxOC45IDIyIDIwIDIyIEwgMjUgMjIgQyAyNi4xIDIyIDI3IDIxLjEgMjcgMjAgQyAyNyAxOC45IDI2LjEgMTggMjUgMTggTCAyMCAxOCB6IE0gMjAgMjggQyAxOC45IDI4IDE4IDI4LjkgMTggMzAgQyAxOCAzMS4xIDE4LjkgMzIgMjAgMzIgTCAzMCAzMiBDIDMxLjEgMzIgMzIgMzEuMSAzMiAzMCBDIDMyIDI4LjkgMzEuMSAyOCAzMCAyOCBMIDIwIDI4IHoiLz48L3N2Zz4=" title="Fiksioner Blogger Theme">
<figcaption>ZIP (129 KB)</figcaption>
</figure>
<div class="unduh-teks">
<a class="btn btn_demo"#" rel="noopener" target="_blank" title="Demo">Demo</a>
<a class="btn btn_download" href="#" rel="noopener" target="_blank" title="Download">Download</a>
</div>
</div>

21. Show Hide Button/Spoiler

Orang yang berakal mengatur kehidupan dunianya dengan akalnya.

Seandainya dia seorang miskin, dia akan bersungguh-sungguh bekerja dan berkarya sehingga bisa mencegah dirinya dari tindakan menghinakan diri dihadapan sesama makhluk.

Dia akan meminimalisir ketergantungan (teradap sesama), dan akan bersikap qana’ah; sehingga dia akan hidup terbebas dari pemberian-pemberian orang dan akan hidup terhormat ditengah mereka.

Kalau dia seorang kaya, maka dia harus mengurus belanjanya, karena dikhawatirkan akan jatuh melarat, sehingga membuatnya perlu berhina diri dihadapan sesama makhluk.

Dan termasuk musibah kala dia menghambur-hamburkan hartanya, dan membanggakannya untuk membuat musuh merasa sakit hati, seolah-olah dengan perbuatannya itu-bila dia banyak melakukannya-dia sengaja mengundang orang untuk menimpakan pandangan jahatnya pada dirinya.

Maka sudah seharusnya untuk megambil jalan tengah dalam berbagai keadaan, dan menyembunyikan apa yang memang seharusnya disembunyikan.

Pernah sebagian tukang cuci menemuka harta, lalu dia banyak berbelanja, hingga (masalahnya) diketahui (orang lain), maka harta itupun diambil darinya, dan kembalilah dia menjadi miskin papa.

Pengaturan itu hanyalah penjagaan kepada harta, besikap pertengahan dalam membelanjakan harta dengan cara adil, dan menyembunyikan hal-hal yang tidak patut ditampakan.

Termasuk satu kesalahan adalah memberitahukan istri tentang jumlah harta yang ada, karena bila hartanya sedikit, suami akan tampak remeh (tidak dihargai) dimata istrinya, dan kalau hartanya banyak, dia akan meminta tambahan pakaian dan perhiasan.

Allah ta’alaa berfirman

وَلَاتُؤْتُوْاالسُّفَهَاءَأَمْوَلَكُمْ ...

“Dan janganlah kalian berikan harta kalian kepada orang-orang bodoh” (an-nisa: 5)

Demikian pula dengan anak.

Pun juga begitu denga rahasia, haruslah dijaga, dan harus berhati-hati terhadap istri dan teman, karena bisa saja keadaan berbalik.

Seorang penyair berkata,

Berhati-hatilah kepada musuhmu satu kali Dan berhati-hatilah kepada temanmu seribu kali Karena bisa saja seorang temen akan berbalik Dan dialah yang paling tahu akan titik yang membahayakan

#Kitab Shaidul Khathir Untaian Renungan Penuh Hikmah Pembangkit Energy Takwa Karya Ibnul Jauzi Penerbit Darul Haq Jakarta

Tuliskan pada tampilan HTML

<div class="spoiler">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        <!-- Isi Spoiler -->
        Tulis konten yang ingin disembunyikan disini.
    </div>
</div>

supar.web.id

Search This Blog

Style Penulisan, Font, dan Atribut Lain

Supar 29.10.22

Daftar isi

1. Membuat Daftar Isi/Table Of Content

2. Gaya Tulisan

Heading < h1 >/Judul post

Heading < h2 >

Subheading < h3 >

Minor heading < h4 >

3. Syntax Highlighter pada postingan blog

4. Post Break

5. Menulis text arab.

6. Membuat Mark/highlight.

7. Membuat `tulisan code.`

8. Blockquote

9. Note Block

10. Menyematkan Related Post Secara Manual

11. Varisai Kotak (BOX)

12. Menambahkan gambar pada isi artikel

13. Embed video Youtube pada postingan.

14. Tabel Responsive AMP HTML

15. Blogger Tag Conditional for Mobile

Menampilkan Widget di Mobile

Menyembunyikan Widget di Mobile

16. Ordered List

17. Unordered List

18. Nested

19. Buttons

20. Box Demo and Download

Kompi Minimalis Redesign

21. Show Hide Button/Spoiler

Search This Blog

Style Penulisan, Font, dan Atribut Lain

Supar 29.10.22

Daftar isi

1. Membuat Daftar Isi/Table Of Content

2. Gaya Tulisan

Heading < h1 >/Judul post

Heading < h2 >

Subheading < h3 >

Minor heading < h4 >

3. Syntax Highlighter pada postingan blog

4. Post Break

5. Menulis text arab.

6. Membuat Mark/highlight.

7. Membuat tulisan code.

8. Blockquote

9. Note Block

10. Menyematkan Related Post Secara Manual

11. Varisai Kotak (BOX)

12. Menambahkan gambar pada isi artikel

13. Embed video Youtube pada postingan.

14. Tabel Responsive AMP HTML

15. Blogger Tag Conditional for Mobile

Menampilkan Widget di Mobile

Menyembunyikan Widget di Mobile

16. Ordered List

17. Unordered List

18. Nested

19. Buttons

20. Box Demo and Download

Kompi Minimalis Redesign

21. Show Hide Button/Spoiler

7. Membuat `tulisan code.`