Cara Membuat Permalink Tombol Copy To Clipboard Untuk Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Permalink Tombol Copy to Clipboard untuk Blog Non AMP agar mempermudah pengunjung dalam mengcopy link artikel kita tanpa perlu meng-share ke sosmed.

Cara ini sudah dibagikan oleh beberapa blog salah satunya kompiajaib, tetapi mereka hanya memberikan tutorial untuk blog AMP, Permalink ini akan mengikuti artikel sesuai dengan kalian bacas secara otomatis merubah permalink sesuai dengan artikel pembaca, tutorial ini sudah diterapkan oleh Eirudo dan kawan-kawannya.

Cara Membuat Permalink Tombol Copy To Clipboard Untuk Blogger

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk kemenu TEMA > klik Edit HTML
3. Silahkan kamu copy kode dibawah ini dan letakkan sesuai dengan selera masing-masing biasanya terletak dibawah Judul.

<div class='permalink'>
<input expr:value='data:blog.url' id='copy-link' name='shortlink' readonly='' type='text'/>
<span class='copy'>
<svg id='copy' viewBox='0 0 488.3 488.3'>
<g>
<path d='M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124                 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124                 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z'></path>
<path d='M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227                 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6                 V38.6C439.65,17.3,422.35,0,401.05,0z'></path>
</g>
</svg>
</span>
</div>

4. Selanjutnya, pastekan kode CSS dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>

input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=url], textarea {
display: block;
background: #f2f2f2;
border: 2px solid #f2f2f2;
color: #494949;
font: 15px "Roboto", "Helvetica", "Arial", sans-serif;
letter-spacing: 0.3px;
padding: 12px 30px;
height: 45px;
width: 100%;
margin-bottom: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 25px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
outline: none;
}
.permalink {
position: relative;
z-index: 1;
display: inline-block;
margin-top: 25px;
}
.permalink input {
display: block;
width: 450px;
text-align: center;
padding-right: 60px;
margin: 0;
}
.permalink .copy {
position: absolute;
right: 20px;
top: 8px;
color: #1a73e8;
font-size: 30px;
width: 20px;
height: 20px;
cursor: pointer;
}
.permalink .copy svg {
width: 20px;
height: 18px;
fill: #1a73e8;
}

5. Langkah terakhir, copy kode JS dibawah ini dan pastekan tepat DIATAS kode </script>

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('p 8=["\\9\\c\\g\\9\\h","\\q\\a\\c\\a\\9\\r","\\s\\9\\b\\d\\e\\t\\c\\g\\f\\h","\\9\\b\\d\\e","\\a\\u\\a\\9\\v\\b\\i\\i\\j\\f\\k","\\b\\f","\\l\\d\\a\\m\\i\\j\\c\\g\\f\\h\\w\\l\\9\\b\\d\\e","\\m\\a\\j\\k\\e"];$(n)[8[7]](o(){$(8[6])[8[5]](8[0],o(){$(8[2])[8[1]](),n[8[4]](8[3])})})',33,33,'||||||||_0x5934|x63|x65|x6F|x6C|x70|x79|x6E|x69|x6B|x6D|x61|x64|x2E|x72|document|function|var|x73|x74|x23|x2D|x78|x43|x20'.split('|'),0,{}))

6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Demo

Bagaimana mudah bukan untuk tutorial Cara Membuat Permalink Tombol Copy to Clipboard untuk Blogger, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini dan untuk demonya kamu bisa cek tombol diatas.