Make Code View on Blog Post using lang Attribute

Terpaksa melakukan hal serupa lagi ;)) Pengembangan dari artikel writing a professional code in blog post area. Menuliskan kode/script pada post area dengan sentuhan seni CSS
Sekarang kita pecah menjadi terpisah, dan tetap menggunakan styling : lang guna memberikan secuil judul di kode area nantinya. Berikut tiga web referensi mengenai CSS : lang selektor:

Berikut ramuan CSS code view on post area menggunakan lang attribute

.s_code {
  position: relative;
  margin: 15px 0;
  padding: 5px 10px 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}
.s_code:after {
  content:attr(lang);
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 5px;
  font-size: 13px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #999;
  opacity: .5;
  border-radius: 0 4px 0 4px;
}
.s_code p {
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
}

Markup HTML

<div class="s_code" lang="BLAH-BLEH-BLOH-HERE"><p>



-------- add your phrase coded here --------



</p></div>

Lihat hasil kerja! DEMO

body:before {
content: "";
position: fixed;
top: -7px;
left: 0;
width: 100%;
height: 7px;
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}

<!DOCTYPE html>
<html>
<body>

<h1>Heading</h1>
<p>Paragraph</p>

</body>
</html>

Silahkan sobat tambahkan variabel CSS lainnya sesuai dengan kebutuhan ;)
Bye bye :-h
Happy coding \m/
Bonus:
http://snipplr.com/view/69073/message-box/