Membuat Tag Pre Keren

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Blog Mas Rifky - Assalamualaikum Wr.Wb. kali ini saya akan membuat tutorial yang special yaitu Membuat Tag Pre Keren. Nah. Sebuah blog atau web tutorial tidak akan pernah lepas dari hal yang satu ini, pada pencarian Google banyak sekali jenis Tag Pre yang disajikan secara lengkap dengan cara pemasangan blogger - blogger Indonesia maupun Mancanegara. Pembuatan Tag Pre itu sendiri mungkin ditujukan agar pembaca atau audiens sebuah blog dapat lebih cepat memahami serta membedakan atar kode yang disajikan maupun itu CSS, HTML, Javascript dan JQuery.. :D

Demo

Cara Pemasangan:

• Buka Tab Edit HTML, lalu cari kode ]]></b:skin> dan pastekan kode dibawah ini tebat 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;
} 

• Setelah selesai, cari kode </head> setelah ketemu pastekan kode dibawah ini tepat diatas kode </head>

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

• Simpan template kalian..

Penggunaan HTML

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

Sekian dulu ya tutorialnya.. Semoga Bermanfaat :)