Sabtu, 28 April 2018

Cara Membuat dan Memasang Pre Code Keren

Cara Membuat dan Memasang Pre Code Keren

Cara Membuat dan Memasang Pre Code Keren
Cara Membuat dan Memasang Pre Code Keren
Blog Mang Otep | Cara Membuat Pre Code Keren dan Memasang Pre Code pada blogspot - Konsep Pre code ini sering kali digunakan untuk membuat sebuah kota atau box untuk sebuah kode seperti HTML, CSS, Jquery, dan juga Javascript. Keuntungan membuat Pre Code tersebut adalah anda bisa memuat kode - kode yang banyak sekali pun dalam ukuran yang bisa ditentukan.

Berikut ini Mang Otep akan memberikan tutorial bagaimana anda bisa membuat dan memasang Pre Code di dalam blog anda, berikut ini adalah tutorialnya.

Cara Membuat dan Memasang Pre Code Keren :

1. Masuk ke blogger.com
2. Masuk ke menu Template >> edit HTML
3. Masukkan kode CSS dibawah ini sebelum kode ]]></b:skin> atau kode </style>

/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}
pre.code {
    margin: 20px 25px;
    max-height: 500px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}
pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}
pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}
pre:hover::after {
    opacity: 0;
    visibility: visible;
}
pre.code-css code {
    color: #0288d1;
}
pre.code-html code {
    color: #558b2f;
}
pre.code-javascript code {
    color: #f57c00;
}
pre.code-jquery code {
    color: #78909c;
}

4. Kemudian masukkan kode Javascript dibawah ini dan letakkan sebelum tag </body>


<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
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>

5. Setelah kedua diatas terpasang, simpanlah template kalian
6. Untuk mangaktifkannya, dalam pembuatan artikel kalian harus menggunakan kode pemanggil seperti di bawah ini kedalam postingan kalian :


<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Ubahlah Kode Warna background: #fff; untuk mengganti Background
Ubahlah max-height: 500px; untuk mengganti ukuran tinggi yang di Inginkan
Demikianlah postingan dari Blog Mang Otep tentang Cara Membuat dan Memasang Pre Code Keren pada blogspot, semoga bisa bermanfaat. Jika menyukai blog Mang Otep kalian bisa klik like, share, and subscribe untuk mendapatkan artikel terbaru melalui email anda.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments