Demo Typography

Typography (gaya penulisan) dalam sebuah artikel akan membuat nyaman pengunjung blog dalam membaca artikel yang disajikan penulis, karena blog akan terlihat rapi dan lebih profesional. Cara pembuatan ini hanya menggunakan CSS yang kemudian diterapkan pada posting artikel.

Boxes and Legends Style

<p class="box-info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.</p>

<p class="box-tips"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.</p>

<p class="box-warning"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.</p>

This is a sticky. Use <p class="box-list">Your clip note goes here!</p> to create a clip note!

This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!

This is a grey box. Use <p class="box1">Your content goes here!</p> to create a grey box!

This is a hilite box. Use <p class="box2">Your content goes here!</p> to create a hilite box!

Legend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet. Pellentesque pharetra tincidunt sapien. Cara penulisan menggunakan kode <p class="legend1"> <h4> Title </h4> and here text.</p>

Legend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet. Pellentesque pharetra tincidunt sapien. Menggunakan kode penulisan <p class="legend2"> <h4> Title </h4> and here text.</p>

Legend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet. Pellentesque pharetra tincidunt sapien. Menggunakan kode penulisan <p class="legend3"> <h4> Title </h4> and here text.</p>

Legend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet. Pellentesque pharetra tincidunt sapien. Menggunakan kode <p class="legend4"> <h4> Title </h4> and here text.</p> </p>

Legend style

Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer. Menggunakan kode <p class="legend5"> <h4> Title </h4> and here text.</p>

Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

Headline

This is a headline.

This is a subheadline.

This is a small headline

This is a large headline

Headline adalah berita utama yang ditempatkan pada sebuah artikel blog, biasanya dipergunakan untuk peristiwa yang dianggap penting oleh pemilik blog untuk perhatian pembaca blog.

• Cara penulisan <p class="Headline">This is a headline</p> <p class="SubHeadline">
• Cara penulisan small headline <p class="SmallHeadline">This is a Small Headline</p>
• Cara penulisan Large Headline <p class="LargeHeadline">This is a LargeHeadline</p>

Icon set

This is a sample file1 message.
Use <p class="gkfile1">Your message goes here!</p>.

This is a sample kfile2 message.
Use <p class="gkfile2">Your goes here!</p>.

This is a sample search message.
Use <p class="gksearch">Your message goes here!</p>.

This is a sample zoom- message.
Use <p class="gkzoomminus">Your message goes here!</p>.

This is a sample zoom+ message.
Use <p class="gkzoomplus">Your goes here!</p>.

This is a sample error message.
Use <p class="gkerror">Your message goes here!</p>.

This is a sample tick message.
Use <p class="gktick">Your message goes here!</p>.

This is a sample book message.
Use <p class="gkbook">Your goes here!</p>.

This is a sample map message.
Use <p class="gkmap">Your message goes here!</p>.

This is a sample tag message.
Use <p class="gktag">Your message goes here!</p>.

This is a sample stats message.
Use <p class="gkstats">Your goes here!</p>.

This is a sample star message.
Use <p class="gkstar">Your message goes here!</p>.

This is a sample ribbon message.
Use <p class="gkribbon">Your message goes here!</p>.

This is a sample nav message.
Use <p class="gknav">Your goes here!</p>.

This is a sample graph message.
Use <p class="gkgraph">Your message goes here!</p>.

This is a sample flash message.
Use <p class="gkflash">Your message goes here!</p>.

This is a sample location message.
Use <p class="gklocation">Your goes here!</p>.

This is a sample locationminus message.
Use <p class="gklocationminus">Your message goes here!</p>.

This is a locationplus cd message.
Use <p class="gklocationplus">Your message goes here!</p>.

This is a sample bulb message.
Use <p class="gkbulb">Your message goes here!</p>.

Tooltips

Ini beberapa contoh ToolTips menggunakan CSS :

• Classic TooltipsThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! menggunakan kode : <a class="gkTooltip" href="/">Classic<span class="classicTooltip">Isi Keterangan Tooltips</span></a>
• Critical TooltipsCriticalThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! use code : <a class="gkTooltip" href="http://blogger.com">Critical<span class="customTooltip criticalTooltip"><i>Critical</i>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>
• Help TooltipsHelpThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! use code : <a class="gkTooltip" href="http://blogger.com"><b>Help Tooltips</b><span class="customTooltip helpTooltip"><i>Help</i>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>
• Information TooltipsInformationThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! use code : <a class="gkTooltip" href="http://blogger.com"><b>Information Tooltips</b><span class="customTooltip infoTooltip"><i>Information</i>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>
• Warning TooltipsWarningThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! use code : <a class="gkTooltip" href="http://www.blogger.com/"><b>Warning Tooltips</b><span class="customTooltip warningTooltip"><i>Warning</i>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>

Highlights

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="gkHighlight1">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="gkHighlight2">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="gkHighlight3">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="gkHighlight4">Your highlight phrase goes here!</span>.

Unordered lists

<ul class="gkBullet1">

• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.

<ul class="gkBullet2">

• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.

<ul class="gkBullet3">

• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.

<ul class="gkBullet4">

• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.

<ul class="gkCircle1">

• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.

<ul class="gkCircle2">

• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.

<ul class="gkSquare1">

• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.

<ul class="gkSquare2">

• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet.

Ordered lists

<ol class="Roman">

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.
4. Lorem ipsum dolor sit amet.

<ol class="Dec">

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.
4. Lorem ipsum dolor sit amet.

<ol class="Alpha">

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.
4. Lorem ipsum dolor sit amet.

<ol class="DecimalLeadingZero">

1. Lorem ipsum
2. Lorem ipsum
3. Lorem ipsum
4. Lorem ipsum

