◄ Min  Size Fonts: + | - | ± Color: Max ►

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:
  1. CSS : lang() Selector
  2. styling using the lang attribute
  3. lang - CSS
Make Code View on Blog Post using lang AttributeBerikut 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

<script LANGUAGE="JavaScript">
function showFilled(Value) {
return (Value > 9) ? "" + Value : "0" + Value;
}
function StartClock24() {
TheTime = new Date;
document.clock.showTime.value = showFilled(TheTime.getHours()) + ":" + showFilled(TheTime.getMinutes()) + ":" + showFilled(TheTime.getSeconds());
setTimeout("StartClock24()", 1000)
}
</script>

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/
Loading...
XMake Code View on Blog Post using lang Attribute
Membuat tampilan kode di area postingan menggunakan varibael CSS lang supaya lebih full stylish
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE