Cara Membuat Tombol Copy To Clipboard di Blog - KodeRian

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Cara Membuat Tombol Copy To Clipboard di Blog" memberikan sebuah tanda berupa link atau tautan url artikel yang sedang dibaca oleh pengunjung dan dapat dibagikan dengan berupa url langsung dan ini akan otomatis berdasarkan artikel yang pengunjung baca.

Hal ini saya tambahkan diblog yang satunya lagi yaitu malestea.com dan terdapat setelah tombol share akan terlihat sebuah url yang bisa kalian copy dan dipaste untuk dibagikan ke sebuah Grub, forum dsb.

Ini juga dapat menarik bagi para pembaca apalagi jika tombol share yang di inginkan tidak ada kita memiliki sebuah opsi untuk dibagikan secara manual dengan berupa tautan langsung yang akan mengarah ke website kita dengan Copy To Clipboard ini.

Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini

Cara Menghapus Komentar Link Aktif di Blog

1. Buka Blogger
2. Klik Tema > Klik "Edit HTML"
3. Tambahkan kode berikut tepat diatas kode </body>

<script> 
$(document).ready(function () {
    $('.permalink .copy').on('click', function () {
        $('#copy-link').select(), document.execCommand('copy')
    })
})
</script>

4. Tambahkan kode berikut tepat diatas kode </style>

.permalink {position: relative;z-index: 1;display: flex;margin-top: 25px;}
#copy-link {display: block;background: #1c2733;border: 0;color: #fefefe;font: 15px "Roboto", "Helvetica", "Arial", sans-serif;letter-spacing: 0.3px;padding: 12px 34px 12px 10px;height: 45px;width: 100%;margin-bottom: 15px;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius: 10px;-webkit-transition: all 300ms ease;transition: all 300ms ease;outline: none;}
.permalink > .copy {position: absolute;right: 10px;top: 10px;color: #fefefe;cursor: pointer;}
.permalink > .copy > svg {width: 20px;height: 18px;fill: currentColor;}

5. Kemudian tambahkan kode pemanggilnya, kalian bisa tambahkan kodenya setelah tombol share

<div class="permalink">
<input id="copy-link" name="shortlink" readonly="" type="text" expr:value="data:blog.url">
<span class="copy">
<svg id="copy" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.000000, 2.000000)"><path d="M13.7467018,-4.61852778e-14 C17.5901495,-4.61852778e-14 20,2.39226033 20,6.25329815 L20,6.25329815 L20,8.57519789 L19.9930149,8.67902713 C19.9423479,9.05250791 19.622205,9.34036939 19.2348285,9.34036939 L19.2348285,9.34036939 L19.2260334,9.34036939 L19.1052038,9.33069252 C18.9464135,9.30504163 18.7987699,9.22918985 18.6848781,9.1126494 C18.5425134,8.96697383 18.46492,8.77003645 18.469657,8.56640281 L18.469657,8.56640281 L18.469657,6.25329815 C18.469657,3.21020229 16.7897977,1.53034301 13.7467018,1.53034301 L13.7467018,1.53034301 L6.25329815,1.53034301 C3.20140721,1.53034301 1.53034301,3.21020229 1.53034301,6.25329815 L1.53034301,6.25329815 L1.53034301,13.7554969 C1.53034301,16.7985928 3.21020229,18.469657 6.25329815,18.469657 L6.25329815,18.469657 L13.7467018,18.469657 C16.7985928,18.469657 18.469657,16.7897977 18.469657,13.7554969 C18.469657,13.3329044 18.812236,12.9903255 19.2348285,12.9903255 C19.657421,12.9903255 20,13.3329044 20,13.7554969 C20,17.6077397 17.6077397,20 13.7554969,20 L13.7554969,20 L6.25329815,20 C2.39226033,20 1.0658141e-14,17.6077397 1.0658141e-14,13.7554969 L1.0658141e-14,13.7554969 L1.0658141e-14,6.25329815 C1.0658141e-14,2.39226033 2.39226033,-4.61852778e-14 6.25329815,-4.61852778e-14 L6.25329815,-4.61852778e-14 Z M5.75197889,7.55496922 C5.95495612,7.56184761 6.14687208,7.64913852 6.28544665,7.79761127 C6.42402122,7.94608402 6.49788492,8.14355704 6.49076517,8.34652595 L6.49076517,8.34652595 L6.49076517,14.7405453 C6.47619301,15.1631378 6.121801,15.4939037 5.69920844,15.4793316 C5.27661589,15.4647594 4.94585001,15.1103674 4.96042216,14.6877748 L4.96042216,14.6877748 L4.96042216,8.28496042 L4.97405581,8.16530218 C5.0047359,8.00845634 5.08458828,7.8642268 5.20358863,7.75448204 C5.35233906,7.61730108 5.54985383,7.54544217 5.75197889,7.55496922 Z M10.0351803,4.55584872 C10.4577729,4.55584872 10.8003518,4.89842768 10.8003518,5.32102023 L10.8003518,5.32102023 L10.8003518,14.6965699 C10.8003518,15.1191625 10.4577729,15.4617414 10.0351803,15.4617414 C9.61258775,15.4617414 9.2700088,15.1191625 9.2700088,14.6965699 L9.2700088,14.6965699 L9.2700088,5.32102023 C9.2700088,4.89842768 9.61258775,4.55584872 10.0351803,4.55584872 Z M14.2744063,10.9322779 C14.6969989,10.9322779 15.0395778,11.2748569 15.0395778,11.6974494 L15.0395778,11.6974494 L15.0395778,14.6877748 C15.0395778,15.1103674 14.6969989,15.4529463 14.2744063,15.4529463 C13.8518138,15.4529463 13.5092348,15.1103674 13.5092348,14.6877748 L13.5092348,14.6877748 L13.5092348,11.6974494 C13.5092348,11.2748569 13.8518138,10.9322779 14.2744063,10.9322779 Z"></path></g></svg>
</span>
</div>

6. Simpan Tema

7. Tinggal lihat hasilnya

Kode yang saya tandai merah bisa dirubah sesuai warna background yang kalian inginkan sendiri..

See the Pen Create Button Copy To Clipboard in Blogger by Rian_kuno (@rian_kuno) on CodePen.

Bagaimana hasilnya ? pastinya sama dengan yang di "Artikel" ini yahh :3

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#