Hướng Dẫn tạo widget thống kê hiệu ứng chuyển màu cực đẹp
/ lúc / 25 bình luận
Truy cập Tại đây để xem CV của tôi!
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.

HIỆN ĐANG CÓ 25 bình luận

avatar
Quốc Bảo Blog

cái này em đang cần nè

TRẢ LỜI
avatar
Quốc Bảo Blog

mà sao thêm nó không đổi anh à

TRẢ LỜI
avatar
Thanh Phú IT

hay đó a ơi

TRẢ LỜI

k thành công

TRẢ LỜI

Đã chỉnh sửa lại bài viết nha em

TRẢ LỜI

Đã sửa lại bài viết

TRẢ LỜI
avatar
Nguyễn Xuân Phú

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

TRẢ LỜI
avatar
Quốc Bảo Blog

giờ em thêm nó chả hiện @@

TRẢ LỜI

Demo đi em

TRẢ LỜI
avatar
Quốc Bảo Blog

www.quocbaoblog.ooo nó còn không hiện trên sidebar luôn á anh

TRẢ LỜI

hóng lâu lém rùi

TRẢ LỜI
avatar
Tiến Đức Blog

Anti fan chào blog :V

TRẢ LỜI
avatar
Nguyễn Bảo Linh

Anti fan chào blogx2

TRẢ LỜI

cho hiển thị ngoài trang chủ nhiều bài chút

TRẢ LỜI
avatar
Đức Huy Blog

Quá dữ luôn

TRẢ LỜI

heheeeee

TRẢ LỜI

kẹc antifan

TRẢ LỜI

kẹc antifan x2

TRẢ LỜI

hehehehe

TRẢ LỜI

6 bài là nhiều rồi mà :v

TRẢ LỜI
Bình luận này đã bị quản trị viên xóa. Vui lòng đọc lại nội quy bình luận.
TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.