Tuesday, July 21, 2015


Bạn đã biết tác dụng của tag blockquote trong html chưa? Đây là một trong những tag html quan trọng giúp bạn định dạng văn bản chuyên nghiệp hơn trong hệ thống blog của mình và đặc biệt giúp blog của bạn thể hiện rõ những nội dung quan trọng mà bạn không cần mất nhiều thời gian để format trong file css.

Nếu bạn đã chán với tiêu chuẩn blogspot Blockquote, thì đây chắc chắn bạn sẽ tìm thấy tab blockquotes mang phong cách mới mẻ cho Blogspot.

Blockquote là một thẻ HTML được sử dụng để xác định báo giá dài trong một bài viết. Trong HTML hoặc XHTML Blockquote là một yếu tố được sử dụng để định dạng một phần trong bài viết được trích dẫn từ nguồn khác. Nói cách đơn giản, tôi sử dụng nó trên blog của tôi để trích dẫn một số ký tự đặc biệt hoặc một số mã như JavaScript, CSS, HTML hoặc jQuery. Đôi khi bạn không muốn sử dụng Blockquote mặc định Của Blogger .Vì vậy, ngày hôm nay trong bài viết này tôi sẽ chia sẻ với bạn 9 tag blockquote  để làm cho nội dung của bạn thêm thân thiện và bắt mắt.

Làm thế nào để Thêm Blockquote trong Blogger bằng CSS

1.  Đăng nhập vào Blogger Dashboard >> Template >> Edit HTML

sửa-template-settings

2.  Tìm kiếm </ head>
3.  Bây giờ sao chép đoạn mã được mô tả dưới đây và dán nó ngay trên </ head>
4.  Sau đó Click vào nút lưu để lưu các thiết lập của bạn

Thêm Blockquotes trong Blogger Post

1.  Tạo bài viết mới
2.  Bây giờ đúng một số từ của dòng hoặc đoạn mà bạn muốn trích dẫn.
3.  Bây giờ chọn đoạn hay đường và bấm vào " Quote "nút. (Xem hình bên dưới)

nút quote

4.  Bây giờ thấy preview của bạn gửi ...

Các mẫu  đẹp nhất cho Blockquote trong Blogger

Mẫu 1
Demo 1
 <style>
.post blockquote {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 2px 10px 5px 60px;
line-height:1.7em;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsjZe_Xlff_GNAIzXXZMYmQxFT8qU9TV3xfnMvu2Meq-saWxTmru-z45PqEi8rd9nTCzkZbNO7iZW1W-GToTmZ4lb4WCE7KIm3qytVOgslCmNi9gQCbZxzicGWUZzN96xtgGTPWwBkao0S/s1600/notepad1.gif) repeat-y top left;
border : 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
</style>

Mẫu 2

Demo 2
 <style>
.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FC8E42;
border-radius: 240px 240px 240px 240px;
color: #333333;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}
</style> 

Mẫu 3

Demo 3
  <style>
.post blockquote {
padding:10px 15px;
margin: 5px 15px;
border: 1px solid #E1E1E1;
background-color: #F6F6F6;
font-size: 15px;
font-family: Times;
}
.post blockquote:before {
content: "\201C";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}
</style>

Mẫu 4

Demo 4
  <style>
.post blockquote {
 display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
    font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  color: #446578;
  text-align: justify;
  border-left: 15px solid #EBF2F8;
  border-right: 1px dotted #EBF2F8;
    -moz-box-shadow: -1px 2px 5px #ccc;
  -webkit-box-shadow: -1px 2px 5px #ccc;
  box-shadow: -1px 2px 5px #ccc;
}
.post blockquote:before{
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #8DACC0;
  position: absolute;
  left: 10px;
  top:5px;
}
.post blockquote:after{
  content: "";
}
.post blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}
.post blockquote a:hover{
 color: #666;
}
</style>

Mẫu 5

Demo 5
 <style>
.post blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUJwqBaka_sJKNVgY_tz1qvKjxdxHYAbOJc7DjrLV73X2Dq0tvtBT_hcLhu0Z3c_7YCQGSYFfhHGH-4IIvzshnnCvJ9xJVxxg4gvR9vS6rp54zZHYLTApzVHEmx7Mik7iyonK2sbNMgNI/s1600/green-black-side.gif) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 1.3em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
</style>

Mẫu 6

Demo 6
  <style>
.post blockquote {
margin : 0 10px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
color : #484848;
border: 5px dotted #fff;
}
</style>

Mẫu 7

Demo 7
  <style>
