Hello mọi người hôm nay mình lại tiếp tục share thủ thuật blog Hướng dẫn tạo khung chứa code mình đang sử dụng cho mọi người
Cách Thực Hiện
Bước 1: Ta Chèn code phía dưới vào trước thẻ ]]></b:skin> nhé..post blockquote{margin:10px 0;text-align:left!important;padding:50px 10px 10px 15px;transition:.3s;font:400 17px Monospace;color:#888;max-height:400px;overflow:hidden;line-height:1.5;position:relative;background:#f4f4f4;border:2px solid #ddd;overflow:auto}Bước 2: ta thêm đoạn js vào trước thẻ </body>
.post blockquote:before{content:'\f121 CODE';font-family:"Font Awesome 5 Free",Roboto Condensed;font-weight:700;position:absolute;font-size:1em;left:0;top:0;margin:0;display:block;width:100%;background:#ddd;padding:10px;box-sizing:border-box; -webkit-transition: .3s;}
.post blockquote::-webkit-scrollbar{width:8px}
.post blockquote::-webkit-scrollbar-thumb{background:#ddd}
.post blockquote:-webkit-scrollbar-thumb:window-inactive{background:#ddd}
.post blockquote::-moz-scrollbar{width:8px}
.post blockquote::-moz-scrollbar-track{background:#eee}
.post blockquote::-moz-scrollbar-thumb{background:#ddd}
.post blockquote::-o-scrollbar{width:8px}
.post blockquote::-o-scrollbar-track{background:#eee}
.post blockquote::-o-scrollbar-thumb{background:#ddd}
.post blockquote:after{content:'Cick Double Để Copy Code';padding:2px 5px;width:auto;height:auto;font-family:"Font Awesome 5 Free",Roboto Condensed;position:absolute;right:8px;top:8px;color:#595b8a;font-weight:700;background-color:none;transition:all 0.3s ease-in-out;font-size:1em}
.post blockquote:hover::after{opacity:0;top:-8px;visibility:visible}
code{display: inline-block; position: relative; color: #6aafa3; margin: 0 5px; padding: 0 10px; transition: all .3s; border: 1px solid; border-radius: 4px; font: 400 18px Monospace;}
<script type='text/javascript'>
//<![CDATA[
for(var pres=document.getElementsByTagName("blockquote"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var a=getSelection(),b=document.createRange();b.selectNodeContents(this);a.removeAllRanges();a.addRange(b)},!1);
//]]>
</script>
Chúc các bạn thành công
Tags:
Thủ Thuật Blogspot
Hồng Hải bữa nay chăm đăng bài thế ? Cơ mà khung chứa code cũng đẹp, tinh tế.
Hay lắm , à mà Hồng Hải ơi mình có cái template edit nhầm , khung comment màu trắng k nhỉn rõ chữ giờ muốn đổi màu thì sao vậy ? Help Me !!!
Đã áp dụng ! Good tutorial.
css cuả b đẹp hơn Hồng Hải mà
Hồng Hải ơi mình có cái template edit nhầm , khung comment màu trắng k nhỉn rõ chữ giờ muốn đổi màu thì sao vậy ? Help Me !!!
chữ trên khung nó lỗi hả ad ~ ~ rảnh ghé blog em góp ý giúp em phát triển nha https://quocbaoblogit.blogspot.com/
nó không hiện Click Double để coppy mà kí tự gì á anh
đẹp đó anh
rồi sài sao ? đm anh :v
nhớ thêm phần :v xóa cái khung cũ r mới thêm khung mới đc
quá đẹp + thời gian đăng bài đẹp :v
Quá dữ
Rất là bắt mắt đó em :)
chán :v vc
Nhìn thì có vẻ như có ăn học mà cmt chẳng khác thằng vô học :)
Sorry mình cmt nhầm :)
Hay quá bác!
Thủ thuật hay đấy :)
giờ là đang sài cái này hay cái khác thế