Cara membuat Post artikel Pemograman HTML di Blogger agar Tampil

Tutorial Code Pemograman - Mungkin para blogger yang ingin mengangkat tema blogger seperti saya ini harus tau bagaimana caranya membuat Post artikel Pemograman HTML di Blogger agar Tampil, karena jika sekedar post biasa coding yang akan dipost tidak akan tampil karena terbaca sebagai pemograman dalam blogger, maka diperlukan kotak khusus untuk menaruh script code tersebut, Berikut tutorialnya agar tampilan juga lebih menarik :

1. Yang pertama buka Template
2. Lalu klik Edit HTML
3. Paste script berikut ini diatas]]></b:skin>

/* Syntax Highlghter --------- */ pre {padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:13px;color:#839496;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;line-height:1.4em;position:relative;white-space: pre-wrap;word-wrap: normal;} pre.line-number {background:#2f3741url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV7pTAX61VhbXRniMTQeBA1jDy-TOEUBwy-CXj8nRlG_HQSKjoR50R94hrLg5Omw68OJ9cAaA9bvzN3h_GPvLrD5Wlj5xJCtaVRBeTBHcdE-j3lfTf3_TUE_eK40TwvQYAM8wwKdSTeb8/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;} pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;} pre[data-codetype="CSS"]{border-left-color:#5fbbba} pre[data-codetype="HTML"]{border-left-color:#4fc1eb} pre[data-codetype="JavaScript"]{border-left-color:#ff6c60} pre[data-codetype="JQuery"]{border-left-color:#99c262} pre.line-number[data-codetype]:before {content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px12px;font-family:Oswald,Arial,Sans-serif;font-size:14px;text-transform:uppercase;background-color:#41749f;color:white} pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e} pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb} pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60} pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262} 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;} #comments code {color:#bbbb6d;} pre code {padding:0 !important;color: #a3a49a;background: none!important;border:none !important;display:block; } 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. Lalu Simpan dan tambahkan kembali kode jQuery ini tepat diatas kode </body>



<scriptsrc='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script> hljs.initHighlightingOnLoad(); </script>

5. Lalu simpan kembali
6. Untuk pemanggilannya yaitu anda membuat artikel terlebih dahulu lalu, jangan lupa script yang akan di tampilkan agar di parse terlebih dahulu
7. Setelah diparse gabungkan dengan pemanggilan kotak script pemanggilannya
8. Selamat mencoba jika masih error silahkan comentar
Contoh :

Untuk Kode CSS :
 <pre class="line-number" data-codetype="CSS"><code> Masukan Kode Anda Disini </code></pre> 

Untuk Kode HTML
 <pre class="line-number" data-codetype="HTML"><code> Masukan Kode Anda Disini </code></pre> 

Untuk Kode JQuery
  Masukan Kode Anda Disini  

Untuk Kode JavaScript
 <pre class="line-number" data-codetype="JavaScript"><code> Masukan Kode Anda Disini </code></pre> 
Share on Google Plus

About

    Blogger Comment
    Facebook Comment

1 comments:

  1. mas, kodenya coba di cek kembali, kagak bisa di copy. yang ada malah muncul kredit blog ini

    ReplyDelete