Make Box For Display Post Code Browser Theme

Jika sebelumnya AA Koben sudah berbagi tut's tentang make varian message box's only use css yang full 100% memakai bahasa CSS, lantas bagaimana jadinya jika sekarang kita kembangkan sedikit dengan melibatkan atribut gambar! Image yang akan kita gunakan adalah tampilan bagian atas browser. Pasti bertanya-tanya bagian apanya tuh :-/Itulah yg saya maksudkan. Persiapan membuat box for display code dengan gaya browser theme

1. Buatlah gambar theme browser karya sendiri.
2. Tentukan panjang dan tinggi gambar theme tsb.
3. Ikuti langkah² dari eyang kakung :p

.headImg {
    width: 642px;
    display: block;
    margin: 0 auto;
    padding-top: 44px;
    background: #fff url(GAMBAR THEME BROWSER) no-repeat center top;
}
.dataArea {
    color: #555;
    width: 607px;
    height: 130px;
    margin: 0 auto;
    overflow: auto;
    background: #fff;
    padding: 10px 10px 10px 15px;
    border-left: 5px #f0f0f0 solid;
    border-right: 5px #f0f0f0 solid;
    border-bottom: 2px #f0f0f0 solid;
    font-family: 'Lucida Console',Lucida Sans Unicode,arial;
}

Letakkan url image browser theme karya kalian di daerah yg bertuliskan GAMBAR THEME BROWSER. Isikan width sesuai lebar gambar.
Markup HTML<div class="headImg">
<div class="dataArea">
--------- BLAH BLEH BLOH HERE ---------
</div>
</div>DEMO

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu tet. Cxtir sonis li kak, on mne maks zvestis profesor. Gda polakju blagodarim vo. Troh zxiznuf mai te. Kupit pervju jazikas na sos, kak iz edatet

Kalau sobat kepengen menambahkan varian gambar theme browsernya, tinggal menambahkan ramuan kode CSS dengan kode CSS yg sudah ada diatas. Tinggal dibedakan unik id class!

.headImg2 {
width: 642px;
display: block;
margin: 0 auto;
padding-top: 44px;
background: #fff url(GAMBAR II THEME BROWSER) no-repeat center top;
}

Planning HTML<div class="headImg2">
<div class="dataArea">
--------- BLAH BLEH BLOH HERE ---------
</div>
</div>Good luck :)
Basic idea...www.webdoubts.com
Happy coding \m/