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

Đăng Ngày: 17:43:00

Đức Vũ

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.