Memodifikasi Tag Pre Blog

Cara Merubah atau Memodifikasi Tag Pre Blog,- Tag pre adalah kotak atau sebuah tabel yang ada dalam sebuah blog. Tag pre biasanya di gunakan oleh para blogger untuk meletakkan suatu kode kode seperti kode HTML, CSS, maupun JQuery dalam sebuah blog, hal ini bertujuan untuk memudahkan pembaca mengcopy atau menyalin kode tersebut serta untuk memisahkan antara kode dengan teks teks yang lainnya. Tag pre sebenarnya hampir sama dengan blockquote, hanya saja perbedannya biasanya hanya dalam peletakan atau penggunaannya oleh para blogger blogger. Tag pre bawaan sebuah template biasanya tampilannya hanya monoton dan kurang menarik, jadi dalam postingan kali ini saya akan membagikan cara memodifikasi tag pre dalam sebuah blog sehingga tampilannya lebih menarik. Bagaimana? anda ingin mencobanya? kalau begitu simak postingan di bawah ini.

Cara Merubah atau Memodifikasi Tag Pre Blog

Dalam postingan kali ini tentang Cara Merubah atau Memodifikasi Tag Pre Blog, perlu anda ketahui bahwa setiap masing masing masing kode mempunyai scriptnya masing masing untuk setiap kode. Berikut langkah langkah untuk merubahnya.

1. Login Blogger,
2. Buka Template, lalu edit HTML,
3. Setelah itu cari kode ]]></b:skin>, lalu letakkan kode berikut di atasnya,

/*PRE Tag Blog*/
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/AVvXsEgPUfDJuA15kBYuF9EeQXvJUFic5f1YpwOdSCaWd9-XO8cPFyeqFlaDK83DWU_hIYFIhB0khyphenhypheng3OTjKpjmhGp_pvcOp4LhkFF0LMyLGLWt-uzSZpVGFNPxKf4M6z7bzxymsSBvBBLCdhN8/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;
}

4. Setelah itu simpan.

Cara Memasang Tag Pre

1. Pada saat ingin membuat postingan, buat dalam mode HTMl bukan compose,
2. Setelah itu pada saat mode HMTL, masukkan kode kode berikut,
   
   Untuk kode HTML
   

   <pre class="line-number" data-codetype="HTML">Masukkan kode HTML disini...</pre>

   
   Untuk kode CSS
   

   <pre class="line-number" data-codetype="CSS">Masukkan kode CSS disini...</pre>

   
   Untuk kode JQuery
   

   <pre class="line-nmber" data-codetype="JQuery>Masukkan kode Jquery disini...</pre> 

3. Setelah itu masukkan kode yang ingin di masukkan.

Demikianlah postingan saya tentang Cara Merubah atau Memodifikasi Tag Pre Blog, semoga anda dapat mengerti dan dapat memudahkan anda jika ingin merubah Tag pre dalam blog. Jika ada kesalahan dalam penulisan kode silahkan komentar untuk segera di perbaiki.

Bagikan Artikel ini