Memodifikasi Tag Pre Blogger

Memodifikasi Tag Pre - 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 Faisal Fachrureza Share gunakan,silahkan langsung disimak langkah-langkahnya berikut dibawah ini.

Langkah-langkah :

1. Masuk akun blogger
2. Pilih menu Template lalu klik Edit HTML
3. Cari kode ]]></b:skin> (  gunakan ctrl+f untuk memudahkan )
4. Kemudian, masukkan kode CSS berikut tepat diatas kode ]]></b:skin>

    /*PRE*/
   pre,i[rel="pre"] {
   padding:.8em 1em;
   margin:0;
   background-color:#2f3741;
   border-left:4px solid #40627E;
   font-size:13px;
   color:#839496;
   font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",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/AVvXsEhk62lvkU83IXXu7RzYpxgh9x-ivgYJ4mytj-3xXgM8zaws9-OHWf-UMATvJVETb5WNZkC48vDMfIKZb1y_mLOunMqXGLYG82WOGtdxhmYveFow3xo3mA4shUf1ynwj-vBVjM5n1Tbvttc/s1600/new-line-number.png)no-repeat top left;
   padding-left:54px;
   border-left:none;
   }
     pre.line-number:after{
       content:"";
       width:35px;
       height:8px;
       background-color:#39424e;
       bottom:0;
       left:0;
       position:absolute;
     }
   
   pre[data-codetype="CSS"]{border-left-color:#5fbbba}
   pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
   pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
   pre[data-codetype="JQuery"]{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="CSS"]:before{background-color:#a9d86e}
   pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
   pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
   pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
   
   code {
   font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",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.
  

Masukkan Kode Apapun Disini... 

Masukkan Kode CSS Disini...

Masukkan Kode JQuery Disini...

Masukkan Kode HTML Disini...

Masukkan Kode JavaScript Disini...