All Typography's & Writing Formats
27.10.22
1. Daftar Isi/Table Of Content
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 Note Block
- 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
- 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
- 23 Box Info, Tips, Warning
2. Gaya Tulisan
BoldHeading < h1 >/Judul post
Heading < h2 >
Subheading < h3 >
Minor heading < h4 >
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
10. Related Post Secara Manual
11. Varisai Kotak (BOX)
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.
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
cond='data:blog.isMobileRequest == "true"'<b:widget cond='data:blog.isMobileRequest == "true"' 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
<b:if cond='data:blog.isMobileRequest == "false"'>16. 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
- Ini adalah contoh daftar ordered list
- 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
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
- 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
- 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 Store20. Box Demo and Download
21. Show Hide Button/Spoiler
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
______________
# 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 accordionSiapa Rab-mu?
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?
Siapa Nabi-mu?
Apa Kitab-mu?
23. Box Info, Tips, Warning
