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.
Icon set
This is a sample file1 message.
Use <p class="gkfile1">Your message goes here!</p>.
Use <p class="gkfile1">Your message goes here!</p>.
This is a sample kfile2 message.
Use <p class="gkfile2">Your goes here!</p>.
Use <p class="gkfile2">Your goes here!</p>.
This is a sample search message.
Use <p class="gksearch">Your message goes here!</p>.
Use <p class="gksearch">Your message goes here!</p>.
This is a sample zoom- message.
Use <p class="gkzoomminus">Your message goes here!</p>.
Use <p class="gkzoomminus">Your message goes here!</p>.
This is a sample zoom+ message.
Use <p class="gkzoomplus">Your goes here!</p>.
Use <p class="gkzoomplus">Your goes here!</p>.
This is a sample error message.
Use <p class="gkerror">Your message goes here!</p>.
Use <p class="gkerror">Your message goes here!</p>.
This is a sample tick message.
Use <p class="gktick">Your message goes here!</p>.
Use <p class="gktick">Your message goes here!</p>.
This is a sample book message.
Use <p class="gkbook">Your goes here!</p>.
Use <p class="gkbook">Your goes here!</p>.
This is a sample map message.
Use <p class="gkmap">Your message goes here!</p>.
Use <p class="gkmap">Your message goes here!</p>.
This is a sample tag message.
Use <p class="gktag">Your message goes here!</p>.
Use <p class="gktag">Your message goes here!</p>.
This is a sample stats message.
Use <p class="gkstats">Your goes here!</p>.
Use <p class="gkstats">Your goes here!</p>.
This is a sample star message.
Use <p class="gkstar">Your message goes here!</p>.
Use <p class="gkstar">Your message goes here!</p>.
This is a sample ribbon message.
Use <p class="gkribbon">Your message goes here!</p>.
Use <p class="gkribbon">Your message goes here!</p>.
This is a sample nav message.
Use <p class="gknav">Your goes here!</p>.
Use <p class="gknav">Your goes here!</p>.
This is a sample graph message.
Use <p class="gkgraph">Your message goes here!</p>.
Use <p class="gkgraph">Your message goes here!</p>.
This is a sample flash message.
Use <p class="gkflash">Your message goes here!</p>.
Use <p class="gkflash">Your message goes here!</p>.
This is a sample location message.
Use <p class="gklocation">Your goes here!</p>.
Use <p class="gklocation">Your goes here!</p>.
This is a sample locationminus message.
Use <p class="gklocationminus">Your message goes here!</p>.
Use <p class="gklocationminus">Your message goes here!</p>.
This is a locationplus cd message.
Use <p class="gklocationplus">Your message goes here!</p>.
Use <p class="gklocationplus">Your message goes here!</p>.
This is a sample bulb message.
Use <p class="gkbulb">Your message goes here!</p>.
Use <p class="gkbulb">Your message goes here!</p>.
/*icons*/
.gkfile1,
.gkfile2,
.gksearch,
.gkzoomminus,
.gkzoomplus,
.gkerror,
.gktick,
.gkbook,
.gkmap,
.gktag,
.gkstats,
.gkstar,
.gkribbon,
.gknav,
.gkgraph,
.gkflash,
.gklocation,
.gklocationminus,
.gklocationplus,
.gkbulb {
background-position: 0 8px !important;
background-repeat: no-repeat !important;
min-height: 38px !important;
padding: 0 0 2px 62px !important;
}LIVE DEMO - Typography Icon Set
Langkah 2 : Untuk penerapan ke dalam template ikuti petunjuk sesuai dengan gambar di atas.
0 comments:
Post a Comment