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.
![]() |
| Hình minh họa |
Các bước thực hiện
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!


cũng đẹp
Trả lờiXóaTks <3
Xóa- chất chơi
Trả lờiXóaCực chất :v
XóaHình như cái này có rồi -.-
Trả lờiXóaCó rồi mà nhưng em up lại :v
Xóathấy quen quen ông ạ :v tt
Trả lờiXóaa Niệm: ko những quen mà rất là quen :v
XóaCó từ lâu rồi mà giờ chia sẻ lại cũng thấy vui :)
XóaĐẹp mà quen vãi
Trả lờiXóaTks <3 tất nhiên là quen rồi :v
XóaĐẹp đấy < 3
Trả lờiXóaTks nhé <3
Xóa