Tùy chỉnh Blockquote trong Blogger (blogspot)

Loading...

Blockquote - thường được dùng để trích dẫn, ghi chú hay nhấn mạnh vào 1 nội dung nào đó trong bài viết của Blogspot. Việc tùy chỉnh Blockquote sẽ giúp bạn đưa mạnh được ý nội dung trong đó mà bạn muốn truyền đạt cho bạn đọc. Bài viết này ITviet360 hướng dẫn bạn cách tùy chỉnh CSS giúp Blockquote đẹp hơn và theo ý của bạn.

Ví dụ xem Demo mẫu: TẠI ĐÂY

Trên đây là 1 ví dụ mẫu, và dưới đây là CSS dùng cho Demo đó:

.post blockquote{
background:#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqnu9geFRP54zlWY1pIlM7WPAcER_Hg48ARiMzzLk_yCXw-oL62oTfJk_ExfI2qOJDIB6Bd-isXiu_DkkuQeTtSgxI7bHupzTN0o1RwvYvM24PaLnKPOhfN1SsqgESxk_BUkm57Ad7qzZs/s1600/holder-itviet360.jpg");
float:left;
padding:0;
border: solid 1px #EFEFEF;
margin-right:4px;
margin-left:4px;
margin-top:15px;
margin-bottom:30px;
width:520px;
max-height:650px;
overflow:auto;
padding:5px 0 0 20px;
}
.post blockquote p{
padding-left:55px; margin:0;
}
.post blockquote:hover {
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}


Làm thế nào để tùy chỉnh Blockquote trong Blogger (blogspot)

Bước 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: (Ctrl + F) tìm tới .post blockquote và thay thế nó bằng đoạn code trên.
Bước 3: Lưu mẫu lại.
Như thế việc tùy chỉnh Blockquote hoàn toàn bằng khả năng thay đổi CSS của bạn. Ví dụ trên chỉ là 1 :)
Chúc các bạn vui vẻ !

Loading...

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger