Smallest text
Small text
Normal text
Large text
Largest text
Heading <h2>
Subheading <h3>
Minorheading <h4>
Bold text
Italic text
Underline text
Normal link
Button link
Download button Demo button File button Video button Ebook button Chat button
<div class='info'>text</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum vehicula sem, et pellentesque augue fermentum eget. Vestibulum commodo purus id purus suscipit, id porttitor nisi faucibus. Proin vitae leo sagittis, aliquet augue et, semper nibh. Praesent feugiat tortor egestas augue tincidunt eleifend venenatis pellentesque tortor.
<div class='tips'>text</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum vehicula sem, et pellentesque augue fermentum eget. Vestibulum commodo purus id purus suscipit, id porttitor nisi faucibus. Proin vitae leo sagittis, aliquet augue et, semper nibh. Praesent feugiat tortor egestas augue tincidunt eleifend venenatis pellentesque tortor.
<div class='warning'>text</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum vehicula sem, et pellentesque augue fermentum eget. Vestibulum commodo purus id purus suscipit, id porttitor nisi faucibus. Proin vitae leo sagittis, aliquet augue et, semper nibh. Praesent feugiat tortor egestas augue tincidunt eleifend venenatis pellentesque tortor.
<div class='note'>text</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum vehicula sem, et pellentesque augue fermentum eget. Vestibulum commodo purus id purus suscipit, id porttitor nisi faucibus. Proin vitae leo sagittis, aliquet augue et, semper nibh. Praesent feugiat tortor egestas augue tincidunt eleifend venenatis pellentesque tortor.
<div class='help'>text</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum vehicula sem, et pellentesque augue fermentum eget. Vestibulum commodo purus id purus suscipit, id porttitor nisi faucibus. Proin vitae leo sagittis, aliquet augue et, semper nibh. Praesent feugiat tortor egestas augue tincidunt eleifend venenatis pellentesque tortor.
Untuk menggunakannya gunakan tag dibawah ini:
<a class='button' href='#'><i class='icon icon-cloud-download'></i><span>Download button</span></a>
// Ubah name class pada tag <i> untuk mengganti icon
<i class='icon icon-cloud-download'></i>
<i class='icon icon-bookmarks'></i>
<i class='icon icon-paper-plane'></i>
<i class='icon icon-play-circle'></i>
<i class='icon icon-informaticon-circle'></i>
<i class='icon icon-help-outline'></i>
// Untuk menggunakan Syntax Highlighter seperti ini tulis tag berikut pada saat posting (dalam mode HTML)
<pre>
<code>
<!-- kode html, css ata javascript disini -->
</code>
</pre>
Blockquote akan ditampilkan dengan rata tengah seperti ini, unik karena otomatis akan ditulis dengan font berbeda.
List dengan nomor
- satu
- dua
- tiga
- empat
List tanpa nomor
- satu
- dua
- tiga
- empat
Creative juga !!
ReplyDeleteTypography itu apa fungsinya ????
ReplyDeleteYang dimaksud Typography disini adalah desain, design, style, atau gaya Tulisan yang digunakan dalam pemuatan/penulisan artikel di Style Blogger Template.
ReplyDeleteBerbeda dengan pengertian di Wikipedia (bahasa Indonesai) yang mempunyai arti suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.
Wah keren mas:)
ReplyDeleteSangat inspiratif
Keep hardworking Mas and success
@lazyfooly : Terimakasih telah berkunjung di blog Style Blogger Template,.
ReplyDelete