Đêm qua đang ngồi lượn lờ trên codepen tình cờ có thấy một cái mặt cười và mếu vô cùng dễ thương nên mình có đem code đó về chỉnh sửa tí và viết tí jquery đơn giản cấu thành chức năng cho nó. Nhận thấy cái này có thể dùng được vào nhiều mục đích khác nhau nhưng mình đã quyết định chọn chức năng thông báo để viết bài cho các bạn hôm nay đây.
Demo
Nếu muốn xem demo thì bạn có hãy click nút "x" để đóng quảng cáo ngay phía trên nha. Demo blog mình đã tùy biến thêm rồi nên nếu bạn biết code thì hoàn toàn có thể làm được thôi không có gì phức tạp đâu.
Cách thực hiện
Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.
Bước 2: Thêm thư viện Jquery nếu blog bạn chưa có trước
</head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Bước 3: Dán đoạn CSS dưới đây trước
]]></b:skin>
#success-box {
position: absolute;
width: 245px;
height: 250px;
top: 30%;
left: 40%;
background: linear-gradient(to bottom right, #96acfb 40%, #db99ae 100%);
border-radius: 20px;
box-shadow: 5px 5px 20px #cbcdd3;
perspective: 40px;
display: none;
}
#show-noti {
cursor: pointer;
}
#success-box h1 {
font-size: 0.9em;
font-weight: 100;
letter-spacing: 3px;
padding-top: 5px;
color: #FCFCFC;
padding-bottom: 5px;
text-transform: uppercase;
}
#success-box .green {
color: #4ec07d;
}
#success-box .alert {
font-weight: 700;
letter-spacing: 5px;
}
#success-box p {
margin-top: -5px;
font-size: 0.5em;
font-weight: 100;
color: #5e5e5e;
letter-spacing: 1px;
}
#success-box button, #success-box .dot {
cursor: pointer;
}
#success-box .dot {
width: 8px;
height: 8px;
background: #FCFCFC;
border-radius: 50%;
position: absolute;
top: 4%;
right: 6%;
}
#success-box .dot:hover {
background: #eee;
}
#success-box .two {
right: 12%;
opacity: .5;
}
#success-box .face {
position: absolute;
width: 22%;
height: 22%;
background: #FCFCFC;
border-radius: 50%;
border: 1px solid #777777;
top: 21%;
left: 37.5%;
z-index: 2;
animation: bounce 1s ease-in infinite;
}
#success-box .eye {
position: absolute;
width: 5px;
height: 5px;
background: #777777;
border-radius: 50%;
top: 40%;
left: 20%;
}
#success-box .right {
left: 68%;
}
#success-box .mouth {
position:absolute;
top: 43%;
left: 41%;
width: 7px;
height: 7px;
border-radius: 50%;
}
#success-box .happy {
border: 2px solid;
border-color: transparent #777777 #777777 transparent;
transform: rotate(45deg);
}
#success-box .shadow {
position: absolute;
width: 21%;
height: 3%;
opacity: .5;
background: #777777;
left: 40%;
top: 43%;
border-radius: 50%;
z-index: 1;
}
#success-box .scale {
animation: scale 1s ease-in infinite;
}
#success-box .message {
position: absolute;
width: 100%;
text-align: center;
height: 40%;
top: 47%;
}
#success-box .button-box {
position: absolute;
background: #FCFCFC;
width: 50%;
height: 15%;
border-radius: 20px;
top: 73%;
left: 25%;
outline: 0;
border: none;
box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
transition: all .5s ease-in-out;
}
#success-box .button-box:hover {
background: #eee;
transform: scale(1.05);
transition: all .3s ease-in-out;
}
@keyframes bounce {
50% {
transform: translateY(-10px);
}
}
@keyframes scale {
50% {
transform: scale(0.9);
}
}
@keyframes roll {
0% {
transform: rotate(0deg);
left: 25%;
}
50% {
left: 60%;
}
100% {
transform: rotate(360deg);
left: 25%;
}
}
Bước 4: Tiếp tục dán toàn bộ đoạn code sau trước
</body>
<div id="success-box">
<div class="dot"></div>
<div class="dot two"></div>
<div class="face">
<div class="eye"></div>
<div class="eye right"></div>
<div class="mouth happy"></div>
</div>
<div class="shadow scale"></div>
<div class="message"><h1 class="alert">Phú Cường</h1><p>Blog đang edit dần dần.</p></div>
<button class="button-box"><h1 class="green">Ok</h1></button>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('#show-noti').click(function() {
$('#success-box').show(500);
});
$('.button-box').click(function(){
$('#success-box').hide(500);
});
});
//]]>
</script>Cách dùng
Khi muốn click vào một phần tử nào đó (có thể là button, thẻ liên kết a, div, p...) nào đó mà hiện lên thông báo thì bạn chỉ cần thêm
id='show-noti'này vào thẻ đó là được nhé.
Ví dụ
Mình có 1 nút bấm (button) như sau:
<button>Click here</button>
Bây giờ muốn khi click vào chữ Click here kia hiện ra thông báo thì bạn sửa như sau:
<button id='show-noti'>Click here</button>
Bước 5: Lưu template lại.
Lời kết
Vậy là mình vừa hướng dẫn các bạn cách để tạo thông báo có hình mặt cười siêu dễ thương cho blog rồi đấy. Thực ra mình chỉ lấy 1 mặt cười thôi, còn 1 mếu lăn qua lăn lại nữa nên nếu bạn nào muốn tự tùy biến thêm cho mặt mếu đó hãy xem code mặt cute gốc tại đây nhé.