numBlocks

<div class="numblocks num-1"><div>01</div>and here text of element</div>

01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.

01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.

<div class="numblocks num-2"><div>02</div>and here text of element</div>

02

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.

02

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.

<div class="numblocks num-3"><div>03</div>and here text of element</div>

03

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.

03

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.

Blocks

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-1">content here... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-4">content here... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-7">content here... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-2">content here... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-5">content here... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-8">content here... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-3">content here... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-6">content here... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-9">content here... </div>

Bubbles

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="bubble-1">content here... <cite>Author name</cite></div>
Robert Gavick

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="bubble-3">content here... <cite>Author name</cite></div>
Robert Gavick

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="bubble-5">content here... <cite>Author name</cite></div>
Robert Gavick

<div class="bubble bubble-l1 clearfix"> <div class="box-ct"> <div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div> Buble's content goes here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

<div class="bubble bubble-l2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

<div class="bubble bubble-d1 clearfix"> <div class="box-ct"> <div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div> Buble's content goes here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

<div class="bubble bubble-d2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

<div class="bubble bubble-hl1 clearfix"> <div class="box-ct"> <div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div> Buble's content goes here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

<div class="bubble bubble-hl2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>

Put author name here

Abbrs and acronyms

Ini sebagai contoh abbreviation Dr atau NATO. Menggunakan kode penulisan <abbr title="Here goes full word or phrase">here goes an abbreviation</abbr>

Dropcaps

Drop Cap adalah huruf awal suatu paragraph yang diperbesar. Maksudnya huruf pada awal suatu paragraph besarnya beberapa baris lebih besar daripada huruf-huruf lainnya. Besarnya huruf pada awal paragraph ini bisa diatur beberapa baris dari tulisan dan jarak antara drop cap dan tulisan yang lain. Cara penulisannya <span class="dropcap">D</span> rop Cap adalah huruf awal suatu ...

Tulisan awal jadi besar ini dinamakan Drop Cap cara penulisannya tinggal tambahkan <span class="dropcap">T</span> ulisan awal jadi ...

Huruf pada awal suatu paragraph besarnya beberapa baris lebih besar daripada huruf-huruf lainnya. Besarnya huruf pada awal paragraph ini bisa diatur beberapa baris dari tulisan dan jarak antara drop cap dan tulisan yang lain. Cara penulisannya <span class="dropcap2">h</span>uruf pada awal ....

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="gkBlockquote1"><div> Your quoted text goes here!< /div>< /div>< /blockquote >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="gkBlockquote2"><div> Your quoted text goes here!< /div>< /div>< /blockquote >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="gkBlockquote3"><div> Your quoted text goes here!< /div>< /div>< /blockquote >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="gkBlockquote4"><div> Your quoted text goes here!< /div>< /div>< /blockquote >

Floated blocks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Ini bagian tulisan yang diblock untuk penempatan sebelah kiri menggunakan kode <span class="blockleft">Teks yang di Block</span>, jadi akan lebih menarik.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Ini bagian tulisan yang diblock untuk penempatan sebelah kiri menggunakan kode <span class="blockright">Teks yang di Block</span>, penempatan teks yang diblok sebelah kanan.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Ini merupakan tulisan yang menggunakan <span class="bloccenter">Teks yang di Block</span> sehingga penempatan teks yang diblok pada tengah.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus. Nunc a malesuada felis. Cras ultrices sapien eu nisi elementum non blandit urna sodales.

Additional typography elements

Membuat icon like the following icons dengan menggunakan cara sederhana sederhana :
Facebook Twitter Google RSS

• <a href="#" class="iconRSS">RSS</a>
• <a href="#" class="iconFacebook">Facebook</a>
• <a href="#" class="iconTwitter">Twitter</a>
• <a href="#" class="iconGoogle">Google</a>

This is a sample Blockquote. Use <blockquote>Your quote goes here!</blockquote> to form a quote!

This is a sample Blockquote. Use <blockquote>Your quote goes her<span class="close">e!</span></blockquote> to form a quote!

Lists Style

1. This is a sample Ordered List.
2. Lorem ipsum dolor sit amet consectetuer.
3. Condimentum quis.
4. Congue Quisque augue elit dolor nibh.

• This is a sample Unordered List.
• Condimentum quis.
• Lorem ipsum dolor sit amet consectetuer.
• Congue Quisque augue elit dolor nibh.

• This is a sample Arrow list.
• Use <ul class="arrow"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Checklist.

• This is a sample Star List.
• Use <ul class="star"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Star List.

• This is a sample Checklist.
• Use <ul class="checklist"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Checklist.

• This is a sample Phone List.
• Use <ul class="phone"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Phone List.

• This is a sample Address List.
• Use <ul class="address"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Address List.

• This is a sample Email List.
• Use <ul class="email"><li><span class="icon"> </span>List's content goes here!</li></ul>
• This is a sample Email List.

01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">01.</span>Your content goes here!</p> to form a block number!

02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">02.</span>Your content goes here!</p> to form a block number!

03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">03.</span>Your content goes here!</p> to form a block number!

01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">01.</span>Your content goes here!</p> to form a block number!

02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">02.</span>Your content goes here!</p> to form a block number!

03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">03.</span>Your content goes here!</p> to form a block number!

01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">01.</span>Your content goes here!</p> to form a block number!

02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">02.</span>Your content goes here!</p> to form a block number!

03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">03.</span>Your content goes here!</p> to form a block number!

Paragraph Style

Use <p class="error"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="message"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="tips"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="key"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="tag"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="cart"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="doc"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="note"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="photo"><span class="icon"> </span>Your message goes here!</p> to make this

Use <p class="mobi"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="link">Your message goes here!</p> to make this.