Cara Memasang Kotak Script di Blog. Bagi kalian yang memiliki blog untuk membagikan tutorial tentunya tidak lepas dari script baik itu HTML, CSS, JavaScript dan lain sebagainya.
Pada kesempatan kali ini Amirs ID akan memberikan tutorial yang sangat berguna tentunya bagi para blogger yang sering berbagi tutorial, yaitu cara memasang kotak script di blog.
Kotak script atau istilah lainnya syntax highlighter berfungsi untuk mempercantik tampilan serta memudahkan pembaca dalam memahami script yang kalian bagikan sehingga tentunya berdampak pada kenyaman pembaca dalam membaca setiap tutorial yang kalian bagikan.
Ditambah dengan kode jQuery yang akan memudahkan pembaca dalam memblok seluruh script yang kalian bagian hanya dengan melakukan double click.
Langsung saja, silahkan kalian ikuti langkah-langkah dalam memasang kotak script di blog seperti dibawah ini.
Cara Memasang Kotak Script di Blog
1. Masuk ke akun blog kalian terlebih dahulu di www.blogger.com
2. Klik pada bagian Template > Edit HTML
3. Cari kode </style> dengan cara tekan Ctrl+F dan masukkan kode </style> kemudian tekan Enter
4. Setelah ketemu, silahkan tambahkan kode CSS dibawah ini tepat berada di atas kode </style>
/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{max-height:500px;display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;} 5. Kemudian carilah kode </body> dengan cara tekan Ctrl+F masukkan kode </body> kemudian tekan Enter
6. Jika sudah ketemu, tambahkan kode jQuery dibawah ini tepat berada diatas kode </body>
<script type="text/javascript">
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script> Kode jQuery tersebut berfungsi agar kode yang terdapat pada kotak script tersebut dapat di double click.7. Simpan Template
Cara Menggunakan Kotak Script
1. Saat kalian membuat sebuah artikel baru, pilihlah mode HTML untuk memulai menggunakan kotak script tersebut.2. Kemudian terapkan salah satu (terserah kalian) kode dibawah ini pada mode HTML. Ganti tulisan yang berwarna merah dengan kode yang ingin kalian bagiakan (CSS, HTML, JavaScript, jQuery).
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre> Jika kode yang kalian bagikan berupa kode HTML, JavaScript, JQuery silahkan kalian lakukan parse terlebih dahulu disiniParse tersebut berfungsi untuk menampilkan kode yang tidak muncul saat kalian membagikan kode.
Berikut tadi tutorial Cara Memasang Kotak Script di Blog. silahkan kalian ikuti tutorial tersebut, dan pastikan kalian mengikuti langkah demi langkah dengan baik agar hasil yang kalian peroleh sesuai dengan harapan. Sekian dan terimakasih.
EmoticonEmoticon