Dùng Blockquote để trình bày code trong bài viết

Thông thường, khi muốn trình bày code trong bài viết, chúng ta thường sử dụng thẻ <code>...</code> hoặc <pre>...<pre>, tuy nhiên nếu trong bài viết có nhiều chỗ cần trình bày code thì bạn sẽ mất nhiều thời gian để viết bài vì chúng ta sẽ phải chuyển đổi qua lại giữa khung soạn thảo và HTML nhiều lần. Trong khi đó, trên khung soạn thảo của blogspot lại cho phép bạn sử dụng blockquote chỉ với một click chuột
Dùng Blockquote để trình bày code trong bài viết
Để sử dụng chức năng này, khi viết bài, bạn chỉ cần bôi đen đoạn cần thể hiện dưới dạng code, sau đó click vào biểu tượng blockquote trên thanh soạn thảo.
Dùng Blockquote để trình bày code trong bài viết
Và để cho blockquote thể hiện cho giống dạng code, bạn cần thay đổi CSS cho nó, chẳng hạn như để giống với hình minh họa thì bạn chèn đoạn CSS sau vào template của bạn:
.post blockquote {  display:block;  background: #f1f1f1;  padding: 8px 10px;  margin: 10px 10px;  font-size: 90%;font-family:monospace;  position: relative;  max-height: 250px;  overflow: auto; border-left: 2px solid #37c3d4;  border-right: 0.5px solid #37c3d4;  }
Chú ý là ở đoạn CSS trên, mình đã khống chế chiều cao tối đa cho chiều cao blockquote là 250px, bạn có thể thay đổi cho phù hợp với bạn
Share this on Google+ Tumblr

Leave a comment

To insert a link, use tag [url=http://your_link]your-link[/url]
To insert the code , use the tag <i rel="code">your-code</i>
The long code can use the tag <i rel="pre">your-long-code</i>
To insert an image , use the code [img]URL Image[/img]
To insert a title , use tag <b rel="h4">Your Title here...</b>
To creat Bold text <strong>Your text here...</strong>
To create Italic text used tag <em>Your text here...</em>

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3
Cancel