Cara Membuat Kotak Area Script Syntak Dengan Nomer Berurutan Pada Blog




Cara Membuat Kotak Area Script Syntak lengkap Dengan Nomor yang Berurutan Pada Blog  bisa kalian buat pada tengah postingan blog.

Pada kesempatan kali ini,Bloginjase ini akan membagikan sebuah tutorial blogging yang bisa di gunakan untuk membuat tampilan yang bagus keren dan menarik,Yaitu menerapkan Kotak area Syntax atau lebih di kenal dengan Tag Pre syntaX.

Sering melihat website tutorial yang mempunyai kru yang banyak?
Mungkin saja pernah ya,Yang di mana di halaman page postingannya dalam membagikan kode html atau sebuah JavaScript ,menggunakan Kotak area syntax dengan no yang berurutan.

Bukan hanya itu,Dengan menggunakan Kotak syntax,Kode html yang di bagikan pada blog bisa berubah warnanya,sangat mirip dengan aplikasi editor buat bahasa pemrograman Html.

Jika Iingin tahu apa itu Syntax!
Syntax adalah sebuah pemanggil html yang bisa di modifikasi dalam hasil tampilannya,dan juga dengan syntax ini juga bisa menghasilkan warna warni pada setiap kode html yang di buat sebagai postingan blog.

Syntax Highlight sering di jadikan sebagai merubah tampilan blog dalam menyajikan kode bahasa pemrograman.Dan jika kalian ingin tahu contohnya,Seperti gambar di bawah ini.Ini adalah untuk syntak khusus HTML.



Jika menurut kalian dengan tampilan di atas cukup keren dan simpel,Maka kalian bisa mencobanya untuk blog kalian,Jika kalian tertarik dengan kotak area pree tag syntax.Berikut ini adalah kodenya.

Kode Kotak Syntax Highlight Pree Tag

Jadi kode di bawah ini adalah,kode yang bisa menghasilkan seperti gambar di atas,Jika ingin di gunakan pada blog,maka harus memasukan element seperti kode HTML dan Java script yang khusus suportd Syntax dan inilah kode tambahan ke dalam template.


*Kode di bawah ini ,kalian bisa menempatkannya tepat di atas tag ]]></b:skin> atau </style>

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


*Jika sudah,Copy lagi kode java script di bawah ini dan tempatkan di atas tag </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>

*Untuk kode penggunaannya pada postigan ialah dengan cara memilih mode HTML ,gunakan tag kode pemanggil di bawah ini.

<pre data-codetype="HTML"> teks anda disini</pre>
<pre data-codetype="CSS"> teks anda disini </pre>
<pre data-codetype="JavaScript"> teks anda disini </pre>
<pre data-codetype="JQuery"> teks anda disini </pre>


Nah di atas adalah kode syntax highlight dengan warna yang bisa kalian pasangkan pada blog kalian,Jadi ketika kalian membagikan tutorial bloging seperti kode Java Script,Css dan lain sebagainya,Kalian bisa menggunakan syntax.

Karena dari segi penampilan,dengan syntax ,kode html yang akan di bagikan akan terlihat lebih bagus dan keren pada postingan blog kalian.okey mudah banget kan geng !
Salam sukses dan selamat berkereasi.


Artikel Terkait

Postingan populer dari blog ini

Begini Cara Memasang iklan penelusuran bersponsor google adsense Di Blog

Membuat Related Post Grid Untuk Template AMP Blogger

Download Template Igniel versi premium Gratis

Cara Menampilkan Traffic Data Koneksi Internet Pada Laptop

Koleksi Symbol Text Keren Untuk Blog Dan Sosial Media

Tutorial Full Flash Smartphone OPPO A37 ,Lupa Pola

Cara Mengatasi Gagal Install Driver VGA Pada windows 7 All version

Cara membuat Link Model no follow dan Do follow

Cara Membuat Kotak Script Border Dan Scroll Pada Blog

Cara Membuat Akun Google Adsense Hosted Terbaru