Typography Boxes Styles

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 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!

Langkah 1 : Simpan kode ini di atas ]]></b:skin>

/* Warning message */
.box-info,.box-tips,.box-warning, .box-list, 
.box-download{ border: 1px solid #eee;clear:both; display: 
block;line-height: 22px; min-height: 38px; padding: 10px 12px 12px 68px;
 margin: 15px 0;}
.box-info{ background: #F8F8F8 
url('https://dl.dropboxusercontent.com/u/58902557/typography/info.png') 
no-repeat 12px 8px; color: #222}
.box-tips{ background: #7CADDE 
url('https://dl.dropboxusercontent.com/u/58902557/typography/tips.png') 
no-repeat 12px 8px; color: #fff;}
.box-warning{ background: #db6161 
url('https://dl.dropboxusercontent.com/u/58902557/typography/warning.png')
 no-repeat 12px 8px; color: #fff;}
.box-list { background: #F7FCF9 
url(https://dl.dropboxusercontent.com/u/58902557/typography/sticky-big.png)
 no-repeat 16px 14px;}
.box-download { background: #F8F8F8 
url(https://dl.dropboxusercontent.com/u/58902557/typography/download-big.png)
 no-repeat 16px 14px;}
.box1 { margin: 15px 0; padding: 10px 15px !important; background-color: #329579; color: #fff}
.box2 { margin: 15px 0; padding: 10px 15px !important; background-color: #ffffdd; color: #006699;}

LIVE DEMO - Typography Boxes Styles

Langkah 2 : Untuk penerapan ke dalam template ikuti petunjuk sesuai dengan gambar di atas.