Tạo tiện ích chuyển đổi màu sắc tùy thích cho blogspot

Share:
Tạo tiện ích chuyển đổi màu sắc tùy thích cho blogspot

Tạo tiện ích chuyển đổi màu sắc tùy thích cho blogspot

Nguyễn Hoài Nam ✓ đã đăng Thứ Ba, 27 tháng 11, 2018
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Bản Quyền

  • Xem toàn trang
  •                                                                                                              Nguồn : Toishare.net
    Chào các bạn, theo yêu cầu của 1 số blogger thì hôm nay mình sẽ viết bài chia sẻ thủ thuật chuyển đổi màu sắc tùy thích cho blog.

    Ưu điểm của tiện ích này là: Gọn - nhẹ, dễ sử dụng.
    Khuyết điểm là không lưu cache.
    Và đây là cách để thêm nó vào blog của bạn.

    HƯỚNG DẪN CÁCH LÀM:

    Bước 1: Vào trang chỉnh sửa HTML và thêm đoạn code bên dưới vào chỗ bạn muốn nó hiển thị
    <!-- Change color -->
    <div class='changecolor'>
    <a data-color='#ff5722' href='#'></a>
    <a data-color='#FFCC00' href='#'></a>
    <a data-color='#EE145B' href='#'></a>
    <a data-color='#00BFF3' href='#'></a>
    <a data-color='#8DC73F' href='#'></a>
    <a data-color='#603913' href='#'></a>
    <a data-color='#F26522' href='#'></a>
    <a data-color='#9E0039' href='#'></a>
    <a data-color='#004A80' href='#'></a>
    <a data-color='#197B30' href='#'></a>
    <a data-color='#333333' href='#'></a>
    <a data-color='#583a63' href='#'></a>
    <a data-color='#043e50' href='#'></a>
    <a data-color='#3c3e4f' href='#'></a>
    <a data-color='#344a3d' href='#'></a>
    <a data-color='#352b4e' href='#'></a>
    <a data-color='#344a3d' href='#'></a>
    <a data-color='#189dfe' href='#'></a>
    <a data-color='#3b5998' href='#'></a>
    <a data-color='#00a680' href='#'></a>
    </div>
    <!-- End change color -->
    
    Bước 2: Tiếp đến tìm thẻ ]]></b:skin> và dán đoạn css bên dưới lên trên thẻ vừa tìm
    /* Change color */
    .changecolor{width:100%;float:left;box-sizing:border-box;margin-bottom:5px}
    .changecolor a{width:26px;height:26px;border:2px solid rgba(0, 0, 0, 0.2784313725490196);line-height:0;margin:0 8px 8px 0;display:block;float:left;background-color:#555;border-radius:100%;text-align:center}
    .changecolor a:nth-child(10),.changecolor a:nth-child(20){margin-right:0px}
    .changecolor a:focus{border:2px solid rgba(0, 0, 0, 0.45)}
    .changecolor a:focus:before{content:"\f00c";font-family:'FontAwesome';font-size:12px;color:#fff;line-height:23px}
    
    Bước 3: Tìm </body> và dán đoạn js bên dưới lên trên nó
    <!-- Changecolor -->
    <script type='text/javascript'> 
    //<![CDATA[
    $(".changecolor a").each(function () {
        var o = $(this).attr("data-color");
        $(this).css("background-color", o), $(this).click(function () {
            return $(".code-doi-mau,#code-doi-mau").css("color", o),
    $(".code-doi-nen,#code-doi-nen").css("background-color", o), $(".code-doi-vien,#code-doi-vien").css("border-color", o), $(".code-giu-nguyen-khi-chuyen-mau").hover(function () {
                $(this).css("background-color", o)
            }, function () {
                $(this).css("background-color", "#f4f4f4")
            }), $(".chua-them").hover(function () {
                $(this).css("background-color", o)
            }, function () {
                $(this).css("border-color", "#eee")
            }), $(".chua-them").each(function () {
                $(this).css("border-color", o)
            }, function () {
                $(this).css("color", "#fff!important")
            }), $(".chua-them").hover(function () {
                $(this).css("color", o)
            }, function () {
                $(this).css("background-color", "#fff")
            }), !1
        })
    });
    //]]>
    </script>
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/xvhDr24.png[/img]

    13 nhận xét:

    Nguyen Hoai Nam

    Tất cả bài đăng trên website đều thuộc bản quyền về Star Nam IT, chỉ được phát hành lại nội dung từ website này khi có sự đồng ý bằng văn bản của admin