blog yang berisi tentang berita lukisan dan tutorial blogger

Cara memasang Syntax Highlighter ringan diblog

Syntax Highlighter ringan diblog

Malam sobat blogger...? pada kesempatan kali ini saya masih berbicara tentang syntax highlighter diblog, setelah kemarin saya membahas tentang memberi efek padabayangan teks area-CSS box shadow. namun kali ini sedikit berbeda, karena syntax highlighter ini memakai gaya border dan scroll. Jadi keliatan lebih simple dan tidak terlalu panjang jika sobat memakai tutorial kode yang panjang pada postingan.
Bagi yang tertarik silahkan langsung saja pada pembahasan:

Pertama cari atau ganti CSS, bila sobat sudah memakai syntax highlighter sebelumnya. Bila yang belum simpan kode dibawah ini tepat diatas ]]></b:skin>
/*Pre*/ pre,i[rel="pre"]{display:block;padding:5px .5em 5px 1em;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;border:2px solid #c5d0e3;position:relative;overflow:auto;word-wrap:normal;white-space:pre;-webkit-user-select:text;-moz-user-select:-moz-text;-moz-user-select:text;-khtml-user-select:text;-ms-user-select:text;user-select:text;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;} pre:hover,i[rel="pre"]:hover {background-color: #e6e9f1;} pre code{display:block;color:#111;margin-top:3px;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;letter-spacing:0;white-space:pre;overflow:auto;} pre[rel="HTML"],pre[data-codetype="HTML"]{border-color:#4584BE;} pre[rel="CSS"],pre[data-codetype="CSS"]{border-color:#5DA028;} pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{border-color:#545448;} pre[rel="JQuery"],pre[data-codetype="JQuery"]{border-color:#7073CF;} pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{border-color:#E36B23;} pre[rel="XML"],pre[data-codetype="XML"]{border-color:#C44032;} pre[rel="PHP"],pre[data-codetype="PHP"]{border-color:#FF9900;} pre[rel*="+"],pre[data-codetype*="+"]{border-color:#0B7E88;} pre .comments,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#00BB4B;font-style:italic;} pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{color:#859900;} pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#9B0909} pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id{color:#103197;} pre .tag .title,pre .rules .property,pre .django .tag .keyword{font-weight:bold;} pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label{color:#0499D3;} pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#cb4b16;} pre .deletion{color:#dc322f;} pre .tex .formula{background:#073642;} pre.numbered{border-left-width:2px;} pre .line-number,pre.numbered code{display:block;line-height:16px;} pre .line-number{float:left;margin:0 1em 0 -1em;color:#586E75;border-right:2px solid #c5d0e3;text-align:right;min-width:35px;} pre .line-number span{display:block;position:relative;padding:0 .5em 0 1em;} pre .line-number span:nth-child(even){background-color:#FAFAFA;} pre .line-number span em{position:absolute;bottom:-1px;left:100%;background-color:orange;padding:0 2px 1px 2px;border:1px solid black;font-style:normal;color:black;display:none;} pre .line-number span:hover em{display:block;} pre .line-number span:target a{display:block;color:white;position:relative;background-color:#268bd2;margin:0 -.5em 0 -1em;padding:0 .5em 0 0;} pre.numbered code span{line-height:12px;} pre[data-codetype="HTML"] .line-number span:target a{background-color:#4584BE;} pre[data-codetype="CSS"] .line-number span:target a{background-color:#5DA028;} pre[data-codetype="JavaScript"] .line-number span:target a{background-color:#bbbbbb;} pre[data-codetype="JQuery"] .line-number span:target a{background-color:#7073CF;} pre[data-codetype="JQuery UI"] .line-number span:target a{background-color:#E36B23;} pre[data-codetype="XML"] .line-number span:target a{background-color:#C44032;} pre[data-codetype="PHP"] .line-number span:target a{background-color:#FF9900;} pre[data-codetype*="+"] .line-number span:target a{background-color:#B58900;} pre code mark {background: white;} pre[data-codetype]:before {content:attr(data-codetype);display:block;position:static;top:0;right:0;left:0;background-color:#666;padding:0 7px;margin:0 -3px;font:bold 11px/20px Arial,Sans-Serif;color:white;} pre[data-codetype="HTML"]:before {background-color:#4584BE;} pre[data-codetype="CSS"]:before {background-color:#5DA028;} pre[data-codetype="JavaScript"]:before {background-color:#545448;} pre[data-codetype="JQuery"]:before {background-color:#7073CF;} pre[data-codetype="JQuery UI"]:before {background-color:#E36B23;} pre[data-codetype="PHP"]:before {background-color:#FF9900;} pre[data-codetype="XML"]:before {background-color:#C44032;} pre[data-codetype*="+"]:before {background-color:#0B7E88;} code,pre{padding:0 3px 2px;font-family:Monaco, Menlo, Consolas, "Courier New", monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code,i[rel="code"]{overflow:auto;max-height:200px;padding:2px 4px;color:#d14;white-space:nowrap;background-color:#f7f7f9;border:1px solid #e1e1e8;-webkit-user-select:text;-moz-user-select:-moz-text;-moz-user-select:text;-khtml-user-select:text;-ms-user-select:text;user-select:text;} i[rel="code"]{display:block;} Selanjutnya cari kode </head> atau </body> dan simpan kode diatasnya
<script src="http://googledrive.com/host/0Bwggu85mZBaxeWRoSXlwUV9QNzA/" type="text/javascript"> Terakhir simpan template

Semoga bermanfaat

Adsense Bawah

0 komentar




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

Cancel Reply
TOP