Chia sẻ Profile Card hiệu ứng đẹp cho Blogspot

Nhận thấy rằng có khá nhiều bạn thích thú với việc tạo khung giới thiệu Blog. Việc này không chỉ vừa làm đẹp cho trang Blog của bạn mà còn giúp Blog các bạn trở nên chuyên nghiệp hơn, giúp người đọc hiểu rõ về Blog của bạn hơn. Vì thế hôm nay mình sẽ chia sẻ Profile Card hiệu ứng đẹp cho Blogspot này nhé.

Chia sẻ Profile Card hiệu ứng đẹp

Đi tới trang Blogger -> Thêm đoạn mã dưới đây vào nơi bạn muốn hiển thị

<div id="main1">
            <div id="image1">
                <img src="https://i.pinimg.com/564x/b1/d5/6e/b1d56e6cad578c0c4fc497c89c023fb2.jpg"/>
                <div id="wave"></div>
                <div id="wave2"></div>
            </div>
         
            <div id="info">
                <div id="viewMore"><i class="fas fa-plus" style="position: relative;line-height: 30px;width: 29px;text-align: center;"></i></div>
                <div id="name">DesBlog</div>
                <div id="status">Blog chuyên cập nhật tin tức, thủ thuật công nghệ mới nhất</div>
                <div id="social">
<a class="icon-social" href="#" title="Facebook" target="_blank" rel="nofollow" style="color:#3b5998"><i class="fab fa-facebook-f"></i></a>
<a class="icon-social" href="#" title="Google Plus" target="_blank" rel="nofollow" style="color:#dd4b39"><i class="fab fa-google-plus-g"></i></a>
<a class="icon-social" href="#" title="Đăng kí Blog" target="_blank" rel="nofollow" style="margin-right: 0;color: #f0b70c;"><i class="fas fa-rss"></i></a>   
                </div>
            </div>
         
            <div id="aboutMe">
                <h2>ABOUT ME</h2>
                <p>Thành công là một người thầy tồi tệ. Nó quyến rũ những người thông minh vào ý nghĩ rằng họ sẽ chẳng bao giờ thất bại. Bill Gates
</p>
                <div id="close"><i class="fas fa-times" style="width: 29px;line-height: 30px;text-align: center;"></i></div>
            </div>
         
            <div id="project">
                <h2>PROJECT</h2>
                <div id="panel1">
                    <div class="projectImg"><img src="//i.imgur.com/0dtFDL9.png"/></div>
                    <div class="projectTitle">#Thủ thuật: Chia sẻ những thủ thuật CƠ BẢN về Blogspot, Facebook,...</div>
                 
                    <hr size="1" width="80%" color="#f2f2f2"/>
                </div>
             
                <div id="panel2">
                    <div class="projectImg"><img src="//i.imgur.com/iGJKRfj.jpg"/></div>
                    <div class="projectTitle">
#Tản mạn: Đôi lúc mình làm nhảm về một cái gì đó để đấy yêu cuộc sống hơn !</div>
                 
                    <hr size="1" width="80%" color="#f2f2f2"/>
                </div>
             
                <div id="panel3">
                    <div class="projectImg"><img src="//austcare.vn/global/default/images/call.png"/></div>
                    <div class="projectTitle">#Hãy liên hệ với mình để báo lỗi & hợp tác
Email: Hezo.anvu@gmail.com</div>               
                </div>
            </div>
        </div>
 <style>
