Cách sử dụng chế độ chỉnh sửa Blogger
Hầu hết các blogger thường quá quen thuộc với chế độ chỉnh sửa bài viết trong các công cụ được hỗ trợ sẵn như hình. Mình cũng là một blogger và thường xuyên viết bài nhưng rất ít khi mình sử dụng hết cách công cụ này. Chủ yếu mình dùng kích cỡ font, bold, italic, liên kết, chèn ảnh....
Nhưng đó là những chế độ có sẵn và sử dụng rất hạn chế. Trong bài viết này mình sẽ hướng dẫn mọi người cách sử dụng triệt để các công cụ này. Mục đích là nhằm giúp bài viết của bạn trông sáng sủa, rành mạch và thu hút độc giả hơn.
Đầu tiên mình sẽ hướng dẫn mọi người cách sử dụng thẻ tiêu đề.
- Chế độ tiêu đề. Tương ứng với nó là thẻ <h2></h2>
- Tiêu đề con. Tương ứng với thẻ <h3></h3>
- Tiêu đề nhỏ. Tương ứng với thẻ <h4></h4>
- Giả sử mình muốn nội dung được định dạng trong chế độ tiêu đề theo ý mình. Thì mình sẽ style nó bằng CSS :
.post h2 {}
Còn với mình, mình sẽ dùng thẻ tiêu đề với CSS như sau (bạn có thể tham khảo) :
.post h2 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAxAsZ9tJyLBt1CUMYznHDG4Osqfj5GIaC3MknCHQS8CCJJWjAAY6CP6CBjBBWv7E2JSRkE6Nf3_6hR9j-v5dJOQwVNXGDuECPl2RU8SESGDycHij_yxs_BA-XygVpLQy1BU6jmDXL5So/s32/notebook.png") center no-repeat #E3F0F2;
border: 1px solid #6CC;
background-position: 7px 50%;
text-align: left;
font-weight: bold;
padding: 4px 10px 4px 45px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
width: 92%;}
Kết quả khi chọn văn bản với chế độ này của mình :
Đây là kết quả khi chọn với chế độ Tiêu đề sau khi được định dạng với CSS trên
- Tương tự. Tiêu đề con, Tiêu đề nhỏ sẽ được định dạng trong CSS:
.post h3{}
.post h4{}
Bạn có thể tham khảo CSS của mình :
Đã bị gạch chân 2 lần thay vì gạch ngang
.post h3{}
.post h4{}
Bạn có thể tham khảo CSS của mình :
.post h3 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbokWrlMxfFtrhmo-qijObKhTGl6dp4FYjKzR_oDyqoBo1nrmkGWzl2hVS1GP74yJPAtsb9M_XTqRZT8TsiZUoWrXA-yskGopJwt_PCp4uZaCUf47Z63nEoA63sRU6syIZEa8bSeEx6dQ/s24/post-header.png") no-repeat scroll 4px center transparent;
font-size: 20px !important;
text-align: left;
font-weight: 200;
padding: 5px 10px 5px 30px;
color: #00ACEE !important;
border: 3px solid #7CBB00;
text-shadow: 0px 1px 0px rgb(204, 204, 204);
border-radius: 10px 10px 10px 10px;
box-shadow: 0px 1px 3px rgb(198, 198, 198), 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1;
width: 628px;
line-height: 30px;
}
.post h4 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbokWrlMxfFtrhmo-qijObKhTGl6dp4FYjKzR_oDyqoBo1nrmkGWzl2hVS1GP74yJPAtsb9M_XTqRZT8TsiZUoWrXA-yskGopJwt_PCp4uZaCUf47Z63nEoA63sRU6syIZEa8bSeEx6dQ/s24/post-header.png") no-repeat scroll 5px center transparent;
clear: both;
color: #37C219;
font-size: 20px;
font-weight: bold;
line-height: 1;
margin: 5px 5px;
padding: 3px 10px 2px 40px;
text-transform: none;
font-family: v !important;
}
- Kết quả với văn bản được định dạng với Tiêu đề con, Tiêu đề nhỏ bằng CSS trên :
Tiêu đề con
Tiêu đề nhỏ
Sử dụng gạch ngang chữ (như hình)
Mặc định với chế độ này sẽ gạch ngang dòng chữ của bạn. Nhưng ở đây mình sẽ chỉnh nó để được gạch chân 2 lần và bỏ gạch ngang. Bạn dùng với CSS như sau (bạn có thể chỉnh lại style)
strike{
border-bottom: 3px double #7CBB00 !important;
text-decoration:none!important;
}
Kết quả của CSS trên :
Sử dụng blockquote
CSS cho blockquote và cũng là ví dụ :
blockquote
{margin: 10px 30px !important;
background: #f7fbfb!important;
overflow: auto !important;
text-align: left !important;
width: 604px !important;
min-height: 17px !important;
max-height: 250px !important;
padding: 8px 8px 8px 18px !important;
quotes: "“201C""”201D""‘2018""’2019" !important;
border-left: 5px solid #6CC!important;
border: 1px solid #6CC;
font-family: Tahoma, Arial;
color: #575757;
font-weight: normal !important;
border-radius:5px;
}
Sử dụng DEMO
Trong chế độ chỉnh sửa HTML bạn có thể dùng class này để làm nổi bật chữ demo hoặc download
/* Button Demo */
.button{
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:5px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
.orange.button{
color: white !important;
border: 1px solid #bea280 !important;
background-color: #7CBB00;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, #7CBB00 0,#7CBB00 100px),-moz-linear-gradient(#7CBB00, #7CBB00);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#7CBB00), to(#7CBB00));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
Cách dùng :
<a class="button orange medium" href="#">Demo</a>
<a class="button orange medium" href="#">Download</a>
Kết quả :
Sử dụng list
List có 2 loại là ol li và ul liBạn có thể tự style lại theo ý muốn với css:
.post ol li{}
.post ul li{}
Thêm toàn bộ CSS trong bài viết này vào blog của bạn :
Thêm trước ]]></b:skin>
/* Button Demo */
.button{
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:5px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
.orange.button{
color: white !important;
border: 1px solid #bea280 !important;
background-color: #7CBB00;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, #7CBB00 0,#7CBB00 100px),-moz-linear-gradient(#7CBB00, #7CBB00);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#7CBB00), to(#7CBB00));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
.post h3 a
{
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEiV_9mWnC_oItU_BD4fM8fRzfInOmPrSy6gi5AjIxZYNuahSk4NQJgdyZJxDNJ8Q4qgcD_0TIMzDxY7cxsYbgVbK06wkZwMZiolXJqMv7BsUov-U9Y3SjBloW8pS88HFpnAZbx3zQlU/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:5px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.post h2{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAxAsZ9tJyLBt1CUMYznHDG4Osqfj5GIaC3MknCHQS8CCJJWjAAY6CP6CBjBBWv7E2JSRkE6Nf3_6hR9j-v5dJOQwVNXGDuECPl2RU8SESGDycHij_yxs_BA-XygVpLQy1BU6jmDXL5So/s32/notebook.png") center no-repeat #E3F0F2;
border: 1px solid #6CC;
background-position: 7px 50%;
text-align: left;
font-weight: bold;
padding: 4px 10px 4px 45px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
width: 92%;
}
.post h3 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbokWrlMxfFtrhmo-qijObKhTGl6dp4FYjKzR_oDyqoBo1nrmkGWzl2hVS1GP74yJPAtsb9M_XTqRZT8TsiZUoWrXA-yskGopJwt_PCp4uZaCUf47Z63nEoA63sRU6syIZEa8bSeEx6dQ/s24/post-header.png") no-repeat scroll 4px center transparent;
font-size: 20px !important;
text-align: left;
font-weight: 200;
padding: 5px 10px 5px 30px;
color: #00ACEE !important;
border: 3px solid #7CBB00;
text-shadow: 0px 1px 0px rgb(204, 204, 204);
border-radius: 10px 10px 10px 10px;
box-shadow: 0px 1px 3px rgb(198, 198, 198), 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1;
width: 628px;
line-height: 30px;
}
.post h4 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbokWrlMxfFtrhmo-qijObKhTGl6dp4FYjKzR_oDyqoBo1nrmkGWzl2hVS1GP74yJPAtsb9M_XTqRZT8TsiZUoWrXA-yskGopJwt_PCp4uZaCUf47Z63nEoA63sRU6syIZEa8bSeEx6dQ/s24/post-header.png") no-repeat scroll 5px center transparent;
clear: both;
color: #37C219;
font-size: 20px;
font-weight: bold;
line-height: 1;
margin: 5px 5px;
padding: 3px 10px 2px 40px;
text-transform: none;
font-family: v !important;
}
strike{
border-bottom: 3px double #7CBB00 !important;
text-decoration:none!important;
}
blockquote
{margin: 10px 30px !important;
background: #f7fbfb!important;
overflow: auto !important;
text-align: left !important;
width: 604px !important;
min-height: 17px !important;
max-height: 250px !important;
padding: 8px 8px 8px 18px !important;
quotes: "“201C""”201D""‘2018""’2019" !important;
border-left: 5px solid #6CC!important;
border: 1px solid #6CC;
font-family: Tahoma, Arial;
color: #575757;
font-weight: normal !important;
border-radius:5px;
}
.post ul li{}
.post ol li{}
(Vui lòng ghi rõ nguồn erhay khi bạn phát hành lại thông tin từ trang này)
- Rất vui khi được mọi người nhận xét, đóng góp ý kiến để bài viết chất lượng hơn.
- Các ý kiến mang nội dung xấu, tính chất spam, chia rẽ, vi phạm sẽ bị xóa mà không nhắc nhở.
- Comment và share bài viết nếu bạn cảm thấy hay và thú vị.
- Không quên ghi lại nguồn erhay khi bạn phát hành lại thông tin từ trang này.