Skip to main content

All Typography's & Writing Formats

Bismillah, Semua format penulisan dan tamplilan fitur yang tersedia pada template SUPAR.WEB.ID

1. Daftar Isi/Table Of Content


2. Gaya Tulisan

Bold
Italic
Underscore
Striketrough

Heading < h1 >/Judul post

Heading < h2 >

Subheading < h3 >

Minor heading < 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


E = MC2

H2O


3. Syntax Highlighter pada postingan blog

/* 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;}}

/* 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;}}

4. Post Break

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

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

6. Mark/highlight

ini adalah contoh dari tulisan Mark/highlight.

7. Tulisan Code

ini salah satu contoh tulisan code

8. Blockquote

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

9. Note Block

Catatan: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam.
Warning! Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

10. Related Post Secara Manual


11. Varisai Kotak (BOX)

Box default,mulai menulis ...
Box green,mulai menulis ...
Box blue,mulai menulis ...
Box red,mulai menulis ...
Box yellow,mulai menulis ...

12. Gambar pada isi artikel

Maecenas quis hendrerit odio, nec facilisis velit. Aliquam tincidunt placerat est sed porta. Phasellus mollis lacus quis erat egestas molestie. Mauris vel arcu varius, tristique mi at, gravida diam. Phasellus at turpis est. In hac habitasse platea dictumst. Quisque molestie eros eget placerat egestas. Sed facilisis justo at pulvinar blandit. Proin laoreet consectetur vulputate. Etiam egestas, mauris id tristique vestibulum, magna velit tristique turpis, nec hendrerit libero lacus ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada ante quis libero mollis, eu auctor est consectetur. Nullam luctus odio quis augue vulputate, vel tincidunt ipsum scelerisque. Nunc porta ac risus quis sodales. Sed faucibus interdum augue a consequat. Integer vulputate sodales neque, eget cursus justo feugiat eget.


Maecenas quis hendrerit odio, nec facilisis velit. Aliquam tincidunt placerat est sed porta. Phasellus mollis lacus quis erat egestas molestie. Mauris vel arcu varius, tristique mi at, gravida diam. Phasellus at turpis est. In hac habitasse platea dictumst. Quisque molestie eros eget placerat egestas. Sed facilisis justo at pulvinar blandit. Proin laoreet consectetur vulputate. Etiam egestas, mauris id tristique vestibulum, magna velit tristique turpis, nec hendrerit libero lacus ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada ante quis libero mollis, eu auctor est consectetur. Nullam luctus odio quis augue vulputate, vel tincidunt ipsum scelerisque. Nunc porta ac risus quis sodales. Sed faucibus interdum augue a consequat. Integer vulputate sodales neque, eget cursus justo feugiat eget.


Maecenas quis hendrerit odio, nec facilisis velit. Aliquam tincidunt placerat est sed porta. Phasellus mollis lacus quis erat egestas molestie. Mauris vel arcu varius, tristique mi at, gravida diam. Phasellus at turpis est. In hac habitasse platea dictumst. Quisque molestie eros eget placerat egestas. Sed facilisis justo at pulvinar blandit. Proin laoreet consectetur vulputate. Etiam egestas, mauris id tristique vestibulum, magna velit tristique turpis, nec hendrerit libero lacus ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada ante quis libero mollis, eu auctor est consectetur. Nullam luctus odio quis augue vulputate, vel tincidunt ipsum scelerisque. Nunc porta ac risus quis sodales. Sed faucibus interdum augue a consequat. Integer vulputate sodales neque, eget cursus justo feugiat eget.


Maecenas quis hendrerit odio, nec facilisis velit. Aliquam tincidunt placerat est sed porta. Phasellus mollis lacus quis erat egestas molestie. Mauris vel arcu varius, tristique mi at, gravida diam. Phasellus at turpis est. In hac habitasse platea dictumst. Quisque molestie eros eget placerat egestas. Sed facilisis justo at pulvinar blandit. Proin laoreet consectetur vulputate. Etiam egestas, mauris id tristique vestibulum, magna velit tristique turpis, nec hendrerit libero lacus ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada ante quis libero mollis, eu auctor est consectetur. Nullam luctus odio quis augue vulputate, vel tincidunt ipsum scelerisque. Nunc porta ac risus quis sodales. Sed faucibus interdum augue a consequat. Integer vulputate sodales neque, eget cursus justo feugiat eget.


Catatan.

Ukuran width dan height megikuti ukuran Original gambar pada template blog yang dipakai

blog SUPAR.WEB.ID ukuran #main-wrapper:490px jadi, width image yang saya pakai:490px


13. Play amp-youtube on click Button


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

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

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

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

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

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

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
  • Contoh unordered list menggunakan simbol kotak

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

19. Buttons

Demo Download Play Video Google Play App Store

20. Box Demo and Download

Kompi Minimalis Redesign

kompi minimalis AMP
ZIP (128 KB)


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

Do'a
إِنِّيْ صَائِمٌ، إِنِّيْ صَائِمٌ.
”Sesungguhnya aku sedang berpuasa. Sesungguhnya aku sedang berpuasa”. [1]


______________
# Kumpulan Doa Mustajab dan Dzikir Pilihan Berdasarkan Al Qur’an dan As-Sunnah. Pengarang: Said bin Ali bin Wahf Al-Qahthani. Penterjemah: Izudin Karimi, Lc. Darul Haq: Jakarta

1. HR. Bukhari dengan Fathul Bari: 4/103, Muslim: 2/806.

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

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

author-photo
" Servant of Allah "
Buka Komentar