Skip to main content

Style Penulisan, Font, dan Atribut Lain

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

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 = MC2

H2O

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

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

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

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

14. 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;'>

15. Thumbnail postingan

Untuk thumbnail postingan, buat gambar dg ukuran 1280x720 dan simpan paling atas dan pakai <noscript> seperti ini
<noscript><img alt='All Style Text and Writing Formats' height='720' width='1280' src='https://1.bp.blogspot.com/-_FJmXWTHQBs/YTE-vXAI2nI/AAAAAAAAAC0/ObRnVMNcjkMAg3FgpVykVkHYtUK7P35SQCLcBGAsYHQ/s16000/All%2BStyle.jpg'  title='All Style Text and Writing Formats'/></noscript>

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.
  1. Ini adalah contoh daftar ordered list
  2. Ini adalah contoh daftar ordered list
  3. Ini adalah contoh daftar ordered list
  4. Ini adalah contoh daftar ordered list
  5. 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
  1. Ordered list berdasarkan huruf besar
  2. Ordered list berdasarkan huruf besar
  3. Ordered list berdasarkan huruf besar
  4. Ordered list berdasarkan huruf besar
  5. 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

" Servant of Allah "
Agar mudah mengakses anasupar.com di smartphone, klik ikon 3 titikdi browser Chrome kemudian pilih "Tambahkan ke layar utama"
Buka Komentar