Cara menambahkan tombol "Copy Link" pada blogger

Salah satu fitur pada tombol share yang ada pada tema blogger yang baru adalah tombol "copy link". Untuk tema custom jarang ada yang memiliki tombol ini. Mungkin pembuat tema pikir tombol ini gak penting-penting amat sih.

Nah yang belum tahu, fungsi dari tombol ini adalah untuk menyalin url postingan dengan sekali klik saja. Jadi kita gak perlu lagi repot-repot klik kanan lalu copy. Jadinya ya lebih efisien.

Fungsi ini kalau menurut saya juga sih gak terlalu penting. Yah berkaca dari kebiasaan saya browsing saya jarang mengkopi sebuah link artikel dan saya pikir kebanyakan juga pengunjung blog juga seperti itu. 

Kecuali untuk website yang sangat informatif, tombol penyalin url menurut saya sangat penting.

Cara menambahkan tombol "Copy Link" pada blogger

Bagi teman-teman blogger yang yang memasang tema custom dan ingin menambahkan tombol Copy Link pada blognya silahkan simak tutorial berikut ini.

Pertama kita buat markup-nya dulu. Saya akan membuat sebuah kolom yang menujukkan url dari halaman tersebut lalu di bawahnya ada tombol untuk menyalin link.

<div class='copylink clearfloat'> <input class='coparea copbar' expr:value='data:blog.url' id='myInput' readonly='readonly' type='text'/> <button class='copbtn copbar' onclick='myFunction()'>Copy Link</button> </div>

Silahkan salin markup di atas lalu paste di bawah atau di atas kode tombol share blog kalian. Kalau tidak tahu posisinya bisa paste tepat dibawah kode <data:post.body/>

Baca juga: Cara menambahkan postingan instagram ke dalam blog

Berikutnya kita akan menambahkan javascriptnya. Javascript ini saya ambil dari w3schools. Silahkan salin kode javascript berikut ini dan simpan di atas kode </body> lalu simpan tema.

<script>
//<![CDATA[
function myFunction(){var e=document.getElementById("myInput");e.select(),e.setSelectionRange(0,99999),document.execCommand("copy"),alert("Copied the text: "+e.value)}
//]]>
</script>

Langkah terakhir yaitu menambahkan CSSnya. Silahkan  paste kode CSS ini:

.copylink.clearfloat{margin-bottom:30px} .copbar{float:left;box-sizing:border-box;padding:10px;min-height:38px;} .coparea{width:calc(100% - 110px);margin-right:10px;} .copbtn{width:100px;background:$(link.color);color:#fff;border-width:1px;border-color:$(link.color);cursor:pointer}

Silahkan simpan template kalian.

Perlu diingat sebelum memasang kode-kode di atas, backup dulu tema kalian ya. Semoga artikel cara menambahkan tombol copy link pada blogger ini bermanfaat.