Thứ Bảy, 27 tháng 12, 2014
Thủ thuật CSS3 tạo khung chứa Code cho Blogspot
Thứ Bảy, 27 tháng 12, 2014
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, Fphn.blogspot.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.
Fphn.blogspot.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)
* 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.
Tags:
Thủ thuật blogger
Demo này ngay bên dưới nhé
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;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é:
overflow: auto !important;
text-align: left !important;
max-height: 250px !important;
background: #eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNxsKTbnOK1vVc55gdifaiBf2sZh_vFkDRZ0XkCgibSzGnz_HOwbHWLVb1_isfGeaZsMjsv082wuk8ZqxRVL9_uNJnl_BCYxls6pcpiwT7AJoxgmJ-QZZZw3iuncFeP1ZIZAzehVzdp4EU/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}
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét