Menambahkan Jquery Clipboard Pada Syntax Highlighter

Syntax Highlighter Memang berguna untuk memastikan pengunjung untuk tahu jenis kode apa yang sedang kita tulis dalam postingan kita. Mungkin dari sebagian kalian sudah tahu semua kegunaan Syntax Highlighter, Ya Syntax Highlighter Sekarang Sudah Banyak brand yang Di gunakan seperti Prism,Crayon,Highlight dan Masih Banyak Lagi. Dan Kini saya ingin berbagi tutorial bagaimana cara menambahkan Tombol Copy To Clipboard Button menggunakan JQUERY . Oke langsung saja .

Step 1

Buka draft.blogger.com lalu Edit HTML. Dan kita Tambahkan CSS di bawah ini sebelum tag </Head> .

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Clipboard Button */
.copycode{transition:all 200ms ease-in}
.copycode{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}
.copycode{position:absolute;display:inline-block;padding:6px 12px;font-size:13px;font-weight:bold;line-height:20px;color:#333;opacity:0;right:8px;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#eee;background-image:linear-gradient(#fcfcfc,#eee);border:1px solid #d5d5d5;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}
.copycode:hover{background-color:#dcdcdc;background-image:none;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)}
/* use opacity:1; for more visible */
pre:hover .copycode{opacity:1}
</style>
</b:if>

Step 2

Letakan kode Di bawah sebelum tag </body> .

<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
//<![CDATA[
// TO DO
$(document).ready(function() {
var e = $(".post-body pre code"),
      l = "<button class='copycode'>Copy</button>";
    e.before(l);
});
(function($){
$.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand("Copy");
    }
}
$.fn.removeRange = function(){
 if (window.getSelection) {
    if (window.getSelection().empty) {
            window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {
            window.getSelection().removeAllRanges();
     }
    } else if (document.selection) {
           document.selection.empty();
  }
 }
})(jQuery);
$(document).ready(function() {
  $(".copycode").click(function() {
    var e = $(this).parent().find('code'),
        l = $(this),
        c ="Copied",
        d = l.text();
     e.selectText();
     l.html(c);
   setTimeout(function(){
     l.html(d);
   e.removeRange();
   },1000)
  });
});
//]]>
</script>
</b:if>

Lalu Save Template.
Nah sekarang coba lihat hasilnya.
oh iya untuk memastikan kode terpasang dengan benar , coba kalian buka postingan yang terdapat Syntax Highlighter.

RESULT

Mohon maaf apabila ada kesalahan . kalian bisa memberikan feedback langsung kepada saya pada kolom komentar. Terima kasih

Go to Link