Bảo trợ bởi

Tạo tiện ích thống kê cho Blogspot với CSS cực đẹp

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.

Tạo tiện ích thống kê cho Blogspot với CSS cực đẹp


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-settingname='showGraphicalCounter'>false</b:widget-setting> <b:widget-settingname='showAnimatedCounter'>false</b:widget-setting> <b:widget-settingname='showSparkline'>false</b:widget-setting> <b:widget-settingname='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting> <b:widget-settingname='timeRange'>ALL_TIME</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:ifcond='data:title != &quot;&quot;'><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'> <ahref='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'> <svgfocusable='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. --> <divexpr: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;)'><aexpr:id='data:widget.instanceId + &quot;_totalCount&quot;'/></span> <b:include name='quickedit'/> </div> </div><script type='text/javascript'> function postCount(json){ document.write(&quot;<span class='counts post2'> Tổng bài viết &quot;); var count = json.feed.openSearch$totalResults.$t; document.write(&quot;<span class='count all-posts'>&quot; + count + &quot;</span>&quot;); document.write(&quot;</span>&quot;) } functionnumberOfComments(json){ document.write(&quot;<span class='counts comment2'> Tổng nhận xét &quot;); var count = json.feed.openSearch$totalResults.$t; document.write(&quot;<span class='count all-comments'>&quot; + count + &quot;</span>&quot;); document.write(&quot;</span>&quot;) } </script><script src='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/><scriptsrc='/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;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
Được xuất bản bởi Lê Bá Long IT

Bình luận

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm