Cara Memasang Simple Pre Code dengan Font Awesome

label
label
label
Cara Memasang Simple Pre Code di Blog
Cara Memasang Simple Pre Code dengan Font Awesome - Sebagian dari teman-teman blogger khususnya yang suka berbagi tutorial penerapan kode baik itu HTML, CSS, Javascript, jQuery dan lainnya, pasti sudah tidak asing lagi dengan yang namanya Simple Pre Code.

Simple Pre Code biasanya digunakan sebagai pengganti Blockquote untuk menuliskan kode supaya terlihat lebih rapih. Banyak blogger yang menggunakan pre code karena dinilai lebih SEO Friendly. Namun untuk menerapkan pre code kedalam postingan, biasanya kamu harus menerapkan banyak kode yang mengakibatkan loading blog menjadi lambat.

Jangan khawatir, Simple Pre Code yang saya bagikan ini dijamin tidak akan mempengaruhi loading blog. Selain itu, pre code ini terlihat profesional dengan tambahan Font Awesome. Pre code ini juga dilengkapi dengan fitur Seleksi, sehingga pengunjung bisa dengan mudah copy paste kode dengan klik dua kali pada pre code. Lihat demo nya dibawah ini.

Cara Memasang Simple Pre Code


Berhubung pre code ini memakai Font Awesome versi 4.3.0, maka pertama kita harus memasang Font Awesome pada blog.
  • Masuk ke Dasbor Blogger lalu klik pada Template - Edit HTML.
  • Kemudian copy kode dibawah ini dan pastekan dibawah kode <head>.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Kalau di template kamu sudah terpasang Font Awesome, jangan menambahkan kode di atas.

  • Setelah itu copy kode dibawah ini dan pastekan sebelum kode ]]></b:skin>.
 
/* CSS Pre Code */
pre {
    background: #444444;
    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: 80%;
    color: #3C99F9;
    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.css code {
    color: #4899CE;
}
pre.html code {
    color: #EF662A;
}
pre.javascript code {
    color: #F4C22B;
}

  • Lalu copy dan paste kode dibawah ini sebelum/diatas kode </body>.

<script type='text/javascript'>
$('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>

  • Terakhir, Simpan Template.
Lalu bagaimana cara menerapkannya di dalam postingan? Nah, saat dalam mode penulisan klik tombol HTML. Kemudian masukkan kode dibawah ini. Pilih salah satu sesuai dengan jenis kode yang ingin ditulis, atau bisa juga masukkan semuanya tergantung banyaknya jenis kode yang ingin kamu bagikan.
<pre class='code html'><label><i class='fa fa-html5 fa-lg'></i> HTML</label><code>
Masukkan kode HTML disini
</code></pre>

<pre class='code css'><label><i class='fa fa-css3 fa-lg'></i> CSS</label><code>
Masukkan kode CSS
</code></pre>

<pre class='code javascript'><label><i class='fa fa-code fa-lg'></i> JS</label><code>
Masukkan kode Javascript
</code></pre>
Jangan lupa, sebelum memasukkan kode yang kamu inginkan kedalam kode pembungkus diatas, kamu wajib mem-parse kode tersebut supaya berhasil muncul dengan baik. Silahkan gunakan halaman parser yang ada di blog ini dibagian menu atau bisa langsung klik link ini.
loading...
Share This :

Related Post

avatar

kelihatannya menarik tuh kak,, izin copy codenya ya....

delete 26/2/17
avatar

Lumayan thanks ya

delete 26/2/17
avatar

dicoba deh gan, kayaknya mantap

delete 26/2/17
avatar

keren banget gan, saya pakai inline css untuk nampilin source code. Karena kebetulan bahas tentang programming. Sekarang mau coba ini saja

delete 26/2/17
avatar

wah bermanfaat gan ane coba dulu

delete 26/2/17
avatar

Terima Kasih gan tutorialnya, saya mau tanya nih mas kalau untuk pengguna wordpress gimana bisa pekek itu jg?

delete 26/2/17
avatar

bagus nih, biar penampilannya tambah menarik.

delete 26/2/17
avatar

Patut dicoba nih..

delete 26/2/17
avatar

wah bagus nih bisa di coba thanks tutornya sob, btw cara bikin emoticon di blog ini juga bole dong di share hehe :D

delete 27/2/17



sentiment_satisfied Emoticon