Cara mudah Simple Pre Code dengan Seleksi Di Blog ~ Namikazesites

Halo sobat kali ini saya akan sharing bagaimana cara melakukan simple pre code di blog kalian masing-masing.Bagi sobat yang sering berbagi tutorial blogger tentunya sudah tidak asing lagi tetang penerpan code HTML, CSS atau lain-lain . Dan sebagai wadah menerapkan code-code tersebut pada postingan sobat perlu membungkus kode-kode terbungkus dengan tag pre

Berikut adalh contoh cod HTML yang telah terbungkus tag pre

<pre><code><button>pressme</button></code></pre>

begitulah contoh code yg telah di bungkus oleh tag pre sekarang mari kita buat

Memasang prism Syntax Highligher di Blogger

Nah disii saya akan mencoba sharing scrip sederhana yang bisa sobat terapkan di blog

OK langkah-langkahnya seperti berikut :

1.Buka Blogger > Templates > KLik edit HTML > Simpan code css di bawah ini sebelum code ]]></b:skin> atau </style>

/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    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;
}

2.Langkah berikutnya tambahkan scrip di bawah ini sebelum tag pentup </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>

Scrip diatas berfungsi menyeleksi otomatis jika sobat melakukan doble click pada area yg di bungkus tag pre

3.Langkah berikutnya simpan template anda

Untuk penerapan di postingan silahkan terapkan kode di bawah ini

<pre class='code code-html'><label>HTML</label><code>... code html  yg ingin dalam block ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... kode CSS code yg ingin dalam block ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript code yg ingin dalam block ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery code yg ingin dalam block ...</code></pre>

scrip diatas akan membungkus kode dengan warna putih jika anda ingin merubah warnanya menjadi hitam ganti ccs diatas dengan css di bawah ini:

/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    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 #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    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: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

Demikianlah penerapan simple pr code di postingan blog semoga bermanfaat

sumber : http://www.arlinadzgn.com/2015/04/simple-pre-code-dengan-seleksi.html

About Hudza Armor

Berkomentarlah yang baik,Sopan dan sesuai topik OK.....

Namikazesites

Cara mudah Simple Pre Code dengan Seleksi Di Blog

About Hudza Armor

Related Post