#main1{
    height: 400px;
    width:100%;
    background-color:white;
    border-radius: 5px;
    box-shadow: 0 0 7px rgba(0,0,0,.2);
    position: relative;
    overflow: hidden;
}
#image1{
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
}
#image1 img{
    height: 80%;
    width: 100%;
}
#wave,#wave2{
    height: 50px;
    width: 50px;
    background-color: silver;
    position: absolute;
    top:30%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    z-index: 1;
}
@-webkit-keyframes pulseEffect{
    from{
        transform: translate(-50%,-50%) scale(0.5);
        opacity: 0.4;
    }
    to{
        transform: translate(-50%,-50%) scale(5.5);
        opacity: 0;
    }
}
@-webkit-keyframes pulseEffect2{
    from{
        transform: translate(-50%,-50%) scale(0);
        opacity: 0.6;
    }
    to{
        transform: translate(-50%,-50%) scale(4);
        opacity: 0;
    }
}
#main1 #wave{
    -webkit-animation:pulseEffect 2s infinite linear;
}
#main1 #wave2{
    -webkit-animation:pulseEffect2 2s infinite linear;
}
#info{
    height: 120px;
    width: 100%;
    background-color: #81B0F8;
    position: absolute;
    top:280px;
    z-index: 1;
}
#info:before{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top:-50px;
    border-bottom: 50px solid #81B0F8;
    border-left: 265px solid transparent;
}
#info:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top:-60px;
    border-bottom: 60px solid #81CFFF;
    border-left: 250px solid transparent;
    z-index: -1;
}
#viewMore,#close{
    height: 30px;
    width: 30px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    position: absolute;
    top:-25px;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99;
    cursor: pointer;
}
#close{
    top:125px;
}
#viewMore img,#close img{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#name{
   font-weight: bold;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    text-transform: uppercase;
}
#status{
    font-size: 13px;
    color:#ddd;
    text-align: center;
}
#social{
     display: block;
    position: relative;
    margin-top: 15px;
    text-align: center;
}
#aboutMe{
    height: 100px;
    width: 100%;
    background-color: #81B0F8;
    position: absolute;
    top:-160px;
}
#aboutMe:before{
    content:'';
    width: 0;
    height: 0;
    position: absolute;
    top:100px;
    border-top: 50px solid #81B0F8;
    border-right: 250px solid transparent;
}
#aboutMe:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top:100px;
    border-top:60px solid #81CFFF;
    border-right: 250px solid transparent;
    z-index: -1;
}
#aboutMe h2{
    font-size: 15px;
    color: white;
    margin: 10px;
}
#aboutMe p{
    font-size: 13px;
    color:white;
    margin: 10px;
}
#project{
    width: 100%;
    height: 400px;
    position: absolute;
    top:0;
    left: -250px;
}
#project h2{
    font-size: 14px;
    color:#222;
    position: absolute;
    right: 0;
    top:115px;
    margin-right: 10px;
}
.icon-social {
        padding: 5px;
    background: #f2f2f2;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    position: relative;
    display: inline-block;
    line-height: 25px;
}
#panel1,#panel2,#panel3{
    height: 70px;
    width: 100%;
    position: absolute;
    top:170px;
    left: 50%;
    transform: translateX(-50%);
}
#panel2{
    top:250px;
}
#panel3{
    top:330px;
}
.projectImg{
    height: 45px;
    width: 45px;
    position: absolute;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 0 1px 2px rgba(0,0,0,.1);
}
.projectImg img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.projectTitle{
       width: 180px;
    font-size: 12px;
    color: #676767;
    font-weight: bold;
    margin-left: 80px;
}
hr{
    margin-top: 13px;
}
</style>

Phần Javascrpit này dán vào trước thẻ đóng </body>

<script type="text/javascript">
$(document).ready(function(){
    $("#viewMore").click(function(){
        $("#info").animate({top:"460px"}) ;
        $("#aboutMe").animate({top:"0px"});
        $("#image1").animate({left:"265px"});
        $("#project").animate({left:"0px"});
    });
 
    $("#close").click(function(){
        $("#info").animate({top:"280px"}) ;
        $("#aboutMe").animate({top:"-160px"});
        $("#image1").animate({left:"0px"});
        $("#project").animate({left:"-250px"});
    });
});
  </script>

Bài viết liên quan

Sorry! Hiện tại website tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Các bạn có thể liên hệ với mình tại đây