Membuat Tag PRE Keren Dengan Urutan Nomor Pada Blog

Sebuah blog atau web tutorial tidak akan pernah lepas dari hal yang satu ini, pada pencarian Google banyak sekali jenis Tag Pre yang di sajikan secara lengkap dengan cara pemasangannya oleh para sobat blogger Indonesia maupun Mancanegara, Pembuatan Tag Pre itu sendiri mungkin ditujukan agar pembaca atau audiens sebuah blog dapat lebih cepat memahami serta membedakan antar kode yang di sajikan baik itu CSS, HTML, jQuery dan yang lainnya.

Penggunaan Tag Pre juga akan sedikit memperindah tampilan sebuah kode, bentuk dari Tag Pre yang akan saya sajikan berikut ini adalah bukan hasil karya pribadi saya sepenuhnya, sumber kode tersebut di ambil dari http://dte.web.id dalam artikelnya "Tema Vanila untuk Tag PRE" kemudian sedikit gaya saya edit warnanya dan lagi-lagi saya menambah kode penomoran otomatis juga hasil karya Taufik Nurrohman di blog http://dte.web.id.

Dan jika sobat ingin mengetahui lebih jauh apa itu Tag Pre dan apa aja unsur-unsur didalamnya silakan sobat blogger kunjungi blognya Kang Ismet pada artikel tentang "Mengenal Tag Pre "

Cara pemakaiannya ;

<pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre> 

Login ke www.blogger.com
Pilih Rancangan / Template, kemudian Edit HTML
Cari kode ]]></b:skin> Jika sudah ketemu lalu letakan kode berikut diatas kode ]]></b:skin>

pre {
    background-color:#233948;
    font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    color:#333;
    border:1px solid #f1c40f;
    position:relative;
    padding:0 7px;
    margin:10px 0;
    overflow:auto;
    word-wrap:normal;
    white-space:pre;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    position:relative;
}
 
pre[data-codetype] {
    padding:23px 1em 7px 1em;
}
 
pre[data-codetype]:before {
    content:attr(data-codetype);
    display:block;
    position:absolute;
    top:0;
    right:0;
    left:0;
    background-color:#95a5a6;
    padding:0 7px;
    font:bold 12px/20px Arial,Sans-Serif;
    color:white;
}
 
pre[data-codetype="HTML"]       {border-color:#27ae60;color:#8FE6B3;}
pre[data-codetype="CSS"]        {border-color:#16a085;color:#7DDECA;}
pre[data-codetype="JavaScript"] {border-color:#2980b9;color:#91C8ED;}
pre[data-codetype="JQuery"]     {border-color:#34495e;color:#889CAF;}
 
 
pre[data-codetype="HTML"]:before          {background-color:#27ae60;}
pre[data-codetype="CSS"]:before           {background-color:#16a085;}
pre[data-codetype="JavaScript"]:before    {background-color:#2980b9;}
pre[data-codetype="JQuery"]:before        {background-color:#34495e;}
 
 
pre code,
pre .line-number {
  display:block;
  font:normal normal 12px/15px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color:#006699;
}
 
pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#ecf0f1;
  background-color:#243342;
  border-right:2px solid #3E5770;
  text-align:right;
  min-width:2.5em;
}
 
pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}
 
pre .line-number span:nth-child(even) {background-color:#243342}
 
pre .cl {
  display:block;
  clear:both;
}

Lalu cari </body> lalu letakan kode berikut diatas kode </body>

<script type='text/javascript'>
(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j < num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j+1) + '</span>';
        }
    }
})();
</script>

Demikian artikel tentang mengenai Membuat Tag PRE Keren Dengan Urutan Nomor Pada Blog, dan semoga menambah cantik blog sobat..

Sumber; http://the-anarchyta.blogspot.com/2014/02/cool-tag-pre.html