Hướng dẫn tạo ghi chú nổi bật cho Blogspot bằng CSS

Chào các bạn độc giả của Tiến Đức Blog, chuyện là thế này.... Sáng ra mình lướt Gu gồ linh tinh thì thấy có đoạn code cho Blogspot khá đẹp và chuyên nghiệp. Nên mình đem về chỉnh sửa một chút và giờ ngồi viết bài này để chia sẻ cho các bạn !

Ok ! Bài này mình sẽ hướng dẫn các bạn "Tạo ghi chú nổi bật trong bài viết bằng CSS".

HƯỚNG DẪN THÊM CSS VÀO TEMPLATE

Bạn thêm đoạn CSS này phía trên thẻ ]]></b:skin>
/* CSS Note by TienDucBlog */.note{position:relative;width:50;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}.note.orange{background:#f39c12}.note.crusta{background:#F2784B}.note.river{background:#3498db}.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

CÁCH SỬ DỤNG

Đoạn này có 4 màu nhé. Cho lên mình sẽ sắp xếp theo thứ tự luôn cùng với DEMO ở dưới. Và khi viết bài các bạn chuyển qua mục soạn thảo bằng HTML nhé.
<div class='note'>NỘI DUNG GHI CHÚ CỦA BẠN</div> // Xanh lá cây
<div class='note orange'>NỘI DUNG GHI CHÚ CỦA BẠN</div> // Vàng đậm
<div class='note river'>NỘI DUNG GHI CHÚ CỦA BẠN</div>  // Xanh da trời
<div class='note crusta'>NỘI DUNG GHI CHÚ CỦA BẠN</div> // Cam nhạt

SẢN PHẨM RA LÒ

NỘI DUNG GHI CHÚ CỦA BẠN
NỘI DUNG GHI CHÚ CỦA BẠN
NỘI DUNG GHI CHÚ CỦA BẠN
NỘI DUNG GHI CHÚ CỦA BẠN
Chúc các bạn thành công nhé. Cảm ơn đã ghé và đọc bài viết của mình <3 Love all.
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: [email protected]
• Facebook: Fb.com/DucHee.VN
Xin chân thành cảm ơn những đóng góp của bạn để chúng tôi ngày càng phát triển hơn nữa...

● Hãy là con người văn minh từ những câu nói

Loading...

9 nhận xét:

  1. Đặt liên kết nhưng k thấy đặt lại nhỉ

    Trả lờiXóa
  2. Blog e để cái xác nhận cái quái gì thế?

    Trả lờiXóa
  3. Liện kết không bạn?
    Nếu liên kết thì phiền bạn Thêm.
    Tên : Thủ Thuật PC4x
    URL : http://www.thuthuatpc4x.tk/
    Mô tả nếu có : Thủ Thuật PC-FACEBOOK-Blog.
    Rồi bạn vào Blog Mình CMT để mình gắng liến kết nha.
    100% tôi không tháo liên kết ngang.

    Trả lờiXóa