Cara Mudah Membuat Tag Pre Di BLog

Cara Membuat Tag Pre Di Blog - Mungkin sobat sudah pada tau apa itu tag pre ?  tapi ada juga sebagian orang yang masih belum tau apa itu tag pre. Oke sebelum masuk ke inti postingan kali ini saya akan jelaskan secara singkat apa itu Tag Pre ?

Tag Pre adalah sebuah kotak box yang berfungsi untuk menyisipkan sebuah kode kedalam box tersebut sehingga bisa untuk berbagi kode dan kode tersebut bisa terlihat. Kebanyakan blogger juga sering menggunakan Blockquote perlu di ingat juga yang di maksud dari Blockquote adalah.

Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya. Yang berfungsi untuk menandai kalimat penting ataupun sebuah pesan sehingga para pembaca lebih tertarik untuk membaca pesan tersebut.

 Oke sekarang sudah paham apa itu tag pre ? Sekarang kita akan masuk ke Inti utama postingan ini, yaitu : Cara Memasang Tag Pre di Blog.

Cara Mengubah Tag Pre di Blog

1. Pertama , silahkan sobat masuk ke editor template blog lalu cari kode ]]></b:skin>
2. Lalu sobat tambahkan kode berikut ini tepat di atas kode ]]></b:skin>

/* Pre Tag */
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 code {
padding:0 !important;
color: #a3a49a;
background: none !important;
border:none !important;
display:block;
}
pre mark {background-color:#1a5752;color:#a3a483}
pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#61686d;
  background-color:#39424e;
  text-align:right;
  min-width:2.5em;
    padding-right:4px;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: #586e75;
font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #7195a3;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #569dcf;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #aa985a;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
color: #509a55;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;
}
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;}

3. Jika sudah sekarang tambahkan kode dibawah ini tepat 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>

4. Save dan keluar dari editor template.

Cara Memanggil/ Memunculkan Tag Pre Di Blog

Untuk Memanggil atau Memunculkan Tag Pre di Blog adalah dengan menuliskan kode HTML berikut ini pada postingan sobat.

<pre data-codetype="HTML"> ...kode disini... </pre> /* tag pre untuk kode html */
<pre data-codetype="CSS"> ...kode disini... </pre>  /* tag pre untuk kode CSS */
<pre data-codetype="JavaScript"> ...kode disini... </pre>  /* tag pre untuk kode JavaScript */
<pre data-codetype="JQuery"> ...kode disini... </pre>  /* tag pre untuk kode JQuery */

Sekarang lihatlah hasilnya.

Sekian Tutorial tentang Cara Mengubah Tag Pre Di blog dan Cara Memanggil atau Memunculkan Kode dengan Tag Pre di Blog. Semoga tutorial ini bisa bermanfaat untuk sobat khususnya untuk saya sendiri. Terimakasih telah mengunjungi Blog Pintasku