Hướng dẫn thêm mục giới thiệu tác giả vào blogspot Bác sĩ windows

Good Morning, theo yêu cầu của một số bạn thì hôm nay mình sẽ hướng dẫn các bạn thêm mục giới thiệu tác giả vào blogspot nha

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Vào trang Chủ đề của blogspot -> Chỉnh sửa HTML và dán đoạn code bên dưới xuống dưới thẻ <body> hoặc trên thẻ </body> cũng đều được

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'/>
<div class='circle'/>
<div class='circle'/>
<div class='contentbox'>
<kepala><span id='textlogo'><data:blog.title/></span>
<a class='popup-close' href='#closed' title='Close'>&#215;</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img expr:alt='data:blog.title' expr:title='data:blog.title' src='https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=getposts'/><br/>
<p>ToiShare.Net là một blog cá nhân, nơi tôi chia sẻ các mẹo về Blogger/Blogspot, Facebook, Photoshop</p><br/>
<p>Hy vọng rằng trong tương lai blog này có thể cung cấp những đóng góp và thông tin hữu ích cho tất cả các bạn. Cảm ơn bạn!</p>
</div></div></div>
<div id='left'>
<div class='taber1'><a expr:title='data:blog.title' href='/' rel='nofollow' target='_blank'><data:blog.title/></a></div>
<div class='taber2'><a href='https://plus.google.com/+TrầnThanhBình' rel='nofollow' target='_blank' title='Follow Us On Google+'>Google+</a></div>
<div class='taber3'><a href='https://www.facebook.com/6666666.info' rel='nofollow' target='_blank' title='Follow Us On Facebook'>Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'>Twitter</a>
</div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'>Codepen</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow-blog.g?blogID=2016773409250385719' rel='nofollow' target='_blank' title='Join this blog'>Join this blog</a></div>
</div></div></div></div></div>

Bước 2: Thêm đoạn code này vào chỗ bạn muốn nó hiển thị <li class='infotoishare'><a class='popup-link' href='#popup'><i aria-hidden='true' class='fa fa-address-card'/>Info</a></li>

Ví dụ ở đây mình thêm vào menu

Bước 3: Thêm css phía dưới lên trên thẻ ]]></b:skin> hoặc thêm nó vào trong cặp thẻ <style>...</style> đều được

/* CSS Widget Info About Us */
.boxinner{z-index:99;width:100%;height:550px;position:absolute;left:50%;margin-left:-250px;background-color:#e9e8e9;top:50px;box-shadow:0 0 70px 0 rgba(0,0,0,0.1)}
.boxinner{border-radius:6px}
.contentbox{border-radius:0 0 6px 6px}
#left{border-radius:0 0 6px 0}
.contentbox{border-top:1px solid #cbcbcb;position:absolute;background-color:#fff;top:40px;right:0;left:0;bottom:0}
.circle{float:left;height:12px;width:12px;margin:14px 0 0 10px;border-radius:50%;border:1px solid #0000000f}
.circle:first-child{background:#f56252;margin-left:15px}
.circle:nth-child(2){background:#fac000}
.circle:nth-child(3){background:#42cc01}
kepala{background:#cfcfcf;height:50px;width:100%;position:inherit}
#textlogo{background:#f7f7f7;color:#120d04;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:58.4%;box-sizing:initial;}
#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#bdc3c7;}#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:#f88c00;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:15px}
#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)}
#aboutus p{line-height:17px}
.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{background:url(https://hdqwalls.com/download/mac-osx-sierra-lu-2560x1440.jpg);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:7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#737376}
a.popup-close:hover{color:#737376}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{background:#00c700;color:#fff;display:inline;font-weight:700;font-size:50px;padding:2px 7px 0px 7px;border-radius:3px}
.totalposts .totallabel{display:block;text-transform:none;color:#222}
li.infotoishare{float:right!important;background:#f8f9fa}
li.infotoishare a{color:#00c700!important;padding:8px 139px!important}
li.infotoishare:hover,li.infotoishare a:hover{background:#00c700!important;color:#fff!important}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
@media screen and (max-width: 1138px) {
#popup,.infotoishare{display:none!important}
}