Tạo Phần Thống Kê Kèm Avatar Tuyệt Đẹp

Chào các bạn, hôm nay mình xin hướng dẫn các bạn cách tạo phần thống kê kèm Avatar cực đẹp cho Blogspot. Không dài dòng nữa, chúng ta bắt đầu thôi!

Bước 1: Các bạn vào Blogger Chủ đề Chỉnh sửa HTML.

Bước 2: Copy & Paste đoạn code này trước thẻ ]]></b:skin>

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 3: Vào Bố cục HTML/Javascript và dán đoạn code này vào.

<div class="feau"> <h1><i class="fa fa-gg"></i> Thanh Phú IT <i class="fa fa-gg"></i></h1> <p>Chia Sẽ Thủ Thuật & Ảnh Bìa Facebook</p> </div> <br /> <div class="pms-logo-widget"><a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRM3UyvRMeZGvAo4tQbRVl5FtzwxrIF_jquGoI0aIpK1pHUskmTIYz0OYoIaokgu_RyTT0FmiB7b5olI_vcTzJQBeLZH-n-JyGfKK10ceYmkJqtOMdUU7WsYgwvcErc6RZcTb18dpoMwSG/s320/9e2dd51e27923777eba5067b62477330.jpg?oh=63a3b42c3e72c6f729239c159c83f3fc&oe=5A7B5532" /> </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=4754858205348245775" 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="https://www.facebook.com/ThanhPhu.22042003" target="_blank" title="Liên Hệ"><i class="fa fa-paper-plane"></i> Liên Hệ</a></li> </ul></div> <div class='clear'></div>

Thay phần tô màu trong Blockquote thành tên Blog của các bạn.

Vậy là xong! Chúc các bạn thành công! Nếu trong quá trình làm có thông báo lỗi, thì hãy để lại comment bên dưới, mình sẽ giải đáp thắc mắc hoặc sửa lỗi giúp cho các bạn.
Nguồn: Thái Tính IT

Bài viết của bạn được xem như một đề xuất cho bài viết của chúng tôi. Mẫu bài viết bạn đang chỉnh sửa sẽ được chúng tôi xem xét và update lên blog nếu nó hoàn hảo !

