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

Click ngay
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}
}
Vậy là xong rồi.
Chúc bạn thành công!

Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.

Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.

Thanh Bình Designer, Developer

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé! Xem thêm nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Nên Xem
  • Ẩn sidebar
  • Không có nhận xét nào:

    Đăng nhận xét

    » Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
    » Không spam link, chia sẻ các link không liên quan đến bài viết.
    » Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
    » Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.