Memodifikasi Tag Pre Blogger

Memodifikasi Tag Pre Blogger - Tag pre biasanya digunakan dalam postingan tutorial yang isinya berupa kode-kode tertentu seperti CSS,HTML,JavaScript,dll. Fungsinya yaitu untuk memudahkan dalam melihat kode-kode dan meng-copy nya. Apakah perbedaan pre dan blockqoute?

Blockquote akan muncul secara otomatis saat kita mengklik tanda petik sedangkan pada tag pre kita harus mengeditnya manual pada HTML saat menulis artikel. Kalau saya sendiri menggunakan tag pre saat untuk menampilkan kode-kode tertentu, sedangkan blockqoute hanya untuk menampilkan kata-kata penting.

Nah, jika anda ingin memodifikasi tampilan kotak pre agar lebih menarik seperti yang biasa TIPS YUDI gunakan,silahkan langsung disimak langkah-langkahnya berikut dibawah ini.

Langkah-langkah :

Masuk akun blogger
Pilih menu Template lalu klik Edit HTML
Cari kode ]]></b:skin> ( gunakan ctrl+f untuk memudahkan )

Kemudian, masukkan kode CSS berikut tepat diatas kode ]]></b:skin>

 /*PRE*/
pre,i[rel=&quot;pre&quot;] {
padding:.8em 1em;
margin:0;
background-color:#2f3741;
border-left:4px solid #40627E;
font-size:13px;
color:#839496;
font-family: Consolas,&quot;Andale Mono WT&quot;,&quot;Andale Mono&quot;,&quot;Lucida Console&quot;,&quot;Lucida Sans Typewriter&quot;,&quot;DejaVu Sans Mono&quot;,&quot;Bitstream Vera Sans Mono&quot;,&quot;Liberation Mono&quot;,&quot;Nimbus Mono L&quot;,Monaco,&quot;Courier New&quot;,Courier,Monospace;
line-height:1.4em;
position:relative;
white-space: pre;
word-wrap: normal;
white-space:pre;
overflow:auto
}
pre.line-number {
background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFVm9iSTssBSrN5GQmLztwQcbPp68oZdV1BwHAqaIo5wuSNVCppppiXKs7AUzJ6zlnFqLm1h_W-MXgjjDx_WDWzJ4Me24pkQUU22NhoJsba6kus853Oka8Nc5CG-oslYTqNEuh3gdZUaA/s1600/new-line-number.png)no-repeat top left;
padding-left:54px;
border-left:none;
}
  pre.line-number:after{
    content:&quot;&quot;;
    width:35px;
    height:8px;
    background-color:#39424e;
    bottom:0;
    left:0;
    position:absolute;
  }

pre[data-codetype=&quot;CSS&quot;]{border-left-color:#5fbbba}
pre[data-codetype=&quot;HTML&quot;]{border-left-color:#4fc1eb}
pre[data-codetype=&quot;JavaScript&quot;]{border-left-color:#ff6c60}
pre[data-codetype=&quot;JQuery&quot;]{border-left-color:#99c262}

pre.line-number[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Oswald,Arial,Sans-serif;
font-size:14px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre.line-number[data-codetype=&quot;CSS&quot;]:before{background-color:#a9d86e}
pre.line-number[data-codetype=&quot;HTML&quot;]:before{background-color:#4fc1eb}
pre.line-number[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60}
pre.line-number[data-codetype=&quot;JQuery&quot;]:before{background-color:#99c262}

code {
font-family: Consolas,&quot;Andale Mono WT&quot;,&quot;Andale Mono&quot;,&quot;Lucida Console&quot;,&quot;Lucida Sans Typewriter&quot;,&quot;DejaVu Sans Mono&quot;,&quot;Bitstream Vera Sans Mono&quot;,&quot;Liberation Mono&quot;,&quot;Nimbus Mono L&quot;,Monaco,&quot;Courier New&quot;,Courier,Monospace;
font-size:13px;
color: #d14;
}
#comments code {
 color:#bbbb6d;
}
#comments pre {
    margin-bottom:-15px;
}
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;
}

Setelah selesai, klik Simpan Template

Cara pengunaan dan hasil yang ditampilkan

Cara penggunaan tag pre dalam postingan yaitu dengan cara mengklik menu HTML dan kemudian mulailah mengedit sesuai dengan kode yang ditentukan. Silahkan lihat masing-masing hasil tampilan kotak pre serta kode yang diperlukan dibawah ini.