CHỈNH SỬA BÀI VIẾT
----------------------------------------
<span style="background-color: white; color: #555555; font-family: Roboto, sans-serif; letter-spacing: -0.35px;">Chào các bạn, hôm nay mình xin hướng dẫn các bạn cách </span><b style="background-color: white; color: #555555; font-family: Roboto, sans-serif; letter-spacing: -0.35px;">tạo phần thống kê kèm Avatar cực đẹp cho Blogspot.</b><span style="background-color: white; color: #555555; font-family: Roboto, sans-serif; letter-spacing: -0.35px;"> Không dài dòng nữa, chúng ta bắt đầu thôi!</span><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx8Bg3R3FTmMNFK4fV-jnaeTpsvcdB7N-GFjCfIKPdwzxZbGGhQfnTFnWchxBbpPa5YO0V_VYbUhleuHITmrv140O6Ie4fNR1iTXk-wlXVoE9opShnAuiOKrqPjbxRnNz1AzkQWn-TvOA/s1600/5-10-2017.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="243" data-original-width="300" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx8Bg3R3FTmMNFK4fV-jnaeTpsvcdB7N-GFjCfIKPdwzxZbGGhQfnTFnWchxBbpPa5YO0V_VYbUhleuHITmrv140O6Ie4fNR1iTXk-wlXVoE9opShnAuiOKrqPjbxRnNz1AzkQWn-TvOA/s400/5-10-2017.png" width="400" /></a></div><div class="separator" style="background-color: white; clear: both; color: #555555; font-family: Roboto, sans-serif; letter-spacing: -0.35px; margin: 0px !important; pointer-events: none;"><b>Bước 1:</b> Các bạn vào <b>Blogger</b> <span class="fa fa-angle-right" style="-webkit-font-smoothing: antialiased; display: inline-block; font-family: FontAwesome; font-stretch: normal; line-height: 1; text-rendering: auto; transform: translate(0px, 0px);"></span><b> Chủ đề</b> <span class="fa fa-angle-right" style="-webkit-font-smoothing: antialiased; display: inline-block; font-family: FontAwesome; font-stretch: normal; line-height: 1; text-rendering: auto; transform: translate(0px, 0px);"></span><b> Chỉnh sửa HTML.</b></div><div class="separator" style="background-color: white; clear: both; color: #555555; font-family: Roboto, sans-serif; letter-spacing: -0.35px; margin: 0px !important; pointer-events: none;"><b>Bước 2: </b>Copy & Paste đoạn code này trước thẻ<b> </b><code style="border-radius: 4px; border: 1px solid; color: #6aafa3; display: inline-block; font-stretch: normal; font-weight: bold; line-height: normal; margin: 0px 5px; padding: 0px 10px; position: relative; transition: all 0.3s; user-select: all;">]]></b:skin></code></div><blockquote class="tr_bq" style="background: rgb(243, 243, 243); clear: both; color: #666666; font-family: monospace; font-size: 17px; font-stretch: normal; letter-spacing: 0px; line-height: 2; margin: 10px 0px; max-height: 400px; overflow: auto; padding: 12px; transition: 0.3s; user-select: all;">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;}</blockquote><span style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;">Bước 3: Vào </span><b style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;">Bố cục</b><span style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;"> </span><span class="fa fa-angle-right" style="-webkit-font-smoothing: antialiased; background-color: white; color: #555555; display: inline-block; font-family: FontAwesome; font-size: 18px; font-stretch: normal; letter-spacing: -0.35px; line-height: 1; text-rendering: auto; transform: translate(0px, 0px);"></span><b style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;"> HTML/Javascript</b><span style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;"> và dán đoạn code này vào.</span><br style="background-color: white; color: #555555; content: ""; display: block; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px; padding: 4px;" /><br /><div style="background: rgb(243, 243, 243); font-stretch: normal; line-height: 2; margin: 10px 0px; max-height: 400px; overflow: auto; padding: 12px; transition: 0.3s; user-select: all;"><span style="background-color: transparent;"><span style="color: #666666; font-family: inherit;"><div class="feau"> <h1><i class="fa fa-gg"></i> Thanh Phú IT <i class="fa fa-gg"></i></h1> <p>Chia Sẽ Thủ Thuật & Ảnh Bìa Facebook</p> </div> <br /> <div class="pms-logo-widget"><a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRM3UyvRMeZGvAo4tQbRVl5FtzwxrIF_jquGoI0aIpK1pHUskmTIYz0OYoIaokgu_RyTT0FmiB7b5olI_vcTzJQBeLZH-n-JyGfKK10ceYmkJqtOMdUU7WsYgwvcErc6RZcTb18dpoMwSG/s320/9e2dd51e27923777eba5067b62477330.jpg?oh=63a3b42c3e72c6f729239c159c83f3fc&oe=5A7B5532" /> </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&amp;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&amp;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=4754858205348245775" 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="https://www.facebook.com/ThanhPhu.22042003" target="_blank" title="Liên Hệ"><i class="fa fa-paper-plane"></i> Liên Hệ</a></li> </ul></div> <div class='clear'></div></span></span></div> <span style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;">Thay phần tô màu trong </span><b style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;">Blockquote</b><span style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;"> thành tên </span><b style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;">Blog</b><span style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;"> của các bạn.</span><br /><br style="background-color: white; color: #555555; content: ""; display: block; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px; padding: 4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;">Vậy là xong! Chúc các bạn thành công! Nếu trong quá trình làm có thông báo lỗi, thì hãy để lại comment bên dưới, mình sẽ giải đáp thắc mắc hoặc sửa lỗi giúp cho các bạn.</span><br /><span style="background-color: white; color: #555555; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;">                                                                                                       Nguồn: <a href="http://www.thaitinh-it.tk/">Thái Tính IT</a></span>