Tạo khung chứa code có nút copy to clipboard cho blogger

https://voztheme.blogspot.com/2021/04/tao-khung-chua-code-co-nut-copy-to-clipboard-cho-blogger.html

by voztheme

HTML

<link href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' rel='stylesheet' type='text/css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
  <link href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' rel='stylesheet' type='text/css' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js'></script>
    <script src='https://cdn.rawgit.com/components/bootstrap/3/js/tooltip.js'></script>
        <pre><copy>// Vùng chứa code 1
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    <pre><copy>// Vùng chứa code 2
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    <pre><copy>// Vùng chứa code 3
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    <pre><copy>// Vùng chứa code 4
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    <pre><copy>// Vùng chứa code 5
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>
    <pre><copy>// Vùng chứa code 6
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
</copy></pre>

CSS

.codeHeader {
        background-color: #f5f5f5;
        border: 1px solid #e0e0e0;
        border-bottom: 0;
        text-align: right;
        padding: 6px 0;
    }

    .copy-text {
        font-size: 14px;
        cursor: pointer;
        color: #707070;
        padding: 7px 10px;
        border-left: 1px solid #e0e0e0
    }

    .copy-text:before {
        font-family: "font awesome 5 free";
        content: "\f24d";
        display: inline-block;
        margin-right: 7px
    }

    .copy-text:hover {
        color: #707070;
        background: #ccc
    }

    pre copy {
        display: block;
        background: #f9f9f9;
        max-height: 400px;
        font-size: 14px;
        color: black;
        text-align: left;
        overflow: auto;
        border: 1px solid #d3d6db;
        margin: auto;
        padding: 16px;
        line-height: 21px;
    }
    /* Tooltip 3.3.7 */

    .tooltip {
        position: absolute;
        z-index: 1030;
        display: block;
        font-size: 12px;
        line-height: 1.4;
        opacity: 0;
        filter: alpha(opacity=0);
        visibility: visible
    }

    .tooltip.in {
        opacity: .9;
        filter: alpha(opacity=90)
    }

    .tooltip.top {
        padding: 5px 0;
        margin-top: -3px
    }

    .tooltip.right {
        padding: 0 5px;
        margin-left: 3px
    }

    .tooltip.bottom {
        padding: 5px 0;
        margin-top: 3px
    }

    .tooltip.left {
        padding: 0 5px;
        margin-left: -3px
    }

    .tooltip-inner {
        max-width: 200px;
        padding: 3px 8px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        background-color: #000;
        border-radius: 4px
    }

    .tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid
    }

    .tooltip.top .tooltip-arrow {
        bottom: 0;
        left: 50%;
        margin-left: -5px;
       ...

JavaScript

jQuery(document).ready(function($) {
        jQuery("pre copy").before("<div class='codeHeader'><a class='copy-text' data-clipboard-target='pre copy' data-clipboard-action='copy'>Copy</a></div>");
        $('.copy-text').tooltip({
            trigger: 'click'
        })
    });

    var clipboard = new ClipboardJS(".copy-text", {
        target: function(trigger) {
            return trigger.parentNode.nextElementSibling
        }
    });

    function setTooltip(btn, message) {
        $(btn).tooltip('hide')
            .attr('data-original-title', message)
            .tooltip('show');
    }

    function hideTooltip(btn) {
        setTimeout(function() {
            $(btn).tooltip('hide');
        }, 500);
    }

    clipboard.on('success', function(e) {
        var btn = $(e.trigger);
        setTooltip(btn, 'Copied');
        hideTooltip(btn);
    });

    clipboard.on('error', function(e) {
        var btn = $(e.trigger);
        setTooltip('Failed');
        hideTooltip(btn);
    });