Hướng Dẫn Tạo Intro Đẹp Khi Vào Blog ( Source Code : Hồng Hải Blog )

Xin chào các bạn ! Hôm nay trên Facebook có một bạn hỏi mình về bài viết tạo intro giống Hồng Hải Blog ở đâu thì mình đã lục lọi lại tất cả các blog mà không thấy đâu nên mình quyết định sẽ làm bài viết hướng dẫn lại cho các bạn xem nhé !!! ( Nguồn Code : Hồng Hải Blog )

Cách làm

Đặt đoạn code này vào nơi bạn muốn hiển thị ( trên hoặc dưới menu ):

<style>
.cover-bg:active{}
#cover_bg{width:100%;position:relative;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;}
.cover-bg{background:url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-426396.png) no-repeat center;background-size:cover;height:385px;width:100%;margin:0 auto;position:relative;transition:1s ease-in-out;-webkit-transition:1s ease-in-out;-moz-transition:1s ease-in-out}
.cover-bg p{ text-align: center;
color:#fff;position:absolute;bottom:0;font:700 44px Roboto Condensed,sans-serif;left: 32%;margin:15px;top: 236px;text-transform: uppercase;}
.cover-bg p span{display:block;font-size:22px;font-weight:600;margin:1px 0 0 0;}
.profile_img img{transition:.3s;width:170px;height:170px;object-fit:cover;border-radius:50%;background:#fff1;padding:6px;;position:absolute;    bottom: 140px;left:600px;z-index:1}
.profile_img img:hover{border-radius:0;background:white}
.cover-bg  h2{margin:0 0 10px 0;padding:0;font-size:22px;font-weight:500}
.cover-bg a{
    color: #555;
    position: absolute;
    font: 600 19px Roboto Condensed,sans-serif;
    left: 567px;
    top: 339px;
    letter-spacing: 0;
    padding: 4px 13px;
    display: inline-block;
    background: white;
    margin: 0 0 0 10px;
    border-radius: 4px;
    opacity: .7;
    text-transform: uppercase;}
.cover-bg a:hover,.btn1_cover:focus{background:#fff;opacity:1}
#btop-btn a.change{opacity:1;visibility:visible;right:13px}
#btop-btn a{position:fixed;bottom:13px;right:-50px;z-index:999;background:white;padding:5px 15px;font-size:30px;opacity:0;visibility:hidden;transition:.5s}
@media screen and (max-width:320px){.top-header h2 a{font-size:30px!important}.read_more_ a,.read_more_{font-size:15px}h2.post-title{font:400 24px Roboto!important;line-height:1.7!important;text-align:center!important}#top_header{display:none}.thumb{height:200px!important}#admin-thumb{top:155px!important;margin:0 -40px!important}#admin-thumb img{width:80px!important;height:80px!important;border:4px solid white!important}.post{margin:215px 0 0!important}}
@media screen and (max-width:768px){
.cover-bg p{left:50%;transform:translate(-50%,-50%);text-align:center;box-sizing:border-box;width:100%;top:50%}
.profile_img img{transform:translatex(-50%);left:50%;bottom: 23%;}.cover-bg{width:100%}.cover-bg p,#menu,.btn_cover{display:none}#sidebar-bacsiwindows_com_wrapper{width:90%;float:none;margin:auto}.bacsiwindows_com_wrapper{}.breadcrumbs{font-size:15px!important}.post{font-size:15px;text-align:justify;padding:20px!important}.post h2{text-align:left!important}h2.post-title{text-align:center!important}.comments .comments-content .datetime a{display:none}.top_header{width:100%;text-align:center}.bacsiwindows_com_wrapper,.footer-main,.footer-copyright,.top_header{width:100%}.footer-column{width:100%;float:none}.footer-copyright .right,.footer-copyright .left{float:none;width:100%;text-align:center;margin:5px 0}}
  </style>
<div id='cover_bg'><div class='cover-bg'>
<p>Hữu Nhân Designer
<span>BLOG CHUYÊN CHIA SẺ THỦ THUẬT ẢNH BÌA FACEBOOK
 </span>
</p>
<div class='profile_img'><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>
<a href='/responsive'><i class='fa fa-pencil'/>
Test Reponsive</a>
</div></div></div>

Chỉnh sửa lại - Done !!!

Nguồn Code : Hồng Hải Blog