Khung chứa code hiệu ứng nổi cho blogspot

Khung chứa code cho blogspot hiện nay trên có rất nhiều với những hiệu ứng box đẹp mắt. Bài viết này sẻ hướng dẫn cho các bạn tạo khung chứa code cho blogspot, khung chứa văn bản, hay là khung chứa các mục ghi chú khá đơn giản nhưng lại rất đẹp theo màu sắc khung code mà các bạn yêu thích.

Chúng ta sử dụng hiệu ứng css để hiển thị thuộc tính khung code. Khung code hiệu ứng màu với nhiều màu sắc mà tùy vào sở thích của các bạn. Khung code này được thiết kế theo hiệu ứng nổi của Material Design.

Để hiển thị khung chứa code hay văn bản này thì chứng ta kết hợp Css + Html để hiển thị Khung Box Code Này.

Bây giờ chúng ta bắt đầu tạo khung chứa code hiệu ứng màu này

1. Đăng Nhập Vào Blogger

2. Vào Edit HTML

3. Bấm Ctrl + F Rồi Tìm ]]></b:skin Rồi Dán Đoạn Code Bên Dưới Vào.

/* Material Color Box SezDrive.Com */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}

Nếu Bạn Có Code Mặc Định Hay Code Khác Thì Các Bạn Nên Xóa Code Đó Để Tránh Bị Lỗi Với Xóa Bỏ CSS Có thể Làm nhẹ Template Blogspot Của Bạn.

DEMON

Để sử dụng trong bài viết các bạn chuyển qua phần HTML rồi copy các đoạn code bên dưới vào

1. Khung Màu Tím : 

<div class="colorbox purple"> Chào Tất Cả Các Bạn Đã Xem Bài Viết Của SezDrive.Com </div>

2. Khung Màu Xanh Biển : 

<div class="colorbox blue"> Chào Tất Cả Các Bạn Đã Xem Bài Viết Này
</div>

3. Khung Màu Xanh Chuối :

<div class="colorbox green"> Chào Tất Cả Các Bạn Đã Xem Bài Viết Này </div>

4. Khung Màu Đỏ : 

<div class="colorbox red"> Chào Tất Cả Các Bạn Đã Xem Bài Viết Của SezDrive.Com
</div>

5. Khung Màu Da Cam

 <div class="colorbox orange"> Chào Tất Cả Các Bạn Đã Xem Bài Viết Của SezDrive.Com
</div>

Sau khi thêm code vào cá bạn Lưu Lại Nhé. Chúc Các Template của các bạn thật đẹp mắt.