Thủ thuật CSS3 tạo khung chứa Code cho Blogspot

Tweet

Nếu bạn là admin của 1 Website chuyên chia sẻ thủ thuật Code, thì việc đầu tiên bạn nên nghĩ ngay rằng phải làm sao cho những dòng code của mình chia sẻ được sắp xếp gọn gàng và chuyên nghiệp. Trên cộng đồng có khá nhiều bài chia sẻ, nhưng để làm nên sự phong phú và phong cách riêng. Bài viết này, ThaiAiTi.com chia sẻ với người dùng thủ thuật tạo khung chứa code đẹp cho Blogspot có tên gọi là blockquote . Code này hoàn toàn là CSS3, nên bạn có thể yên tâm về tốc độ load cũng như không ảnh hưởng đến Template có sẵn.





Demo này ngay bên dưới nhé


ThaiAiTi.com được biết đến như là 1 Website chuyên nghiệp trong lĩnh vực thiết kế Web đám mây Google Blogspot tại Việt Nam. Các Templates được thiết kế bởi ThaiAiT.com luôn mang 1 phong cách riêng. Bạn có thể tham khảo kho giao diện Blogspot chuyên nghiệp tại đây

Cách thực hiện: khá đơn giản bạn chỉ cần chèn đoạn code CSS sau trên ]]></b:skin>
(dành cho người thiết kế Blogspot chuyên nghiệp)

.post blockquote{width: 500px;
overflow: auto !important;
text-align: left !important;
max-height: 250px !important;
background: #eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOZHrAerKmElQuRVYZcKVOoAiisARqW93YBsHPpBHpp01PKVSGB8wWvIiOncr323SIJ6Y25kuptJB6CeqIA_KKWSmCIb7WhOQ60t-BmPIFuuzbeBS8VqLsJbCxYqqm4uh67RC7XJWo_Pia/s0/code-thaiaiti.gif) !important;
background-repeat: no-repeat !important;
padding: 15px 20px 15px 35px !important;
color: #333 !important;}
.post blockquote p{margin:.75em 0}
blockquote::-webkit-scrollbar {width: 10px;}
blockquote::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);background:#fff;}
blockquote::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.2);border-radius: 20px;}
blockquote::-webkit-scrollbar-thumb:hover {background: #F8CD52}
Ghi chú: Khi post bài dạng Code, bạn thực hiện như hình dưới để có được khung chứa code như í nhé:





* Chúc bạn thực hiện thành công, mọi thắc mắc vui lòng để lại comment phía dưới.