Admin MATIQ 3.9.21

Bismillah - semua style atau format teks postingan untuk template yang dipakai blog pptqinsanqurani.com

1. 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 Anasupar.Com memakai font-size:17px

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

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

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

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

4. Menulis text arab.

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

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

5. Membuat Mark/highlight.

Tuliskan pada tampilan HTML

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

6. Membuat `tulisan code.`

Tuliskan pada tampilan HTML

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

7. Blockquote

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

Tuliskan pada tampilan HTML

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

8. Note Block

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

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

Tuliskan pada tampilan HTML

<div class="catetan">
<!--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"><span>Warning!</span><br/>
<!--tuliskan catatan peringatan disini-->
</div>

9. Menyematkan Related Post Secara Manual

Tuliskan pada tampilan HTML

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

Tuliskan pada tampilan HTML

<div class="related"><span>Baca Juga:</span>
<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>

10. Menambahkan gambar pada isi artikel.

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

Catatan.

Ukuran width dan height megikuti ukuran Original gambar

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

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

13. Blogger Tag Conditional for Mobile, Menampilkan atau Menyembunyikan 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 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;'>

14. Thumbnail postingan

Untuk thumbnail postingan, buat gambar dg ukuran 1280 x 720 dan simpan paling atas dan pakai <noscript> seperti ini

<noscript><img alt='TULIS JUDUL IMAGE' height='720' width='1280' src='ISI URL IMAGE'  title='TULIS JUDUL IMAGE'/></noscript>

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

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

Search This Blog

All Style Text and Writing Formats

Admin MATIQ 3.9.21

1. Gaya Tulisan

Heading < h1 >/Judul post

Heading < h2 >

Subheading < h3 >

Minor heading < h4 >

2. Syntax Highlighter pada postingan blog

3. Post Break

4. Menulis text arab.

5. Membuat Mark/highlight.

6. Membuat `tulisan code.`

7. Blockquote

8. Note Block

9. Menyematkan Related Post Secara Manual

10. Menambahkan gambar pada isi artikel.

11. Embed video Youtube pada postingan.

12. Tabel Responsive AMP HTML

13. Blogger Tag Conditional for Mobile, Menampilkan atau Menyembunyikan Widget di Mobile

14. Thumbnail postingan

15. Varisai Kotak (BOX)

16. Ordered List

17. Unordered List

18. Nested

Popular Posts

Labels

Search This Blog

All Style Text and Writing Formats

Admin MATIQ 3.9.21

1. Gaya Tulisan

Heading < h1 >/Judul post

Heading < h2 >

Subheading < h3 >

Minor heading < h4 >

2. Syntax Highlighter pada postingan blog

3. Post Break

4. Menulis text arab.

5. Membuat Mark/highlight.

6. Membuat tulisan code.

7. Blockquote

8. Note Block

9. Menyematkan Related Post Secara Manual

10. Menambahkan gambar pada isi artikel.

11. Embed video Youtube pada postingan.

12. Tabel Responsive AMP HTML

13. Blogger Tag Conditional for Mobile, Menampilkan atau Menyembunyikan Widget di Mobile

14. Thumbnail postingan

15. Varisai Kotak (BOX)

16. Ordered List

17. Unordered List

18. Nested

Popular Posts

Labels

6. Membuat `tulisan code.`