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'>Bước 2: Thêm đoạn code này vào chỗ bạn muốn nó hiển thị
<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'>×</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&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>
 |
| Ví dụ ở đây mình thêm vào menu |
/* CSS Widget Info About Us */Vậy là xong rồi.
.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}
}
Chúc bạn thành công!
Không có nhận xét nào