Liên Kết Bạn Bè

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

                                                                                                             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>
Star Bình Blog
Nguyễn Hoài Nam
Designer & Developer

Chào các bạn. Với đam mê và sở thích, mình lập nên blog này để lưu trữ những kiến thức, đồng thời cũng chia sẻ những gì mình biết và sưu tầm được tới bạn đọc.

  • Cùng Bình Luận:

    Hiện tại có 13 nhận xét:

    // Điều kiện cho trang và không load trên mobile