Xin chào tất cả các bạn hôm nay mình xin hướng dẫn các bạn tạo tiện ích thống kê đẹp mắt cho blogger cực đơn giản toàn bộ code mình lấy bên toishare về để edit lại và chia sẽ cho các bạn mong các bạn ủng hộ blog.
HƯỚNG DẪN CÁCH LÀM:
Bước 1: Để tạo widget này các bạn vào Bố cục -> Thêm tiện ích -> Kéo xuống dưới chọn Thống kê blog và chọn kiểu 1 nhéBước 2: Tìm đoạn id='Stats1' và thay toàn bộ widget của id='Stats1' thành đoạn code bên dưới
<b:widget id='Stats1' locked='false' title='' type='Stats' version='1'> <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'>false</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'> <!-- Add the bg color to the header using any of the bg-* classes --> <div class='aubout-admin'> <div class='user1'> <a href='https://plus.google.com/u/0/114190850184370024491' rel='nofollow' target='_blank' title='Lê Bá Long Blog'> <img alt='Việt Blogger' src='https://i.imgur.com/KVGfn7v.jpg'/> <span class='verified-user-icon'> <svg focusable='false' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'> <path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/> </svg> </span> </a></div> <!-- /.widget-user-image --> <div class='admin-1'> <h3 class='admin-username'>Lê Quang Thìn</h3> <h5 class='admin-desc'><i class='far fa-gem'/> Designer and Developer <i class='far fa-gem'/></h5> </div> </div> <!-- 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")'><a expr:id='data:widget.instanceId + "_totalCount"'/></span> <b:include name='quickedit'/> </div> </div><script type='text/javascript'> function postCount(json){ document.write("<span class='counts post2'> Tổng bài viết "); var count = json.feed.openSearch$totalResults.$t; document.write("<span class='count all-posts'>" + count + "</span>"); document.write("</span>") } function numberOfComments(json){ document.write("<span class='counts comment2'> Tổng nhận xét "); var count = json.feed.openSearch$totalResults.$t; document.write("<span class='count all-comments'>" + count + "</span>"); document.write("</span>") } </script><script src='/feeds/posts/default?alt=json-in-script&max-results=0&callback=postCount' type='text/javascript'/><script src='/feeds/comments/default?alt=json-in-script&max-results=0&callback=numberOfComments'/></b:includable> </b:widget>
Bước 3: Tìm đoạn ]]></b:skin> và dán toàn bộ đoạn css bên dưới lên nó nhé
#Stats1{border:0!important;box-shadow:0 1px 1px rgba(0,0,0,.1);border-radius:3px}#Stats1 .widget-content{padding:0!important}.aubout-admin{background-color:#464646;color:#fff;padding:20px;border-top-right-radius:3px;border-top-left-radius:3px;height:auto}.admin-image img{width:85px;height:auto;float:left;border-radius:50%;left:30px}.admin-username,.admin-desc{margin-left:0}.admin-username{margin-top:5px;margin-bottom:5px;font-size:24px;font-weight:600;font-family: Roboto Condensed; text-transform: uppercase;margin-left: 95px;}.admin-desc{margin-left: 80px;;margin-top:0;font-size:14px;font-weight:300}#Stats1{background:#fff.Stats .counter-wrapper!important;padding:0!important}a#Stats1_totalCount{float:right;background:#dd4b39;width:auto;line-height:22px;color:#fff;padding:0 10px;border-radius:20px;margin:10px;font-size:13px;font-weight:600}.Stats .counter-wrapper{height:43px;text-align:right;font-weight:400;line-height:41px;color:#333;font-size:16px;border-bottom:1px solid #f4f4f4;padding:0 0 0 10px}.Stats .counter-wrapper:after{content:"Tổng lượt xem ";float:left;text-align:left;font-size:16px;color:#333}.counts{display:inline-block;font-size:16px;line-height:20px;color:#333;border-bottom:1px solid #f4f4f4;padding:10px}.Stats .counter-wrapper,.counts{width:100%;box-sizing:border-box}.counts:last-child{border:0}.counts .count{display:inline-block;font-size:13px;font-weight:600;vertical-align:top;direction:ltr;float:right;color:#fff;width:40px;text-align:center;line-height:22px;border-radius:16px}.counts:hover .titles:before{color:#333!important;border-radius:2px;border-color:rgba(255,255,255,.1)}.post 2{margin-bottom:10px}.all-posts{background:#00a65a}.all-comments{background:#00c0ef}span.counter-wrapper:hover,span.counts:hover{color:#444;background:#f7f7f7;cursor:pointer}.user1 a { display: block; color: unset;}.user1 img { width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12);}.user1 .verified-user-icon { bottom: 9px; position: absolute; right: 0; display: inline-block; height: 14px; width: 14px;}.user1 .verified-user-icon svg { display: block; height: 100%; width: 100%;}.user1 .verified-user-icon svg path { fill: #4285F4; paint-order: stroke; stroke-width: 3px; stroke: #ffffff;}.user1 { display: inline-block; height: 96px; width: 96px; position: relative;margin-left: 120px;}.user1 img { border: 4px solid rgba(255, 255, 255, 0.12);}.user1 .verified-user-icon { bottom: 38px; position: absolute; right: -13px; display: inline-block; height: 24px; width: 24px;}
view-source: toishare.net
edit by: lebalongblog
