Cara Membuat Tag Pre/Syntax Highlighter Blog dengan No.Urut

Cara Membuat Tag Pre/Syntax Highlighter Blog dengan No.Urut

Cara Membuat Tag Pre/Syntax Highlighter Blog dengan No.Urut. - Sebelumnya saya sudah pernah memberikan suatu tutorial blogger kepada anda mengenai, cara membuat syntax highlighter di blogger. Nah di artikel saya kali ini pun saya akan memberikan tutorial dengan inti judul yang hampir sama dengan sebelumnya yaitu, merubah tag pre di blogger. Sebelum saya melanjutkan postingan ini, ada baiknya anda mengerti "apa itu tag pre"?

Tag pre itu merupakan sebuah kotak atau tabel yang ada pada blog terutama di dalam postingan. Tag pre biasanya dipakai teman blogger lain untuk menyisipkan suatu kode kedalamnya, baik itu kode HTML, CSS ataupun jQuery. Fungsinya itu tak lain untuk mempermudah pembaca melakukan pengcopyan atau menyalin kode yang ada dalam tag pre tersebut dan memisahkan dengan teks yang berda di luar dari tag pre tersebut. Hampir sama dengan blockquote, hanya saja perbedaanya terletak oleh peletakkan atau penggunaan si pemilik blogger tersebut.

Cara Membuat Tag Pre Blog dengan No.Urut
Biasanya itu tampilan standart dari blogger itu terlihat kurang menarik, sehingga disaat kita menggunakanya akan tampak tidak profesional, nah untuk mengatasi hal tersebut disini saya akan menjelaskan untuk bagaimana cara membuat dan merubah tag pre di blog sehinggan tampilanya lebih keren dan menarik. Saya rasa tidak usah mengajukan pertanyaan lagi, dikarenakan anda mampir kepostingan saya ini memang bertujuan untuk merubah desain tag pre di blog anda sendiri, Lantas bagaimana Tutorial memodifikasinya.

Cara Merubah Tag Pre di blog

1. Masuk ke Akun Bloger
2. Buka template dan selanjutnya Edit HTML
3. Lalu anda cari kode ]]></b:skin> dan letakkan kode dibawah tepat di atasnya,
/*PRE Tag Blog*/
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(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/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;
}
4. Simpan Template.

Cara Memasang/Memunculkan Tag pre Di Blog
1. Ketika anda membuat postingan, silahkan Pilih mode HTML (Bukan Compose)
2. Setelah masuk Mode HTML, Masukkan 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>

Setelah itu masukkan kode yang ingin di masukkan.

Sekian artikel dari saya mengenai Cara Membuat Tag Pre dengan Nomor Urut angka di Blog, Semoga tutorial ini memoermudah anda jika anda ingin merubah tag pre dalam blogger.

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »