HƯỚNG DẪN TẠO TIỆN ÍCH THỐNG KÊ TUYỆT ĐẸP CHO BLOG

Xin chào các bạn cũng khá là lâu rồi mình chưa viết thủ thuật gì blogger , à và mình
cũng xin chân thành cảm ơn các bạn đã ủng hộ website hùng coder trong thời gian qua , và mình là cộng tác viết mới của hùng coder là STAR ÚT  và bài này cũng chính là bài đầu tiên mình viết trên blog hùng coder, mong các bạn ủng hộ mình nhé , thôi không nói dài vòng nữa đi thẳng vấn đề luôn.

GIỚI THIỆU

Chắc hằng mọi người chuyên về làm web cá nhân , chia sẻ thủ thuật,... thì chắc không xa lạ gì so với những cái khung , widget cá nhân nhằm mục đích giới thiệu hay , những chuyên mục linh tinh khác , nhưng trên mạng hiện nay có hướng dẫn rất nhiều cách tạo widget cá nhân khác nhau , từ đẹp đến xấu điều có thừa , nhưng hôm nay STAR ÚT xin chia sẻ đến các bạn một widget tuyệt đẹp được tào từ css và html 5 , 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

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 truy cập vào trang quản trị blogger => chọn thêm tiện ích => JavaScript => copy đoạn html 5 sau vào và save blogger lại hưởng thụ thành quả nhé.

<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

Như vậy chỉ vài bước đơn giản mình đã hướng dẫn xong cho các bạn cách tạo một tiện ích cá nhân trên blogs tuyệt đẹp rồi đó , nếu thấy hay hãy share và ghé thăm blogs STAR ÚT ủng hộ mình nhé , cảm ơn các bạn đã phí 5 phút đọc bài viết của mình , xin chân thành cảm ơn.
Nguồn : không rõ , view - soucre :howktech

LIVE DEMO