Tạo widget thống kê đẹp cho Blogspot

Xin chào các bạn. Hôm nay mình sẽ chia sẻ cho các bạn cách làm 1 widget thống kê cho Blogspot khá là đẹp. Widget này được mình lấy từ Theme Tips Plus về và chia sẻ cho các bạn.
Tạo widget thống kê đẹp cho Blogspot - Nguyễn Duy Blog
Hình minh họa

Các bước thực hiện

Bước 1: Truy cập trang quản trị Blogger > Bố cục > Thêm tiện ích HTML/JavaScript.
Bước 2: Dán toàn bộ đoạn code dưới đây vào.
<style> section.widget_info_blog{padding:0!important;overflow:hidden;background:transparent!important;border-radius:3px 3px 0 0!important} .col-widget.so-bai{border-right:1px solid #fff;border-bottom:1px solid #fff} .col-widget.so-cau-hoi{border-bottom:1px solid #fff} .col-widget.so-comment{border-right:1px solid #fff} .logo-widget{background:#7577a9;} .logo-widget a{padding: 10px;display: block; text-align: center; font-size: 18px; text-transform: uppercase; color: #fff!important; font-weight: 500;transition:.35s} .logo-widget img{max-height:80px;border:5px solid #fff;border-radius:50%;margin-top:0px;margin-left:calc(50% - 40px);background:#7577a9;} .info{float:left;width:100%;background:#ddd;min-height:50px;margin-top:-45px;} .col-widget{float:left;width:49.8%;text-align:center;height:35px;line-height:35px;font-size:15px;color:#222;} /* Donate */ .idnthemedonate-wrpicon{display:block;margin:15px auto 5px;position:relative;} .idnthemedonate-wrpicon .extender{width:100%;display:block;} .extender{text-align:center;font-size:16px} .extender .idnthemedonate-icon{display:inline-block;border:0;margin:0;padding:0;width:48.8%} .extender .idnthemedonate-icon a{background:#fff;display:inline-block;font-weight:400;color:#7577a9;line-height:36px;border-radius:3px;font-size:14px;border:1px solid #7577a9;width:100%;transition:initial} .extender .idnthemedonate-icon i{font-family:fontawesome;margin:0 4px 0 0} .idnthemedonate-icon.blogger a:hover,.idnthemedonate-icon.ppal a:hover{background:#7577a9;border-color:transparent;color:#fff;} .extender .idnthemedonate-icon:hover a,.extender .idnthemedonate-icon a:hover{color:#fff;} </style> <div class="logo-widget"> <a href="http://m.me/NgLDuy" target="_blank" title="Liên Hệ Nguyễn Duy Blog"><i class="fa fa-paper-plane-o" aria-hidden="true"></i> Nguyễn Duy Blog</a> <img src="https://lh4.googleusercontent.com/-4gYc24fh_RE/WtX36x5RHdI/AAAAAAAABGM/i9zQG7TPgJkxZO4lXtiiuBNn0JNFFhACgCK4BGAYYCw/s1600/Logo-NguyenDuyBlog-Blogger-Blogspot.png" /> </div> <div class="info"> <div class="col-widget so-bai"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> <script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t, 10)); } </script> <script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> </div> <div class="col-widget so-cau-hoi"> <i class="fa fa-refresh" aria-hidden="true"></i> <script type="text/javascript"> var startTime = new Date(); function currentTime() { var a = Math.floor((new Date() - startTime) / 100) / 10; if (a % 1 == 0) a += ".0"; document.getElementById("endTime").innerHTML = a; } window.onload = function() { clearTimeout(loopTime); } </script> <script type="text/javascript"> document.write('<span id="endTime">0.0</span>'); var loopTime = setInterval("currentTime()", 100); </script> </div> <div class="col-widget so-comment"> <i class="fa fa-comments" aria-hidden="true"></i> <script style="text/javascript"> function numberOfComments(json) { document.write(json.feed.openSearch$totalResults.$t); } </script> <script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script> </div> <div class="col-widget so-tra-loi"> <i class="fa fa-users" aria-hidden="true"></i> 121 </div> </div> <div style="clear:both; margin-top:10px ;"></div> <div class="idnthemedonate-wrpicon"> <ul class="extender"> <li class="idnthemedonate-icon blogger"><a href="https://www.blogger.com/follow-blog.g?blogID=7928173344458320077" target="_blank" title="Follow this site"><i class="fa fa-user"></i> Follow</a></li> <li class="idnthemedonate-icon ppal"><a href="#" target="_blank" title="Donate via Paypal"><i class="fa fa-paypal"></i> Donate</a></li> </ul> </div>
Bước 3: Chỉnh sửa và Lưu lại.

Lời Kết

Các bạn hãy chỉnh sửa lại những thông tin của mình thành thơ tin của các bạn nhé!
VD: + Sửa https://lh4.googleusercontent.com/-4gYc24fh_RE/WtX36x5RHdI/AAAAAAAABGM/i9zQG7TPgJkxZO4lXtiiuBNn0JNFFhACgCK4BGAYYCw/s1600/Logo-NguyenDuyBlog-Blogger-Blogspot.png --> Thành Link Logo của các bạn
+ Đổi mã màu #7577a9 --> Thành mã màu của các bạn...
Chúc các bạn thành công!
Share:

Bình Luận Gần Đây