3/5/19

Chia Sẻ Widget Box Giới Thiệu Blog Hiệu Ứng Tuyệt Đẹp

Chào các bạn, vậy là kết thúc kì nghỉ lễ Tết, chắc hẳn các bạn đã có cái Tết vui vẻ, hạnh phúc bên gia đình phải không nào. Chúc các bạn có một tuần làm việc mới vui vẻ, hiệu quả.

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ẽ hưỡng dẫn các bạn làm thế nào để tạo Tiện Ích Khung Giới Thiệu Blog Tuyệt Đẹp này nhé !
#Daftcreation

Demo


Mình bo gọn vào một phần luôn nhé ! Các bạn chỉ cần Copy và Paste vào nơi cần hiển thị nhé!

<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>
 <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>
<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>

Hãy đảm bảo Blog của bạn Có JQuery để Code hoạt động nhé !
Để lại Comment ủng hộ Blog phát triển nhé!