Membuat atau memasang tombol copy pada blogger tentunya pada bagian tertentu seperti pada kolom post syntax highlighter untuk mempermudah pengunjung menyalin sebuah kode yang unik ,, kode html , kode css , kode javascript,, jelas kode tersebut sangat susah untuk di tulis secara manual.sehingga kita membutuhkan sebuah kode penyalinan otomatis untuk ditampilkan pada postingan blogger.seperti tombol copied , atau double click to copy.
Dengan adanya tombol copied pada kolom syntax highlighter ini sangat berguna , selain itu juga bisa membuat tampilan blogger menjadi semakin menarik.
Pada artikel sebelumnya "westoiku.com" juga sudah pernah membuat postingan tentang cara membuat syntax highlighter berwarna dan bisa copy paste. Jika sobat ingin mencarinya silahkan tekan tombol search di kolom pencarian pada website ini.
Cara Memasang Tombol Copy Di Syntax Highlighter versi standar dengan menggunakan CSS sudah pernah di tulis pada postingan "westoiku.com" Namun kali ini akan membagikan dengan kode css yang berbeda.
Memasang Double Click To Copy Di Syntax Highlighter.
1. Cari Kode ]]></b:skin> lalu taruh kode ini tepat di atasnya.
/* Copy Code*/
.copyCode span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.copyCode span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .copyCode span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
2. Cari Kode <body> lalu taruh kode ini bawahnya.
/* westoiku */
<div class='copyCode' id='cpCode'/>
Jika template sobat tidak tersedia kode <body> , sila abaikan. Tidak memakai juga nggak apa apa.
3. Cari Kode </body> lalu taruh kode ini tepat diatasnya.
/* westoiku */
<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#cpCode").innerHTML="<span><i class='clipboard'></i>Copied to clipboard!</span>"},!1); /*]]>*/</script>
</b:if>
Klik simpan dan selesai.
Catatan :
Kode ini bisa mengcopy text di dalam syntax highlighter dengan mengetuk dua kali. Seolah olah tidak terjadi apa apa , namun sebenarnya sudah di copied.
Tambahan :
Jika ingin tampilan syntax highlighter menjadi lebih menarik .
Gunakan CSS ini , hapus CSS dari tag pre terlebih dahulu supaya tidak bentrok (jika ada tag pre) pada template anda.
/* Font: Source code, Fira Mono(Latin) by Google */
@font-face {font-family:'Fira Mono'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtgJv7S.woff2) format('woff2';), url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtQIg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Syntax */
pre{background:#000;color:#fff; direction: ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:'Fira Mono', Consolas,Monaco,Lucida Console;display:block;font-size:13px;border-radius:3px;padding:35px 20px 20px; -moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre}
code{display:inline;padding:5px;font-size:13px;border-radius:3px;line-height:inherit;color:#ff0000;background:#f2f3f5;font-family:';Fira Mono', Consolas,Monaco,Lucida Console;}
pre code{background:none;padding:0;display:block;padding:0.5em;overflow-x:auto}
pre::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:#00ff00;font-size:10px;padding:0 10px;z-index:2;line-height:30px}
pre.html::before{content:'.html'}
pre.css::before{content:'.css'}
pre.js::before{content:'.js'}
pre.xml::before{content:'.xml';}
pre:hover::before{content:'Double click to copy | </>'}
pre.html:hover::before{content:'Double click to copy | .html'}
pre.css:hover::before{content:'Double click to copy | .css'}
pre.js:hover::before{content:'Double click to copy | .js'}
pre.xml:hover::before{content:'Double click to copy | .xml'}
DEMO Gambar
Format Penulisan Pada Syntax
/* westoiku */
<pre><code class="html">
isi text disini...
</code></pre>
Tambahkan class pada pre, untuk menyesuaikan dengan kode. Contoh <pre class="css">. Yang tersedia adalah css, html, xml dan js.
Syntax Highlighter Kode Warna.
Jika anda ingin tampilan kode yang berada di dalam syntax highlighter menjadi berwarna campuran. Anda bisa menambahkan kode ini.
/* HLJS */
.hljs-comment, .hljs-code, .hljs-meta, pre i.gray{color:#656e77}
.hljs-name, .hljs-title, .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-selector-id, .hljs-selector-class, .hljs-selector-tag, .hljs-literal, pre i.red{color:#b75501}
.hljs-keyword, .hljs-string, .hljs-type, .hljs-section, .hljs-quote, .hljs-built_in, .hljs-builtin-name, pre i.blue{color:#015692}
.hljs-attribute{} .hljs-params, pre i.green{color:#54790d }
.hljs-number, .hljs-symbol{color:#f15a5a }
.hljs-regexp, .hljs-link{color:#72621d }
.hljs-deletion{background-color:#fef5fa;color:#e51661}
.hljs-addition{background-color:#e8f0fe;color:#272eb5} .hljs-strong{font-weight:bold}
.hljs-code, .hljs-emphasis{font-style:italic}
Post a Comment