Cara Membuat scroll box + tombol Copy Keren di blog
Maret 27, 2022
0
Fungsi utama dari scroll box ini yaitu untuk meminimalkan sebuah tampilan teks atau goresan pena semoga terlihat lebih ramping, sehingga tidak terkesan panjang.
Dalam artikel kali ini, saya akan menawarkan cara yang mungkin sanggup kalian lakukan untuk menciptakan Scroll box yang dilengkapi tombol Select All. Untuk lebih jelasnya silahkan kalian
perhatikan langkah - langkah dibawah ini :
1. Silahkan Anda loging ke akun blogger Anda.
2. Masuk ke menu Tema > klik Edit HTML
3. Kemudian cari kode ]]></b:skin> dan letakan kode dibawah ini tepat DIATAS kode tersebut
4. Kode JavaScript scroll box
Selanjutnya Pasang kode JavaScript scroll box dibawah ini DIATAS kode </body>
CSS
.CSSA {
font-size: 22px;
font-weight: 700;
line-height: 1.6em;
margin: 11px 5px 0 0;
background-color: #FF3333;
background-repeat: no-repeat;
background-size: 20px 20px;
border-left: 5px solid #FF3333;
padding: 1px ;
}
::selection {
background-color: #FFFF99;
color: #1d2129;
text-shadow: none;
}
.pre {
width:auto;
height:200px;
overflow-y:scroll;
overflow-x:scroll;
}
.precode{
display: block;
color: #BFBF90;
width:500%;
height:300%;
font-size: 13px;
padding: 10px 15px;
line-height: 1.5em;
white-space: pre;
overflow: auto;
user-select: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
background-color: #292E34;
float:left;
}
.js-textareacopybtn {
float:right;
background-color: #000000;
color: #fff;
cursor: pointer;
font-size: 14px;
padding: 3px 10px 3px 7px;
border: 1px solid #008c5f;
border-radius: 25px;
line-height: 1.7em;
}
- Silahkan ganti kode #FF3333 diatas sesuai dengan kode warna keinginan Anda. (ada 2 buah) ganti semua
4. Kode JavaScript scroll box
Selanjutnya Pasang kode JavaScript scroll box dibawah ini DIATAS kode </body>
JS
<script type='text/javascript'>
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copytextarea = document.querySelector('.precode');
copytextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
</script>
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copytextarea = document.querySelector('.precode');
copytextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
</script>
5. Jika sudah, Klik SIMPAN,
HTML
<div class="CSSA">CSS
<button class="js-textareacopybtn">Select All</button>
<div class="pre" id="css"><textarea class="precode">Isi content anda disini, bisa link, script HTML, tulisan biasa, atau gambar
</textarea> </div>
</div>
7. Jika semua sudah sobat periksa dan diubah sesuai dengan keinginan sobat, silahkan save dan lihat hasilnya. Itulah cara membuat scroll box sederhana di blog versi situs Vhabetha. Semoga bermanfaat.