 |
| Hướng Dẫn Tạo Khung Chứa Code Kèm Nút Copy Cho Blogspot |
Giới thiệu
Xin chào các bạn! chào mừng các bạn đã đến với bài viết tiếp theo của mình, ở bài viết hôm nay mình sẽ hướng dẫn các bạn cách tạo khung chứa Code kèm nút Copy cực đẹp cho Blogspot. Cách làm rất đơn giản các bạn cùng xem hướng dẫn chi tiết bên dưới nhé.
Hướng dẫn
Đầu tiên các bạn Copy đoạn code dưới đây và dán vào trước thẻ ]]></b:skin>
CSS/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #fdfcfc;
}
.text-boxes{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 30px;
margin-bottom: 60px;
}
.text-boxes .text-box{
height: 380px;
max-width: 660px;
width: 100%;
margin: 55px 0;
}
.text-boxes .text-box .topic{
font-size: 18px;
font-weight: 600;
color: #265df2;
margin: 4px;
}
.text-boxes .text-box textarea{
height: 100%;
width: 100%;
padding: 30px;
font-size: 15px;
font-weight: 400;
outline: none;
border: 1px solid #265df2;
border-radius: 8px;
background: #e7edfe;
}
.text-box textarea::-webkit-scrollbar{
display: none;
}
.text-boxes .text-box button{
height: 45px;
width: 155px;
color: #fff;
background: #265df2;
outline: none;
border: none;
border-radius: 8px;
font-size: 17px;
font-weight: 400;
margin: 8px 0;
cursor: pointer;
transition: all 0.4s ease;
}
.text-boxes .text-box button:hover{
background: #0e4bf1;
}
@media (max-width: 400px) {
.text-boxes .text-box button{
width: 100%;
}
}
/* ///// */
HTML<!DOCTYPE html>
<!-- Designined by CodingLab | www.youtube.com/codinglabyt -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Copy Code To Clipboard | CodingLab </title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="text-boxes">
<div class="text-box HTMLBox">
<div class="topic">HTML Code:</div>
<textarea id="HTMLBox" readonly >
Add HTML Code Here
</textarea>
<button id="HTMLButton">Copy Codes</button>
</div>
<div class="text-box CSSBox">
<div class="topic">CSS Code:</div>
<textarea id="CSSBox" readonly >
Add CSS codes Here
</textarea>
<button id="CSSButton">Copy Codes</button>
</div>
<div class="text-box JSBox">
<div class="topic">JavaScript Code:</div>
<textarea id="JSBox" readonly >
Add JavaScript Code here
</textarea>
<button id="JSButton">Copy Codes</button>
</div>
</div>
<script>
// HTML BOx JS Code
let HTMLBox = document.getElementById("HTMLBox");
let HTMLButton = document.getElementById("HTMLButton");
HTMLButton.onclick = function() {
HTMLBox.select();
document.execCommand("copy");
HTMLButton.innerText = "Codes Copied"
}
// CSS Box Js Code
let CSSBox = document.getElementById("CSSBox");
let CSSButton = document.getElementById("CSSButton");
CSSButton.onclick = function() {
CSSBox.select();
document.execCommand("copy");
CSSButton.innerText = "Codes Copied"
}
// JavaScript BOx JS Code
let JSBox = document.getElementById("JSBox");
let JSButton = document.getElementById("JSButton");
JSButton.onclick = function() {
JSBox.select();
document.execCommand("copy");
JSButton.innerText = "Codes Copied"
}
</script>
Lời kết
Vậy là vừa rồi mình đã hướng dẫn các bạn cách tạo khung chứa code cho Blogspot. Nếu thấy bài viết có ích hãy chia sẻ đến bạn bè nhé.
