Cara Membuat Syntax Higlighter di blogspot

Cara Membuat Syntax Higlighter di blogspot - Di tutorial Kali ini saya akan membagikan sedikit tutorial yang mudah-mudah bisa bermanfaat bagi sobat Blogging yang suka Share Script/atau Kode-kode Html maupun CSS.

Cara Membuat Syntax Higlighter di blogspot/ yang biasa di cari sih cara membuat tag pre di blogspot. hehe dulu saya sangat membutuhkan sekali tutorial ini karna saya rasa apa gunanya jika Blog Tutorial tidak bisa membuat Tag <pre , Maka dari itu yuk di baca tutorial ini.

Cara Membuat Syntax Higlighter di blogspot

---

1.Masuk ke akun Blogger Sobat, dan Masuk ke Dasbor Blogger .
2.Buka Tema --> Edit-Html.
3.Tekan CTRL+F dan Cari kode ]]></b:skin> atau </style>.
4.Jika sudah Ketemu Copy Kode CSS Di Bawah ini, tepat di atas kode tsb  :

 /* CSS Syntax Highlighter By AkhtarvisArt */
pre {
    padding: 48px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #1F232A;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attrundefinedtitle);
    position: absolute;
    top: 0;
    background-color: #666;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to select';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.4s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #607779;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #FEFEFE;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #BEBCBC;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #FFE500;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #A2FEA5;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #8ECEFE;
}

code .token.atrule,code .token.attr-value {
    color: #006B6B;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #FEB380;
}

code .token.keyword {
    color: #9D2200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #FEAAAA!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #A33636!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counterundefinedlinenumber);
    color: #666;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSS']:before {
    background-color: #AA80FE;
}

pre[data-codetype='HTML']:before {
    background-color: #FFB200;
}

pre[data-codetype='JavaScript']:before {
    background-color: #00B366;
}

pre[data-codetype='JQuery']:before {
    background-color: #009999;
} 

5. Gunakan Tag pre berikut untuk menaruh script/kode yang ingin di jadikan Postingan.
6. Sebelum itu Kompress dulu Script/Kode yang akan di masukkan kedalam Tag pre di bawah ini.
7. Untuk bisa Mengkompres Script/Kode tersebut Sobat bisa Kunjungi Halaman ini : HtmlConverter.

<pre title="HTML" data-codetype ="HTML"><code class="language-markup">HTML ESCAPED CODE HERE</code></pre>
<pre title="CSS" data-codetype ="CSS"><code class="language-css">CSS CODE HERE</code></pre>
<pre title="Javascript" data-codetype ="JavaScript"><code class="language-javascript">JAVASCRIPT CODE HERE</code></pre>
<pre title="jQuery" data-codetype ="JQuery"><code class="language-javascript">JQUERY CODE HERE</code></pre> 

 Sekian tutorial Cara Membuat Syntax Higlighter/ Cara Menggunakan Tag Pre di Blogspot, semoga bermanfaat.

Baca Artikel Menarik lainnya

Loading...