Cara Membuat Cool Tag Pre Pada Blogger

Oleh Rafid Aslam

21 Juli 2014

Bagi yang mempunyai blog tentang tutorial blogger pasti tidak asing dengan tag pre. Tag pre sering digunakan untuk menampung kode untuk tutorial tersebut, sebagian Blogger masih memakai Blockquote, padahal blockquote hanya dikhususkan seperti kutipan contohnya seperti kata-kata mutiara. Namun blockquote tidak apa-apa jika masih dipakai, segeralah berganti ke tag pre yang lebih mudah dimengerti dan dengan desain yang elegan dapat menghibur pengunjung anda membacanya. Pada blockquote kodenya tetap rata dan tidak teratur dengan jelas sedangkan pada Tag pre kodenya terlihat tersusun dengan rapih sehingga mudah dimengerti.

1. Masukkan CSS di bawah ini, di atas kode </style> atau di atas 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;
}

2. Masukkan kode JavaScript di bawah ini di atas kode </body>

<script type="text/javascript">
//<![CDATA[
(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>

3. Simpan template

Cara pemakaiannya:

Untuk penulisan kodenya pada postingan kodenya seperti ini:

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

Terimakasih sudah mengunjungi blog saya, semoga post ini bermanfaat bagi anda.

Tag : Tips Blogger

Bagikan :

Tweet