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:"Tổng Lượt Xem ";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:"\f06e";}
.counts.post2:before {content:"\f044";}
.counts.comment:before {content:"\f0e6";}
#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'/>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.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
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'>và sau đó các bạn thay thế nó bằng đoạn code này
<b:includable id='main'>
<b:if cond='data:title != ""'><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 + "_content"' 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 + "_sparkline"' height='30' width='75'/>
</b:if>
<span expr:class='"counter-wrapper " + (data:showGraphicalCounter ? "graph-counter-wrapper" : "text-counter-wrapper")' expr:id='data:widget.instanceId + "_totalCount"'>
</span>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='Stats1' locked='false' title='' type='Stats'>và nhấn lưu chủ đề thế là xong.
<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 != ""'><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 + "_content"' 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 + "_sparkline"' height='30' width='75'/>
</b:if>
<span expr:class='"counter-wrapper " + (data:showGraphicalCounter ? "graph-counter-wrapper" : "text-counter-wrapper")' expr:id='data:widget.instanceId + "_totalCount"'>
</span>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
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.
Tags:
Thủ Thuật Blogspot
cái này em đang cần nè
mà sao thêm nó không đổi anh à
giờ em thêm nó chả hiện @@
www.quocbaoblog.ooo nó còn không hiện trên sidebar luôn á anh
hay đó a ơi
Thanks
k thành công
cái tổng lượt xem à anh? em dag cần
hóng lâu lém rùi
Anti fan chào blog :V
Anti fan chào blogx2
cho hiển thị ngoài trang chủ nhiều bài chút
Quá dữ luôn
Nhận xét này đã bị quản trị viên blog xóa.