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 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 Box Info, Tips, Warning
10 Related Post Manual
11 Varisai Kotak (BOX)
12 Gambar pada isi artikel
13 Play amp-youtube on click Button
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
22 Tombol Keyboard Pada Postingan Blog
23 Spoiler_Accordion / Toggle Menu

1. Membuat Daftar Isi/Table Of Content

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

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

Heading < h1 >Judul post

Heading < h2 >

Subheading < h3 >

Minor heading < h4 >

<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

<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

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.

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

7. Membuat `tulisan code.`

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

8. Blockquote

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

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

sebaik-baik kalian adalah orang yang belajar al qur'an dan mengajarkannya - H.R. Bukhari -

<blockquote>
<!--tulis blockquote anda disini-->
  <cite><!--H.R. Bukhari--></cite>
</blockquote>

9. Box Info, Tips, Warning

Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.

<div class="box info"><!--tulis text disini--></div>  
  
<div class="box tips"><!--tulis text disini--></div>
  
<div class="box warning"><!--tulis text disini--></di>

10. Menyematkan Related Post Secara Manual

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

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

<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

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

<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

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

<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

<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

<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

<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

<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

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

22. Tombol Keyboard Pada Postingan Blog

Misalkan pada postingan akan menggambarkan sebuah keyboard dengan perintah “CTRL + F” dalam sebuah wacana :

Silahkan Tekan Tombol CTRL+F untuk menemukan item dengan cepat

23. Spoiler_Accordion / Toggle Menu

Contoh single spoiler accordion

Siapa Rab-mu?

Allah Ta'alaa

Tampilan kode HTML di dalam Spolier

Syntax Highlighter

/* Syntax Highlighter */
.post-body pre{background-color:#e5f2f9;border-left: 5px solid #a5d0eb;margin:10px auto; white-space:pre-wrap; word-wrap:break-word; overflow:auto; position:relative; width:100%;tab-size:2;word-break:normal;user-select:text;hyphens:none;border-radius:3px;}
.post-body pre code{color:#fff;font-size:13px;background:none;max-height:250px; line-height:1.5em; display:block; padding:10px 12px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text;}
@media screen and (max-width:640px){.post-body pre{max-width:calc(100% + 15px);margin:10px 0;}}

Menggunakan lebih dari 1 tombol spoiler, ikuti seperti berikut ini.

Siapa Rab-mu?

Allah Ta'alaa

Siapa Nabi-mu?

Muhammad Shallallahu ‘Alaihi Wassalam

Apa Kitab-mu?

Al Qur'an

Supar

" Servant of Allah "

Contact

About

Search This Blog

SUPAR.WEB.ID Theme Documentation

Supar 4.11.23

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. Box Info, Tips, Warning

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

22. Tombol Keyboard Pada Postingan Blog

23. Spoiler_Accordion / Toggle Menu

Siapa Rab-mu?

Syntax Highlighter

Siapa Rab-mu?

Siapa Nabi-mu?

Apa Kitab-mu?

Search This Blog

SUPAR.WEB.ID Theme Documentation

Supar 4.11.23

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. Box Info, Tips, Warning

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

22. Tombol Keyboard Pada Postingan Blog

23. Spoiler_Accordion / Toggle Menu

Siapa Rab-mu?

Syntax Highlighter

Siapa Rab-mu?

Siapa Nabi-mu?

Apa Kitab-mu?

7. Membuat `tulisan code.`