[Blogspot] Chia sẻ 12 mẫu Blockquote đẹp cho blog

Hôm nay mình sẽ share cho các bạn 12 mẫu blockquote (trích dẫn) đơn giản mà đẹp cho blogspot nhé.

Cách thực hiện: Bước 1: Truy cập quản trị Blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Copy và paste đoạn CSS dưới vào trước thẻ ]]></b:skin>

@import url('https://fonts.googleapis.com/css?family=Montez');
@import url(https://fonts.googleapis.com/css?family=Francois+One);
 
body{
  background: #f5f7fa;
  margin:10px;
  padding:10px;
  font-family:sans-serif;
}
 
blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
 
  /*Font*/
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.2;
  color: #666;
 
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
 
  /*Borders - (Optional)*/
  border-left-style: solid;
  border-left-width: 15px;
  border-right-style: solid;
  border-right-width: 2px;
}
 
blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
 
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
 
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
 
}
 
blockquote::after{
  /*Reset to make sure*/
  content: "";
}
 
blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}
 
blockquote a:hover{
 color: #666;
}
 
blockquote em{
  font-style: italic;
}
 
  /*Default Color Palette*/
blockquote.default{
  border-left-color: #656d77;
  border-right-color: #434a53;
}
 
/*Grapefruit Color Palette*/
blockquote.grapefruit{
  border-left-color: #ed5565;
  border-right-color: #da4453;
}
 
/*Bittersweet Color Palette*/
blockquote.bittersweet{
  border-left-color: #fc6d58;
  border-right-color: #e95546;
}
 
/*Sunflower Color Palette*/
blockquote.sunflower{
  border-left-color: #ffcd69;
  border-right-color: #f6ba59;
}
 
/*Grass Color Palette*/
blockquote.grass{
  border-left-color: #9fd477;
  border-right-color: #8bc163;
}
 
/*Mint Color Palette*/
blockquote.mint{
  border-left-color: #46cfb0;
  border-right-color: #34bc9d;
}
 
/*Aqua Color Palette*/
blockquote.aqua{
  border-left-color: #4fc2e5;
  border-right-color: #3bb0d6;
}
 
/*Blue Jeans Color Palette*/
blockquote.bluejeans{
  border-left-color: #5e9de6;
  border-right-color: #4b8ad6;
}
 
/*Lavander Color Palette*/
blockquote.lavander{
  border-left-color: #ad93e6;
  border-right-color: #977bd5;
}
 
/*Pinkrose Color Palette*/
blockquote.pinkrose{
  border-left-color: #ed87bd;
  border-right-color: #d870a9;
}
 
/*Light Color Palette*/
blockquote.light{
  border-left-color: #f5f7fa;
  border-right-color: #e6e9ed;
}
 
/*Gray Color Palette*/
blockquote.gray{
  border-left-color: #ccd1d8;
  border-right-color: #aab2bc;
}

Bước 3: Lưu lại template.
Cách dùng:
Mỗi khi muốn trích dẫn một thứ gì đó thì dùng đoạn HTML sau (lưu ý là đổi sang tab HTML nhé)

Chúc các bạn thành công và share bài viết nếu thấy nó có ích nhé :)

Code: thuthuatweb

#Blogspot #Thủ thuật

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!

[Blogspot] Chia sẻ 12 mẫu Blockquote đẹp cho blog

TSM Blogger

Bài viết cùng chuyên mục

0 bình luận Tổng hợp bình luận