Cara Menciptakan Pembungkus Arahan Html, Css, Javascript Dan Jquery Menyerupai Mastamvan

Pagi ini saya mau membagikan Cara Membuat Pembungkus Kode HTML, CSS, JavaScript dan Jquery Seperti MasTamvan

Membuat Syntax Highlighting with Defering Js

untuk menciptakan pembungkus instruksi ini sangat mudah, hanya perlu menambahkan instruksi script dbawah ini. yang dibentuk oleh MasTamvan. Lakukan langkahlangkah dibawah ini

Login ke dalam akun blog kalian terlebih dahulu
Masuk ke Menu Template, HTML
Setelah itu cari kode </body> lalu masukan instruksi dibawah ini sempurna diatas </body>

  <script> //<!CDATA function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/syntaxmas.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //> </script>

Setelah itu cari instruksi </head>
Lalu Masukan Kode dibawah ini sempurna di atas </head>

  <style type='text/css'> pre{position:relative} pre:before{mozuserselect:none;fontsize:15px;fontfamily:'Roboto,sansserif';content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;textindent:15px} pre:after{mozuserselect:none;display:inlineblock;content:"f121";fontfamily:fontAwesome;fontstyle:normal;fontweight:normal;fontsize:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute} predatacodetype="tamvanCSS":before,predatacodetype="tamvanHTML":before,predatacodetype="tamvanJS":before,predatacodetype="tamvanJQ":before{backgroundcolor:#fff;boxshadow:inset 0 0 0 1px #eee} i.klikurl,pre,code{webkituserselect:all;mozuserselect:all;msuserselect:all;userselect:all} .hljs{display:block;padding:0.5em;background:#333;color:white;maxheight:350px;overflow:hidden;borderradius:5px} .hljs:hover{overflow:auto} .hljsname,.hljsstrong{fontweight:bold} .hljscode,.hljsemphasis{fontstyle:italic} .hljstag{color:#62c8f3} .hljsvariable,.hljstemplatevariable,.hljsselectorid,.hljsselectorclass{color:#ade5fc} .hljsstring,.hljsbullet{color:#a2fca2} .hljstype,.hljstitle,.hljssection,.hljsattribute,.hljsquote,.hljsbuilt_in,.hljsbuiltinname{color:#ffa} .hljsnumber,.hljssymbol,.hljsbullet{color:#d36363} .hljskeyword,.hljsselectortag,.hljsliteral{color:#fcc28c} .hljscomment,.hljsdeletion,.hljscode{color:#888} .hljsregexp,.hljslink{color:#c6b4f0} .hljsmeta{color:#fc9b9b} .hljsdeletion{backgroundcolor:#fc9b9b;color:#333} .hljsaddition{backgroundcolor:#a2fca2;color:#333} .hljs a{color:inherit} .hljs a:focus,.hljs a:hover{color:inherit;textdecoration:underline} </style>

Untuk Membuat Syntax Highlighter ini dipostingan, Tambahkan Kode dibawah ini, untuk menciptakan pemnbugkus kode. Masingmasing ada beberapa jenis, Buat HTML,CSS,Jquery dan Javascript.
Jika kalian ingin membungkus instruksi HTML, gunakan CSS HTML, kalau ingin membungkus Jquery gunakan CSS Jquery.

  Kode Pembungkus HTML <pre datacodetype="tamvanHTML" title="Cara Membuat Pembungkus Kode HTML, CSS, JavaScript dan Jquery Seperti MasTamvan"> <code> <!Taro Kode Kalian Disini> </code> </pre>   Kode Pembungkus CSS <pre datacodetype="tamvanCSS" title="Cara Membuat Pembungkus Kode HTML, CSS, JavaScript dan Jquery Seperti MasTamvan"> <code> <!Taro Kode Kalian Disini> </code> </pre>   Kode Pembungkus Javascript <pre datacodetype="tamvanJS" title="Cara Membuat Pembungkus Kode HTML, CSS, JavaScript dan Jquery Seperti MasTamvan"> <code> <!Taro Kode Kalian Disini> </code> </pre>   Kode Pembungkus jQuery <pre datacodetype="tamvanJQ" title="Cara Membuat Pembungkus Kode HTML, CSS, JavaScript dan Jquery Seperti MasTamvan"> <code> <!Taro Kode Kalian Disini> </code> </pre>