.post blockquote {
border: 2px solid rgb(255, 204, 0);
padding: 8px 10px;
font-size: 120%;
color: black;
font-weight: bold;
background-color: rgb(255, 255, 153);
border-radius:20px 20px 0 20px;
}
</style>

Mẫu 8

Demo 8
 <style>
.post blockquote {
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1.2em;
margin-left: 5%;
margin-right: 5%;
}
</style>

Mẫu 9

Demo 9
 <style>
.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 10px dotted white;
background-color: #f6ebc1;
}
</style>

Bài viết liên quan:

  • Hướng dẫn tạo blog miễn phí với WordPress để kiếm tiền Hiện nay, WordPress.com là blog miễn phí được sử dụng rất rộng rãi vì có rất nhiều chức năng, nhiều theme giao diện đẹp và rất dễ dùng. Trong bài viết này tôi chỉ xin giới thiệu với các bạn cách tạo một blog trên WordPress… Read More
  • Thêm số điện thoại liên hệ trong Osclass Mặc định Osclass không hiển thị số điện thoại để liên hệ khách hàng hôm nay mình sẽ giới thiệu cho các bạn cách thêm số điện thoại vào trang bán hàng của bạn với mã nguồn Osclass. Bước 1: bạn hãy tìm file struct.sql … Read More
  • Chia sẻ theme blog làm trang tin tức Chia sẻ theme blog làm trang tin tức đẹp cho các bạn muốn có một trang tin tức đẹp. Các tính năng nổi bật Thiết kế đáp ứng responsive 100% Mặc định màu cam trên website. Có thể tùy chọn màu sắc của theme bởi người sử dụng… Read More
  • Tạo một ảnh 3D sử dụng CSS trong Blogger Tạo một ảnh 3D sử dụng CSS trong Blogger đem đến cho Blog của bạn một phong cách mới, thu hút được người xem. Vì vậy, trong bài viết này tôi sẽ hướng dẫn cách làm hình ảnh lật với hiệu ứng 3D , mà bạn phải thí… Read More
  • Hiển thị bài viết gần đây có hình Thumbnails theo nhãn cho blog  Hiển thị bài viết gần đây kèm theo hình ảnh cho bài viết theo nhãn đang được các bạn quan tâm để trang chí cho blog của mình thêm chuyên nghiệp. Bài viết này minh văn sẽ hướng dẫn cho các bạn làm thế nào để hiển thị … Read More

Văn Phòng

Nơi chia sẻ cho bạn kiến thức về lĩnh vực Văn Phòng cơ bản nhất bao gồm Word, Excel, PowerPoint...

Mã Nguồn Website

Nơi chia sẻ cho bạn kiến thức về lĩnh vực Mã Nguồn Mở Website thông dụng nhất bao gồm Blog, Wordpress,Joomla,OSClass, NukeViệt...

Thủ Thuật SEO

Nơi chia sẻ cho bạn kiến thức về lĩnh vực SEO cơ bản nhất bao gồm Mạng xã hội, Blog, Website, Google...

Kiếm Tiền Online

Nơi chia sẻ cho bạn kiến thức về lĩnh vực Kiếm Tiền Online cơ bản nhất bao gồm Tiếp thị liên kết, đặt quảng cáo, viết blog, website...

Bài mới

Internet

Nơi chia sẻ cho bạn kiến thức cơ bản về lĩnh vực Internet như; Mạng xã hội, Blog, Website...

Tin Công Nghệ

Cập nhập tin tức mới nhất về lĩnh vực công nghệ như; Điện thoại, Máy tính...
  • Dế Lumia 2016 sẽ dùng Snapdragon 820?
    Theo những nguồn tin mới nhất thì Microsoft đang tích cực thử nghiệm chip Snapdragon 820 cho các thiết bị di động ra mắt vào năm 2016. Sau khi trình làng Lumia 950 và 950 XL, Microsoft...
  • Cấu hình desktop cho người dùng gia đình
    Mặc dù hiện nay laptop rất phổ biến, nhưng nếu bạn muốn cấu hình máy tốt hơn, mạnh mẽ hơn, dễ dàng nâng cấp và dễ kiểm soát con cái khi chúng sử dụng máy tính cho việc học tập, vui chơi giải trí...
  • Sony chuẩn bị ra mắt máy ảnh cảm biến 50 megapixel
    Theo thông tin được đăng tải từ SonyAlphaRumors, Sony hiện tại đang bí mật phát triển máy ảnh mới với công nghệ cảm biến hình ảnh có độ phân giải lên đến 50 megapixel. Bên cạnh đó, thế...