Cách Tạo Khung Chứa Code Đẹp Mắt Bằng CSS Cho Blogspot

Thảo luận trong 'Tổng Hợp' bắt đầu bởi Pussy, Tháng 5 25, 2018.

  1. Pussy

    Pussy New Member

    Tham gia ngày:
    Thg 3 21, 2016
    Bài viết:
    498
    Xem: 59
    Nếu bạn cảm thấy hay, hãy chia sẻ để ủng hộ tác giả, xin cám ơn
    I. CÁC BƯỚC TIẾN HÀNH

    Bước 1: Đăng nhập vào trang quản lý Blogger

    Bước 2: Chọn Mẫu ---> Tìm (Ctrl + F) thẻ ]]></b:skin>trong mẫu

    Bước 3: Kích đúp chuột để sao chép code dưới và dán vào trên thẻ ]]></b:skin>

    Mã:
    .post blockquote{margin:10px 0!important;border:2px solid #6aafa3!important;border-left:none!important;overflow:auto!important;text-align:left!important;max-height:250px!important;background:#fff url(http://4.bp.blogspot.com/-NHPNl46OnWs/WWxhyFxNE5I/AAAAAAAAAno/pP058D4foD4AOuxjNo_g-Dz9b3cp6skjwCK4BGAYYCw/s1600/Untitled.png)!important;background-repeat:no-repeat!important;padding:15px 20px 15px 35px!important;color:#000000!important;user-select:all}
    Bước 4: Lưu

    II. CÁCH THỨC SỬ DỤNG:


    Bước 1: Bôi đen đoạn code cần copy

    Bước 2: Chọn biểu tượng "Trích dẫn" trên thanh công cụ trong giao diện viết bài của blogger

    [​IMG]

    Chỉ đơn giản vậy thôi, chúc các bạn thành công!
     
    Last edited by a moderator: Thg 6 17, 2018
  2. Đang tải...
  3. Wall-E

    Wall-E Moderator

    Tham gia ngày:
    Thg 6 26, 2016
    Bài viết:
    2,280
    Nếu bạn cảm thấy hay, hãy chia sẻ để ủng hộ tác giả, xin cám ơn
    Tạo khung chứa code độc đáo bằng CSS phần 2

    Bước 1: Đăng nhập vào trang quản lý Blogger
    Bước 2: Chọn Mẫu ---> Tìm (Ctrl + F) thẻ ]]></b:skin>trong mẫu
    Bước 3: Kích đúp chuột để sao chép code dưới và dán vào trên thẻ ]]></b:skin>

    Mã:
    .codeHeader{background-color:#f5f5f5;color:#707070;border:1px solid #e0e0e0;text-align:left;margin-bottom:-15px;padding:2px}.copyButton{background:0;border:0;border-right:1px solid #e0e0e0;font-size:14px;cursor:pointer;outline:0}pre.code{color:black;display:block;background-color:#f5f5f5;max-height:400px;font-size:14px;overflow:auto;text-align:left;border:1px solid #e0e0e0;line-height:23px;padding:10px 20px}
    Bước 4: Tìm </head> và dán code dưới đây vào trước </head>

    Mã:
    <script type='text/javascript'>jQuery(function($) {var copyCommandSupported = document.queryCommandSupported(&#39;copy&#39;);$(&#39;.copyButton&#39;).click(function() {
    var preElement = $(&#39;pre.code&#39;)[0];
    copyToClipboard(preElement, showSuccessMsg);
    });
    function showSuccessMsg() {
    $(&#39;#successMsg&#39;).finish().fadeIn(30).fadeOut(1000);
    }
    function copyToClipboard(element, successCallback) {
    selectText(element);
    var succeeded;
    try {
    succeeded = document.execCommand(&#39;copy&#39;);
    } catch (e) {
    succeeded = false;
    }
    if (succeeded &amp;&amp; typeof(successCallback) === &#39;function&#39;) {
    successCallback();
    }
    deselect(element);
    }
    function selectText(element) {
    if (/INPUT|TEXTAREA/i.test(element.tagName)) {
    element.focus();
    if (element.setSelectionRange) {
    element.setSelectionRange(0, element.value.length);
    } else {
    element.select();
    }
    return;
    }
    var rangeObj, selection;
    if (document.createRange) {
    rangeObj = document.createRange();
    rangeObj.selectNodeContents(element);
    selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(rangeObj);
    } else if (document.body.createTextRange) {
    rangeObj = document.body.createTextRange();
    rangeObj.moveToElementText(element);
    rangeObj.select();
    }
    }
    function deselect(element) {
    if (element &amp;&amp; /INPUT|TEXTAREA/i.test(element.tagName)) {
    if (&#39;selectionStart&#39; in element) {
    element.selectionEnd = element.selectionStart;
    }
    element.blur();
    }
    if (window.getSelection) {
    window.getSelection().removeAllRanges();
    } else if (document.selection) {
    document.selection.empty();
    }
    }
    });
    </script>
    II. CÁCH THỨC SỬ DỤNG:

    Bước 1: Viết bài như bình thường.

    Bước 2: Nếu muốn đưa code vào trong khung chứa code thì làm các bước như sau:

    Chuyển qua khung viết bài bằng HTML

    [​IMG]

    Copy code dưới dán vào phần cần hiền thị khung chứa code---> thay từ "NỘI DUNG" bằng code cần hiển thị.

    Mã:
    <div class="codeHeader"><button class="copyButton" type="button"><i class="fa fa-files-o"></i> Copy</button><span id="successMsg" style="display: none;">Copied!</span></div><pre class="code">NỘI DUNG</pre>
    Lưu lại.

    Chỉ đơn giản vậy thôi, chúc các bạn thành công!
     
Trả lời qua Facebook

Chia sẻ trang này