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. 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 dll disini-->
</pre></code>
e. Setelah selesai menulis kemudian publish

2. Post Break (Separator)

Fitur ini digunakan untuk memisahkan paragraf atau untuk membuka pembahasan baru dalam postingan. 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.

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

3. Menulis text arab.

<div class="text-arab">
<!--ketik text arab disini-->
</div>
لَا إِلَهَ إِلاَّ اللَّهُ وَحْدَهُ لاَ شَـرِيْكَ لَهُ. لَهُ الْمُلْكُ وَلَهُ الْحَمْدُ وَهُوَ عَلَى كُلِّ شَيْءٍ قَدِيْرٌ. سُبْحَانَ اللَّهِ وَالْحَمْدُ لِلَّهِ وَلاَ إِلَهَ إِلاَّ اللَّهُ وَ اللَّهُ أَكْبَرُ، وَلاَ حَوْلَ وَلاَ قُوَّةَ إِلاَّ بِاللَّهِ الْعَلِيِّ الْعَظِيْمِ رَبِّ اغْفِرْ ليِ

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

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

6. Membuat Mark/highlight.

Tuliskan pada tampilan HTML
<mark>
<!--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>sebaik-baik kalian adalah orang yang belajar al qur'an dan mengajarkannya</blockquote>

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

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

11. 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>
Agar mudah mengakses anasupar.com di smartphone, klik ikon 3 titikdi browser Chrome kemudian pilih "Tambahkan ke layar utama".
Buka Komentar