Bạn Cần Hỗ Trợ Gì ?


Dịch Vụ Liên Hệ

19 tháng 5, 2018

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

Vnit Tech
tháng 5 19, 2018 - 19 tháng 5, 2018

Ở 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
DMCA.com Protection Status

Dịch Vụ Thiết Kế WebSite


Bán hàng đảm bảo Thiết Kế Web

Chúng tôi cung cấp website theo mẫu , thiết kế web Theo Yêu Cầu

Cam kết giá tốt Cam kết giá tốt

Website Trên Blogvnit Cam Kết Với Giá Tốt Nhất Hiện Nay

Giao hàng toàn quốc Bảo Hành , Fix Lỗi

Bảo hành hỗ trợ cài đặt miễn phí đến khi hợp ý khách hàng

Dịch vụ hỗ trợ 24/7 Dịch vụ hỗ trợ 24/7

Đội ngũ nhân viên của blogvnit Hân hạnh đồng hành cùng bạn

THAM KHẢO DỊCH VỤ