Tạo Tiện Ích Thống Kê Tuyệt Đẹp Cho Blog

Ở bài trước mình có viết một bài tương tự trên blog của hùng coder rồi các bạn có thể tham khảo bài viết trước trên Blog hùng coder Tại Đây , thì bài này không ngoại lệ , mình cũng viết lại trên blog mình luôn cho tiện , nhằm mục đích lưu trữ lại thôi nhé , thôi không nói dài vòng nữa đi thẳng vấn đề luôn nhé. Hình Minh Họa 

Hướng dẫn thực hiện 

Bước 1 : đăng nhập vô trang quản lý blogger và tìm đến mục Chủ đề => chỉnh sửa html => crtl + F   tìm đến thẻ ]]></b:skin> trong template và chép đoạn css Sau nằm trên nó.

/* starutblog */ section.widget_info_blog{padding:0!important;overflow:hidden;background:transparent!important;border-radius:3px 3px 0 0!important} .feau{height:100px;background:url('http://theneodesign.com/wp-content/uploads/2014/04/2014-04-26-06.32.50-pm.jpg');padding:2px0;text-align:center} .feau h1{background:;font-size:25px;color:#fff;text-align:center} .feau p{font-size:15px;color:#fff;text-align:center;margin-bottom:7px!important} .pms-logo-widget img{max-height:80px;border:5px solid #fff;border-radius:100%;margin-top:-40px;margin-left:calc(50% - 40px);background: #4d90fe;} .pms-logo-widget img:hover{-moz-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-o-transform: rotateY(180deg); transform: rotateY(180deg);} .info{float:left;width:100%;background:#fff;min-height:30px;margin-top:-35px;padding:5px} .col-widget{float:left;width:48%;text-align:center;height:35px;line-height:35px;font-size:18px;color:#333;} /* Butom Follow */ .pms-follow-wrpicon{display:block;margin:15px auto 5px;position:relative;} .pms-follow-wrpicon .extender{width:100%;display:block;} .extender{text-align:center;font-size:16px} .extender .pms-follow-icon{display:inline-block;border:0;margin:0;padding:0;width:48.8%} .extender .pms-follow-icon a{background:#fff;display:inline-block;font-weight:400;color:#006e78;line-height:36px;border-radius:3px;font-size:14px;border:1px solid #006e78;width:100%;transition:initial} .extender .pms-follow-icon i{font-family:fontawesome;margin:0 4px 0 0} .pms-follow-icon.blogger a:hover,.pms-follow-icon.ppal a:hover{background:#006e78;border-color:transparent;color:#fff;} .extender .pms-follow-icon:hover a,.extender .pms-follow-icon a:hover{color:#fff;}

 Bước 2 : các bạn copy đoạn html sau đặt nơi muốn hiển thị edit lại sao cho phù hợp với blog bạn .

<div class="feau"> <h1><i class="fa fa-code"></i> Star Út Blog</h1> <p>Chia Sẽ Thủ Thuật Facebook & Blogger , Seo Tip</p> </div> <br /> <div class="pms-logo-widget"><a href="/"><img src="https://i.imgur.com/AO5NjNg.jpg" /> </a></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-comment"> <i class="fa fa-comments-o" 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> <div style="clear:both; margin-top:10px ;"></div> <div class="pms-follow-wrpicon"> <ul class="extender"> <li class="pms-follow-icon blogger"><a href="https://www.blogger.com/follow-blog.g?blogID=4204156137751445880" target="_blank" title="Follow this site">
<i class="fa fa-users"></i> Theo Dõi</a></li> <li class="pms-follow-icon ppal"><a href="//www.facebook.com/starut.leminhut.blogspot" target="_blank" title="Liên Hệ"><i class="fa fa-paper-plane"></i> Liên Hệ</a>
</li>
<li class="pms-follow-icon ppal"><a href="//leminhut.blogspot.com/2018/04/lien-ket-ban-be-hop-tac-phat-trien-blogs.html" title="Đặt Liên Kết"><i class="fa fa-handshake-o"></i> Đặt Liên Kết</a></li>
<li class="pms-follow-icon ppal"><a href="//leminhut.blogspot.com/search/label/Seo%20Tip" target="_blank" title="Seo Tip"><i class="fa fa-map"></i> Seo Tip</a></li>
<li class="pms-follow-icon ppal"><a href="//leminhut.blogspot.com/search/label/Thủ%20Thuật%20Blogspot" title="thủ Thuật blog"><i class="fa fa-newspaper-o"></i> Thủ Thuật blog </a></li>
<li class="pms-follow-icon ppal"><a href="//leminhut.blogspot.com/search/label/Fix%20Lỗi%20Blogger" title="fix lỗi blog"><i class="fa fa-gear"></i> Fix Lỗi Blog </a></li>
<li class="pms-follow-icon ppal"><a href="//leminhut.blogspot.com/search/label/Blogger%20Templates" title="template"><i class="fa fa-barcode"></i> Template </a></li>
</ul></div> <div class='clear'></div>

Lời kết

Chỉ vài bước đơn giản star út đã hướng dẫn các bạn cách tạo 1 widget cá nhân tuyệt đẹp cho blog rồi đó , nếu thấy hay hãy share và comment ủng hộ starut để ngày càng hoàn thiện thêm nhé .

Soucre code : hồng hải seo

Baca juga