Jika anda menemukan sebuah blog tutorial dan sempat mampir melihat coding yang ada pada postingannya, akan tampak terlihat menarik dengan postingan yang codingnya sudah dikemas dan dikelompokkan dalam sebuah kotak atau box, misalnya seperti gambar berikut.
Code Box di atas tampak seperti yang digunakan di blog ini, hanya saja admin sedikit mengubah gaya tampilan dan bagi yang ingin menggunakannya juga, bisa mengikuti langkah-langkah berikut.
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;
} <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>
Kode CSS di atas silahkan dicopy, kemudian dipaste tepat di atas kode /]]></b:skin> atau </style> pada template blogger anda.
Kemudian Kode Javascriptnya dicopy dan dipaste di atas kode </body>.
Selanjutnya untuk postingannya, silahkan buat artikel baru, kemudian pilih Tampilan HTML untuk menulis coding yang akan disertakan ke dalam artikelnya.
<pre data-codetype="HTML"> Pasang Kode HTML Anda di Sini </pre>
<pre data-codetype="CSS"> Pasang Kode CSS Anda di Sini </pre>
<pre data-codetype="JavaScript"> Pasang Kode JavaScript Anda di Sini </pre>
<pre data-codetype="JQuery"> Pasang Kode JQuery Anda di Sini </pre>
Sampai di sini, anda sudah bisa memposting coding yang dikemas dalam sebuah box sehingga artikel anda kini tampak lebih menarik.
Demikian artikel tentang Mempercantik Postingan Blog dengan Cool Tag Pre Syntax Highlight ini dapat kami sampaikan, semoga artikel atau info tentang Mempercantik Postingan Blog dengan Cool Tag Pre Syntax Highlight ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
