Tạo thông báo siêu dễ thương cho blogspot

Are you sure?

You want to turn off ads.

Đê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.

Tạo thông báo siêu dễ thương cho blogspot

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é.
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    24 nhận xét:

    1. ra bài tạo khung chứa code như bài viết trên đi admin

      Trả lờiXóa
      Trả lời
      1. Cải tà quy chánh rồi ạ giờ cmt nhẹ nhàng vậy =,=
        Bài khung chứa code sẽ là bài tiếp theo sau bài nay nha, nó cũng dễ làm nên sẽ ở cả mục Học web luôn để cho mn hiểu code.

        Xóa
    2. Nhìn đáng sợ quá, không cute chút nào ...

      Trả lờiXóa
      Trả lời
      1. Trông, ở mess thì nói 1 kiểu, đấm cho bh -_-

        Xóa
      2. Làm gì mà suốt ngày đòi đấm e hoài thế, Cảm thấy mình thật đang thương
        *Khóc thầm

        Xóa
      3. Thì nó cute thì phải khen nó cute, nói dối là phải đấm.

        Xóa
    3. ủng hộ seri học web cho mấy bạn chưa biết code :))

      Trả lờiXóa
      Trả lời
      1. Có chứ, sắp tới có thể mình viết mục đó là chính, cái nào mình biết thì mình sẽ share kèm chú thích và cách dùng để các bạn ý áp dụng :D

        Xóa
    4. Icon mặt lỗi đẹp chưa kìa. mang vào trang 404 cho ngộ nghĩnh

      Trả lờiXóa
      Trả lời
      1. Để t nghiên cứu dần tại đang muốn để mỗi e tươi cười kia :)) con mặt lỗi nó cứ đi qua lại kiểu vòi tiền vl :v

        Xóa
    5. cập nhật cái này vào bài ads đi a Cường :v để e áp dụng nx :v

      Trả lờiXóa
      Trả lời
      1. E cần thì a gửi code cho, a vẫn để trong sublime text. Tại update vô mà để giống cái của a thì sửa cả css lẫn html cả jquery mất rồi :3

        Xóa
      2. a gửi cho e với. ib riêng ý ạ. thanks a nhiều :p

        Xóa

    Nhận bài viết mới