GO Blog

Tag pre adalah sebuah elemen yang di gunakan untuk membungkus baris kode selain penggunaan menggunakan tag blokquote, tag pre umunya di gunakan oleh blog yang menyajikan barik kode tertentu pada sebuah artikel atau baris kode lainnya. buat sahabat yang masih bingung silahkan lihat gambar atau blog ini.

Cara untuk membuat tag pre memang susah susah gampang, tinggal memilih desain css sendiri atau memanggil dari direktori penyedia. buat sobat ingin ingin membuat tag pre silahkan ikuti cara berikut ini:

Pertama masuk ke editor template blog,
tambahkan juga css di bawah ini bersama css template blog anda

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-5859code-line:1-5960code-line:1-6061code-line:1-6162code-line:1-6263code-line:1-6364code-line:1-6465code-line:1-6566code-line:1-6667code-line:1-6768code-line:1-6869code-line:1-6970code-line:1-7071code-line:1-7172code-line:1-7273code-line:1-7374code-line:1-7475code-line:1-7576code-line:1-7677code-line:1-7778code-line:1-7879code-line:1-7980code-line:1-8081code-line:1-8182code-line:1-8283code-line:1-8384code-line:1-8485code-line:1-8586code-line:1-8687code-line:1-8788code-line:1-8889code-line:1-8990code-line:1-9091code-line:1-9192code-line:1-9293code-line:1-9394code-line:1-9495code-line:1-9596code-line:1-9697code-line:1-9798code-line:1-9899code-line:1-99100code-line:1-100101code-line:1-101102code-line:1-102103code-line:1-103104code-line:1-104105code-line:1-105106code-line:1-106107code-line:1-107108code-line:1-108109code-line:1-109110code-line:1-110111code-line:1-111112code-line:1-112113code-line:1-113114code-line:1-114115code-line:1-115116code-line:1-116117code-line:1-117118code-line:1-118119code-line:1-119120code-line:1-120121code-line:1-121122code-line:1-122123code-line:1-123124code-line:1-124125code-line:1-125126code-line:1-126127code-line:1-127128code-line:1-128129code-line:1-129130code-line:1-130pre {
    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;}

lalu simpan kode ini di atas kode </head>

<script src='https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s' type='text/javascript'></script>

untuk memanggilnya agar puncul di postingan yang sobat buat, gunakan kode berikut dan letakkan di dalam posting

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

agar anda tidak susah melakukannya bisa sobat simpan di editor pos...

demikian saja untuk cara membuat tag pre di blog, semoga bermanfaat...