Cara Mеmbuаt Sуntаx Hіghlіghtеr (Text Box Script) Kеrеn di Blоggеr

OIFnews - Hallo sobat semuanya apa kabar?. Semoga sobat semua selalu sehat sejahtera se-keluarga yaa :) . Okey sobat langsung aja di kesempatan kali ini kami akan berbagi Tutorial Blogger dengan artikel 'Cara Mеmbuаt Sуntаx Hіghlіghtеr (Text Box Script) Kеrеn di Blоggеr'  yuk kita simak tutorial sebagai berikut.


Cara Mеmbuаt Sуntаx Hіghlіghtеr (Text Box Script) di Blogger


  1. Log in Ke Blogger
  2. Pilih Menu TEMA, lalu Edit HTML
  3. Copy dan Paste kode CSS dibawah sebelum kode ]] ></b:skin>

    pre {
      background-color:white;
      background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
      background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
      background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
      background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
      background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
      -webkit-background-size:30px 30px;
      -moz-background-size:30px 30px;
      -ms-background-size:30px 30px;
      -o-background-size:30px 30px;
      background-size:30px 30px;
      background-repeat:repeat;
      font:normal bold 12px/15px Courier,monospace;
      color:#333;
      border:2px solid #666;
      position:relative;
      padding:0 7px;
      margin:10px 0;
      height:250px;
      word-wrap:normal;
      white-space:pre;
      position:relative;
    }
    
    pre[data-codetype] {
      padding:45px 1em 7px 1em;
    }
    
    pre[data-codetype]:before {
      content:attr(data-codetype);
      display:block;
      position:absolute;
      background-color:#666;
      top:0;
      right:0;
      left:0;
      border-bottom:2px solid #999;
      padding:5px 5px 5px 7px;
      font:bold 14px/20px Arial,Sans-Serif;
      color:white;
    }
    
    pre[data-codetype="HTML"] {
      border-color:#0B7E88;
      color:#08464B;
      -webkit-box-shadow:5px 5px 5px rgb(7,55,99);
      -moz-box-shadow:5px 5px 5px rgb(7,55,99);
      box-shadow:5px 5px 5px rgb(7,55,99);}
    
    pre[data-codetype="CSS"] {
      border-color:#080;
      color:#4B5D08;
      -webkit-box-shadow:5px 5px 5px rgb(56,118,29);
      -moz-box-shadow:5px 5px 5px rgb(56,118,29);
      box-shadow:5px 5px 5px rgb(56,118,29);}
    
    pre[data-codetype="JavaScript"] {
      border-color:#545448;
      color:#1F2E24;
      -webkit-box-shadow:5px 5px 5px rgb(102,102,102);
      -moz-box-shadow:5px 5px 5px rgb(102,102,102);
      box-shadow:5px 5px 5px rgb(102,102,102);}
    
    pre[data-codetype="JQuery"] {
      border-color:#395540;
      color:#2E2E27;
      -webkit-box-shadow:8px 5px 8px rgb(12,52,61);
      -moz-box-shadow:5px 5px 5px rgb(12,52,61);
      box-shadow:5px 5px 5px rgb(12,52,61);}
    
    pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
    pre[data-codetype="CSS"]:before {background-color:#7B990C;}
    pre[data-codetype="JavaScript"]:before {background-color:#545448;}
    pre[data-codetype="JQuery"]:before {background-color:#395540;}
  4. Lalu SIMPAN
  5. Untuk penggunaannya di Postingan Blog, masukan Kode dibawah pada Mode HTML

    <pre data-codetype="HTML">SCRIPT HTML ANDA DISINI</pre>
    <pre data-codetype="CSS">SCRIPT CSS ANDA DISINI</pre>
    <pre data-codetype="JavaScript">SCRIPT JavaScript DISINI</pre>
    <pre data-codetype="jQuery">SCRIPT JQuery DISINI</pre>
  6. Lalu PUBLIKASIKAN
Untuk hasil DEMO bisa lihat disini
Khuѕuѕ untuk kode HTML/JS ѕіlаhkаn Pаrѕе dаhulu dеngаn Tools Parse HTML disini
Nah itu dia sobat artikel kali ini tentang 'Cara Mеmbuаt Sуntаx Hіghlіghtеr (Text Box Script) Kеrеn di Blоggеr' yang bisa kami share ke sobat semuanya. Semoga bermanfaat ya sobs, dan jangan lupa share juga artikel nya ya.
Show comments
Hide comments

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel