Share Code Hộp Thông Tin Admin Đẹp Cho Blogspot

Hi anh em, lâu lắm chưa viết bài về bài thủ thuật blogspot rồi nhỉ và hôm nay mình sẽ giới thiệu cho anh em Code Hộp Thông Tin Admin Đẹp Cho Blogspot được mình lấy bên Hồng Hải , mong anh em thích !!

CÁC BƯỚC THỰC HIỆN :

Bước 1 : Chèn đoạn CSS dưới đây dán trước thẻ ]]></b:skin>

/* CSS Widget Info About Us */
.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c}
kepala{background:#de9b31;height:50px;width:100%;position:inherit}
#textlogo{background:#f0a734;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:58.4%;box-sizing:initial;font-family:sans-serif;}
#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit;font-family: sans-serif}
#left a{color:#bdc3c7;text-decoration: none;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;}
.taber1:hover{background:#52537d;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal;font-size:13px}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{display:none;}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:relative;top:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}
a.popup-close:hover{color:#fff}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}
.totalposts .totallabel{font-weight: 500;font-size: 16px;display:block;text-transform:uppercase;color:#52537d}
li.infoindzign{border:0;float:right;list-style:none;font-family: 'Roboto Condensed';}
li.infoindzign a{background:#52537d;color:#fff;display:block;margin: -5px 20px -16px 9px;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-family:'Roboto Condensed';transition:background-color .3s;    text-decoration: none;}
li.infoindzign a:hover{background:#2a2a2a;color:#fff}
i.infoindzign a:hover{background:#e67e22;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}
    #left {    display: none;}
#aboutus{width:100%}
}
.textgg{    top: 50px;

    padding: 10px;
    color: #444;
    text-align: left;
    position: inherit;
    float: left;
    line-height: normal;
    font-size: 17px;
    font-family: sans-serif}

Bước 2 : Chèn đoạn HTML sau vào chỗ nào bạn muốn hiện

<li class='infoindzign'>
<a class='popup-link' href='#popup'>Thông Tin Về Admin Blog</a></li>
<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'></div>
<div class='circle'></div>
<div class='circle'></div>
<div class='contentbox'>
<kepala><span id='textlogo'>Tuổi Trẻ IT</span>
<a class='popup-close' href='#closed' title='Close'>&#215;</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Tuổi Trẻ IT' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk72HF1xuRnjNOYFcbkXOGZIDKZ-iJb60Oag4BBPOJvz1oY4YS_K4yuJRII2Vjs5RoYakgjx3gSeU11EjSN_exC0njmjYUeQ5OElxZWyp1KNtcj4e-EA86CxZf7lr0f7MoVMVI-Cx8ykZx/s1600/indzign.jpg' title='Tuổi Trẻ IT'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&callback=getposts'></script>
<div class='textgg'>
Mình là người thành lập, đồng thời cũng là quản lý và biên tập viên chính của Blog này. Mình bắt đầu tham gia Blogger (Blogspot) vào năm 2016.<br/><br/>
Tuổi Trẻ IT là Blog được thành lập năm 2016 trên nền tảng Blogspot của Google với mục đích cá nhân là chia sẻ thủ thuật blogger/blogspot, thủ thuật máy tính, template blogspot,... và nhiều tiện ích khác. Ban đầu nội dung cũng khá sơ sài và không có nhiều chủ đề, được sự ủng hộ cũng như yêu thích của nhiều người nên Hồng Hải BLog đã mở rộng nội dung sang nhiều phần hơn nữa, ví dụ như thủ thuật, template Blogspot, thủ thuật, phần mềm Windows, thủ thuật facebook, youtube, photoshop và các tiện ích linh tinh... <br/><br/>
Năm sau mình đã là học sinh cuối cấp, vì vậy có thể mình sẽ không toàn tâm toàn ý mà tiếp tục phát triển cái Blog này được nữa. Vì thế hiện tại mình đang tuyển Cộng Tác Viên viết bài cho Blog của mình, nếu quan tâm, bạn hãy xem chi tiết về quyền lợi cũng như một số thứ khác tại đây. 
Đây là Blog tâm huyết duy nhất mình thành lập và gầy dựng lên, với 'tham vọng' trở thành 1 blog lớn trên các diễn đàn, mạng xã hội. Hy vọng các bạn sẽ ủng hộ thật nhiều, để mình có động lực mà mang đến những bài viết hay và hữu ích hơn nữa! 
Cảm ơn, <br/><br/>
Admin - Hồng Hải.
  </div>
</div></div></div>
<div id='left'>
<div class='taber1'><a href='/' rel='nofollow' target='_blank' title='Tuổi Trẻ IT'>Tuổi Trẻ IT</a></div>
<div class='taber2'><a href='https://plus.google.com/+H%E1%BB%93ngH%E1%BA%A3i001' rel='nofollow' target='_blank' title='Follow Us On Google+'>Google+</a></div>
<div class='taber3'><a href='https://www.facebook.com/NguyenDucNamDz' rel='nofollow' target='_blank' title='Follow Us On Facebook'>Facebook</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow.g?blogID=7734893201852337172' rel='nofollow' target='_blank' title='Join this blog'>Theo dõi blog</a></div>
</div></div></div></div></div>
<!-- Icon Mở Menu -->
<a class='toggleMenu ripple' title='Mở menu'><i class='fa fa-align-left'></i></a>

TỔNG KẾT :
Chúc các bạn thành công và luôn ủng hộ Blog Tuổi Trẻ IT nhé !
TUỔI TRẺ IT