الصفحة الرئيسية
Thủ thuật blogspot

Tạo Khung Chứa Code Độc Đáo Ngộ Nghĩnh

Trên mạng thì có nhiều loại khung chứa code nhưng một số khung dưới đây tôi mới sưu tầm được trông khá độc đáo với hiệu ứng thay đổi màu sắc khi ta rê chuột vào phần nào giảm đi tính khô khan muôn thủa của code ^^

- Đăng nhập Blog
- Vào chỉnh sửa HTML
- Tìm thẻ ]]></b:skin> và lựa chọn mẫu ưa thích như DEMO cùng code tương ứng dưới đây dán trước nó rồi save mẫu lại.
DEMO
Mẫu 1
.dt1 {
overflow:auto;width:520px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4u2tBZFou9ZSMICTOUxw0FjlueuovoCAaatCAVHNa4rrAooyWunqu89GesZMZBsB8Qj5LPrG_1puPXdLZAeRBJZ8z5RI7hhaNsDMzZj5GX37LEudkgiO-KzcXzj7oFNGNMMqtdZGrDexB/s535/2.JPG) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.dt1:hover{
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIkQRP-MpNKBk4ELeOUaTcP5gr-oeYxIZ9Gmtahk7876sk1iFtS1PRjmyadFH85pUYBDJeHjm_s2rnHmSTN3h6ydEGlXJMLwI7P4HjpIKEbCj0hq6ZXqgfeV83PLDwy85GE3zsog2chnO-/s535/1.png) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}
Mãu 2
.dt2 {
overflow:auto;width:520px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#7A6417;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxLvq3imF4fB66Jt6tch-6faP9RzdJm198hSOZ8nyC28cMQjwcvDRtmEMWGmKAv6KSeQ5PZW_H31XSeJMAXiR5UlPrf_fEYb6shCsP8mwEZ514H4aDSd_SEfHy2xbJPCOE4IrkBuB08Lg_/s446/000.JPG) repeat-y top left;
border : 1px solid #D8C37D;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.dt2:hover{
border : 1px solid #D8C37D;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
Mẫu 3
.dt3 {
overflow:auto;width:250px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#000000;
margin : 15px 35px 15px 15px;
padding : 15px 5px 10px 165px;
clear : both;
list-style-type : none;
background : #ffffff url(https://lh3.googleusercontent.com/--6QIh4ymE5Y/UVRYmXcuv9I/AAAAAAAAUWQ/X1sxOBKbykc/s427/special-offer-01.jpg) repeat-y top left;
border : 1px solid #ffffff;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.dt3:hover{
background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidNVu1rHlcphnCBQAPrppdJ2PVZAJZCzGsKh7rLvQvN63giw3cQbQY9nI2hFPaywn3KsZx2rOPA3Wgzd9iHyAUBBmfGzn9Trn4bnO_iC1v8csuHBAayzWVmgx4CQSKzZLeAomh1lmsnYLE/s427/%5Bwww.gj37765.blogspot.com%5Dmd3.jpg) repeat-y top left;
color:#000000;
border : 1px solid #ffffff;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
Mẫu 4
.dt4 {
overflow:auto;width:520px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000  repeat-y top left;
border : 1px  solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.dt4:hover{
overflow:auto;width:520px;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKemk8xDq8478HeLd6ArYcfec03E3GYUr838wMzKGNsbZOJ5xZyzbfYPbms6Vf0Lf8YCrRwwSDCTUKchBNZs4loYmz2y50oQX5YgISTW5WZV38qfp91QH5qWwjQeW_rVMVtjf6nVS_ZSBr/s450/1+%281%29.JPG) repeat-y top left;
color:#eee;
text-shadow:1px 1px 1px #000;
text-transform: capitalize;
border : 1px solid #000000;
border-left:20px solid #CCC;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
Mẫu 5
.dt5 {
overflow:auto;width:520px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 60px;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPu4VhY-EMZa32BrkZQU7Xxd8oIqe371kF300px5M3i8vRLgx9B9gncCyvgwcLrxK4rGMZBP71An2jeFOqaGcPY3vCigctC371CRw2X6_KnJ6ZzZliSwPtOVlH8wkZFjNPM_vWSuk9yH1m/s383/1.JPG) repeat-y top left;
border : 1px solid #ccc;
border-right:15px solid rgba(0, 0, 0, .100);
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
.dt5:hover{
overflow:auto;width:520px;height:auto;
background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA2018vNT_S8PnaPucLzqpL_ALC0nm_EgJUEoGTtHGfFkJYqOi3vQ4-1f06JgFbENXTz149vUJporBBBAjcVjLgoNrjGY_GJ8DN7BG3U5K-F5cuM_OxxMgystZRjVJ7iAk7vuNTyZ6S3JP/s383/1.JPG) repeat-y top left;
border : 1px solid #ccc;
border-right:15px solid rgba(0, 0, 0, .100);
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
Mẫu 6
.dt6 {
overflow:auto;width:520px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
color:000:
list-style-type : none;
background :#6D6C6A;
border : 1px solid #EEEEEE;
border-left:20px solid #000;
border-right:20px solid #000;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
.dt6:hover{
background : #000;
color:#fff;
border : 1px solid #EEEEEE;
border-left:20px solid #6D6C6A;
border-right:20px solid #6D6C6A;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
Mẫu 7
.dt7
{
color:#848176;
overflow:auto;width:520px;
background:black;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
border : 1px solid #000000;
border-left:10px solid #ccc;
border-right:10px solid #ccc;
list-style-type : none;
transition:width 2s;
text-position:fixed;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
box-shadow: 10px 10px 5px #888888;
}
.dt7:hover
{
width:520px;
color:#fff;
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
Mẫu 8
.dt8 {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #EEEEEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihL9P-Dez-eG-NgNBY5hYS4DH3yLaE00Epjnl2PeN0VlUp0sh3fD05UOdZoOssSJ-I5eOU6HBNzOOKPYrhilXBZdIenOtdXma1JTu4o6R-8N6XZNjqliW3QU_WWHU-tpDNKltMTj7QfDeH/s800/code+%28gj37765.blogspot.com.gif) repeat-y top left;
border-top : 1px solid #AAAAAA;
border-right : 1px solid #AAAAAA;
border-bottom : 1px solid #AAAAAA;
border-left : 1px solid #AAAAAA;
}
Mẫu 9
.dt9{
overflow:auto;width:520px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 15px 15px 15px;
padding : 20px 10px 0px 35px;
clear : both;
color:#ffffff;
list-style-type : none;
background : #F7F7F7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjla5D7knJfTVqJSIfqFgNS3v7Z3b2kKDvVqOgA3R-pJdnqfKvb0Ah9U_yxRtNGE8B2VmSUr3qDf9ZLSUDb5BtlDc9VQcekJ80WZLOvHH_Viu0rqWy94NOTzHk0BZMDwb9Q076kVnUlrw9k/s613/copy-to-clipboard-cmd-3.png) repeat-y top left;
border : 1px solid #EEEEEE;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
.dt9:hover{
background : #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjla5D7knJfTVqJSIfqFgNS3v7Z3b2kKDvVqOgA3R-pJdnqfKvb0Ah9U_yxRtNGE8B2VmSUr3qDf9ZLSUDb5BtlDc9VQcekJ80WZLOvHH_Viu0rqWy94NOTzHk0BZMDwb9Q076kVnUlrw9k/s613/copy-to-clipboard-cmd-3.png) repeat-y top left;
border : 1px solid #EEEEEE;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}
Cách sử dụng:
Sau khi lựa chọn khung ưng ý cùng với code tương ứng và làm theo hướng dẫn ở trên.
Khi viết bài ta đặt đoạn code đã mã hóa vào giữa 2 thẻ theo mẫu dưới đây
<div class="dt@">Code của bạn</div>
Trong đó @ tương ứng từ 1 tới 9 nếu bạn chọn mẫu 1 thì @=1
Khả năng tùy biến của các khung này là rất dễ dàng vì các bạn có thể bỏ thanh cuộn hoặc thêm thanh cuộn bằng cách thay đổi giá trị của chiều cao:
Có thanh cuộn thì ta giới hạn chiều cao:height là 1 giá trị vào khoảng từ 200px tới 250px cho đẹp.
Nếu không dùng thanh cuộn thì ta để height là auto.
Và ta cũng có thể thay đổi màu nền và chữ theo ý mình và cả font chữ luôn
Publis: 

إرسال تعليق

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji
noel