Cách Nâng Cấp BlockQuote lên bản siêu chất cho Blogger

Xin chào các bạn, sau một hồi ngồi mò code trong template BSW Professional thì mình thấy điểm nổi bật nhất của template này là BlockQuote và Comment Form , vì vậy mình đã quyết đinh sẽ share cho các bạn cách làm khung comment này.

Để làm được bạn chỉ cần tìm CSS của blockquote cũ ( thường là ".post blockquote" )

.post blockquote

Xóa hết CSS có liên quan đến Blockquote cũ đi và thay thế lên CSS mới, cách xóa thì chắc coder nào cũng biết rồi nên mình sẽ bỏ qua bước xóa.

Bạn tìm thẻ và cho đoạn CSS bên dưới lên trước thẻ này

]]></b:skin 

.post blockquote,.post code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.post-body img{height:auto;max-width:100%;transition:.4s;display:block}.post-body img:hover{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.separator{margin:0!important;pointer-events:none}a.post-body img,.separator a{margin:0!important}.post-body i{font-style:normal!important}.post-body a{font-weight:700}.post-body a:hover{color:#7577a9}.post-body a:focus{color:#c3963f}.post-body br{content:"";display:block;padding:4px}.post-body h3{margin:10px 0;color:#66689c;font:700 16px Roboto}.post-body h2{font:700 18px "Roboto Slab",sans-serif;margin:15px 0;color:#7577a9}.tr-caption{font-size:15px}.post-body ul{padding-left:10px!important;margin:5px 0!important}.post-body ul li{list-style:none;padding:0;transition:.35s;line-height:1.75}.post-body ul li:before{content:"\f00c";margin:0 10px;font-family:"Font Awesome 5 Free";font-weight:900}.post blockquote{margin:10px 0;text-align:left!important;padding:10px 10px 10px 55px;transition:.3s;font:400 15px Monospace;color:#888;max-height:412px;overflow:hidden;line-height:1.5;position:relative;background:#f4f4f4;border:2px solid #ddd}.post blockquote:before{content:'\f121';font-family:"Font Awesome 5 Free";font-weight:700;position:absolute;font-size:1em;left:0;top:0;margin:0;display:block;height:100%;background:#ddd;padding:10px;box-sizing:border-box}.post blockquote::afterr{content:'HOVER TO SEE FULL CODE';position:absolute;top:35%;left:-10%;transform:rotate(-90deg);font:900 16px Roboto;color:#999}.post blockquote:hover:after{display:none}.post blockquote:hover{max-height:100%;color:#666}blockquote br{display:inherit!important;padding:0!important}.post blockquote::-webkit-scrollbar{width:5px}.post blockquote::-webkit-scrollbar-thumb{background:#ddd;border-radius:100px}.post blockquote::-webkit-scrollbar-thumb:active{background:#bbb}.post div.box{background:#f3f3f3;border-radius:4px;color:#666;padding:15px;margin:.5em 0}code{display:inline-block;position:relative;color:#4272b7;margin:0;transition:all .3s;border-radius:4px;font:400 15px Monospace;background:#eee} 

Lưu template lại và tận hưởng thành quả !