Hướng Dẫn tạo widget thống kê hiệu ứng chuyển màu cực đẹp

Share:
Hướng Dẫn tạo widget thống kê hiệu ứng chuyển màu cực đẹp

Hướng Dẫn tạo widget thống kê hiệu ứng chuyển màu cực đẹp

Hồng Hải đã đăng Thứ Tư, 18 tháng 7, 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ả

Ủng hộ tôi

  • Xem toàn trang
  • Xin chào các bạn, hôm nay mình xin chia sẻ cho các bạn một widget thống kê có hiệu ứng chuyển màu cực đẹp...
    Cách thực hiện
    Bước 1 : thêm code css vào trước</head>
    <style>
    .Stats img {display:none!important;background-image:none;}
    .Stats .counter-wrapper {font: 600 17px Roboto Condensed;width:92%;text-align:right;margin:14px 0px 3px 0;color:#fff;margin-left: 0;-webkit-transition: .3s;}
    .Stats .counter-wrapper:hover {color:#de4676;}
    .Stats .counter-wrapper:after {content:&quot;Tổng Lượt Xem   &quot;;text-transform: uppercase;    font: 600 17px Roboto Condensed;float:left;text-align:left;color:#fff;-webkit-transition: .3s;}
    .Stats .counter-wrapper:hover:after {color:#e45050;}
    .counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
    .counts .count {display:inline-block;font-size:16px;height:30px;
    vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
    .counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
    .counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
    .counter-wrapper.text-counter-wrapper:before, .counts:before {font-weight: 700;
    display:block;background-color:#ffffff;color:#353535;width:32px;height:32px;font-size:18px;line-height:32px;border-radius:36px;margin:-7px 8px 7px 10px;    -webkit-transition: .3s;}
    .counter-wrapper.text-counter-wrapper:hover:before, .counts:hover:before {background:linear-gradient(160deg, #e45050, #de4676);color:#fff;}
    .counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
    .counts.post2:before {content:&quot;\f044&quot;;}
    .counts.comment:before {content:&quot;\f0e6&quot;;}
    #Stats1_content {width:auto;height:auto;background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;;-webkit-transition: .3s;}
    @-webkit-keyframes Gradient {
    0% {
    background-position: 0% 50%
    }
    50% {
    background-position: 100% 50%
    }
    100% {
    background-position: 0% 50%
    }
    }
    @-moz-keyframes Gradient {
    0% {
    background-position: 0% 50%
    }
    50% {
    background-position: 100% 50%
    }
    100% {
    background-position: 0% 50%
    }
    }
    @keyframes Gradient {
    0% {
    background-position: 0% 50%
    }
    50% {
    background-position: 100% 50%
    }
    100% {
    background-position: 0% 50%
    }
    }
    </style>
    Thêm thẻ thư viện vào sau <head> nếu có rồi thì k cần thêm
    <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'/>
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
    Bước 2: các bạn vào phần bố cục của blogger -> thêm tiện ích -> chọn thống kê blog và làm theo như ảnh dưới. 
    Bước 3: Các bạn vào chỉnh sửa html -> chuyển đến tiện ích -> chọn stats1
    Các bạn sẽ thấy đoạn code thống kê
    <b:widget id='Stats1' locked='false' title='Tổng số lượt xem trang' type='Stats' visible='true'>
    <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
    <!-- Counter and image will be injected later via AJAX call. -->
    <b:if cond='data:showSparkline'>
    <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
    </b:if>
    <span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
    </span>
    <b:include name='quickedit'/>
    </div>
    </div>
    </b:includable>
    </b:widget>
    và sau đó các bạn thay thế nó bằng đoạn code này 
    <b:widget id='Stats1' locked='false' title='' type='Stats'>
     <b:widget-settings>
          <b:widget-setting name='showGraphicalCounter'>false</b:widget-setting>
          <b:widget-setting name='showAnimatedCounter'>false</b:widget-setting>
          <b:widget-setting name='showSparkline'>true</b:widget-setting>
          <b:widget-setting name='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting>
          <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
      <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
        <!-- Content is going to be visible when data will be fetched from server. -->
        <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
          <!-- Counter and image will be injected later via AJAX call. -->
          <b:if cond='data:showSparkline'>
            <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
          </b:if>
          <span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
          </span>
          <b:include name='quickedit'/>
        </div>
      </div>
    </b:includable>
      </b:widget>
    và nhấn lưu chủ đề thế là xong.
    Lời Kết
    nếu có gì thắc mắc không hiểu hãy comment bên dưới để mình giải đáp.
    Chúc các bạn thành công.
    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/iIEPcxC.png[/img]

    25 nhận xét:

    1. cái tổng lượt xem à anh? em dag cần

      Trả lờiXóa
    2. cho hiển thị ngoài trang chủ nhiều bài chút

      Trả lờiXóa
    3. Nhận xét này đã bị quản trị viên blog xóa.

      Trả lờiXóa

    Author Image

    Hồng Hải

    Nếu thấy các bài viết trên blog hữu ích đối với bạn thì hãy mời tôi một ly cà phê tại đây nhé. Xin cảm ơn!