Cara Memasang Kolom Script Syntax Highlighter di Blog

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Memasang Kolom Script Syntax Highlighter di Blog, Postingan ini masih berhubungan dengan Artikel Tutorial Blog. Artikel Widget.

Baca juga:

Cara Memasang Kolom Script Syntax Highlighter di Blog

Advertisement

Memasang Kolom Script Syntax Highlighter di Blog - Halo kawan, setelah sebelumnya saya membagikan tutorial mengenai cara memasang kota pencarian responsive dan cara memasang halaman error 404 di blog, maka kali ini saya akan membagikan cara untuk membuat kotak/ kolom script syntax. Sebenarnya apabila sobat googling mengenai cara memasang kolom script di dalam blog, akan banyak sekali blog-blog yang sudah membahasnya. Namun dari beberapa kebanyakan yang saya jumpai cara yang di bagikan merupakan cara yang sederhana. Yakni hanya kolom biasa dengan menggunakan warna background yang berbeda-beda.

Nah maka dari itu, pada kesempatan kali ini saya membagikan artikel yang sesuai dengan judul di atas. Untuk membuat kotak script/ Syntax Highlighter Box di dalam postingan blog caranya cukup mudah kok. Oke langsung saja...

Memasang Kolom Script Syntax Highlighter Box

1. Pertama silahkan masuk ke Dashboard blog masing-masing
2. Kemudian pilih Template -->> Edit Template.
Note : Sebelum sobat melakukan pengeditan terhadap template blog, silahkan backup dulu templatenya untuk antisipasi bila nantinya terjadi error.

3. Selanjutnya, cari kode ]]></b:skin> untuk memudahkan pencarian, silahkan gunakan ctrl + F.
Setelah ketemu, letakan kode dibawah ini tepat di atas kode ]]></b:skin>

 /* syntax highlighter Otomatis */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#011B35;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
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}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#FFF8DC;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#990099}
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:#FF0000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}  

4. Kemudian silahkan cari </head> dan letakkan kode di bawah ini tepat di atasnya.

<script src='https://cdn.rawgit.com/siabdi/siapdi/master/siabdisyntax.js'></script>  

5. Silahkan simpan template.

Untuk penggunaannya dalam postingan blog sobat. gunakan kode di bawah ini dalam mode HTML.

<pre><code> 
 Masukkan disini Kode CSS, JavaScript, atau HTML  
</pre></code>  

Oiya, sebelumnya saya juga sudah membagikan mengenai artikel dalam memasang kolom script sederhana. Bagi sobat yang ingin meniliknya silahkan baca artikelnya dengan judul cara membuat kolom script keren di blog. Menggunakan kolom script dalam postingan sangatlah di sarankan, khususnya bagi blog-blog yang memilii niche/ membahas dan memberikan tutorial-tutorial blog. Karena dengan menggunakan kolom script dalam menempatkan kolom script, isi postingan sobat akan menjadi lebih rapi. Sehingga tampilan halaman postingan sobat terasa nyaman untuk di pandang.

Demikian artikel kali ini mengenai cara memasang kolom script syntax highlighter di blog. Apabila anda berhasil dalam menerapkan cara pemasangan cara tesebut, maka tampilan kotak/ kolom script yg ada dalam artikel sobat akan nampak seperti gambar di atas. Namun, apabila sobat masih mengalami kesulitan dalam penerapannya di dalam template maupun di dalam artikel, silahkan tinggalkan pertanyaan sobat dalam kotak komentar. Selamat mencoba :)