30 Stylish Heading Tags cho Blogger với CSS ~ Iris Tips

Stylish Heading Tags for Blogger with CSS

Làm thế nào để đổi Heading Style trong Blogger bằng CSS? Đó là câu hỏi mà một số bạn đã hỏi Iris Tips để làm cho bài viết của họ hấp dẫn và thân thiện hơn trong mắt bạn đọc. Vì vậy trong bài viết này Iris Tips sẽ giới thiệu cho các bạn một số kiểu Heading Tags đẹp nhắm giúp cho blog của bạn trông hiện đại hơn. Hy vọng bạn sẽ thích thủ thuật này.

1. CSS Heading Tags

Chọn CSS mà bạn thích sau đó dán vào trước thẻ ]]></b:skin>

Style 1

 .post h3{ 
color:#0080ff; 
border-bottom:1px solid #289728; 
font-size: 12pt; 
padding:2px; 
}

Style 2

 .post h3{ 
color:#0080ff; 
border-top:1px solid #289728; 
border-bottom:1px solid #289728; 
font-size: 12pt; 
padding:3px; 
}

Style 3

 .post h3{ 
color:#0080ff; 
border:1px solid #289728; 
font-size: 12pt; 
padding:2px; 
}

Style 4

 .post h3{ 
color:#0080ff; 
border-top:1px dotted #289728; 
border-bottom:1px dotted #289728; 
font-size: 12pt; 
} 
.post h3:hover{ 
border-top:1px dotted #0080ff; 
border-bottom:1px dotted #0080ff; 
background-color: #289728; 
color:#fff; 
}

Style 5

 h3{ 
font-family:veranda !important; 
font-style:italic !important;
} 
.post h3 { 
color:#666; 
border-left:10px solid #666; 
border-right:10px solid #666; 
padding:3px 5px 3px  20px; 
border-radius:15px; 
-moz-border-radius:15px; 
box-shadow:0px 0px 13px #666; 
-webkit-box-shadow:0px 0px 13px #666; 
-moz-box-shadow:0px 0px 13px #666;

}
.post h3:hover { 
color:#FF133F; 
border-left:10px solid #FF133F; 
border-right:10px solid #FF133F; 
box-shadow:0px 0px 13px #FF133F; 
-webkit-box-shadow:0px 0px 13px #FF133F; 
-moz-box-shadow:0px 0px 13px #FF133F; 
}

Style 6

 .post h3 {
  border: 1px dashed #C7C7C7;
  padding: 3px;
  box-shadow: 2px 2px 5px;
  padding-left: 10px;
  margin-bottom: 7px;
  border-radius: 10px;
  border-bottom-color: #000;
  background: rgba(218, 218, 218, 0.04);
  border-bottom-right-radius: 100px;
}

Style 7*

 .post h3 {
  padding: 3px;
  text-shadow: -2px -1px 1px #060606;
  box-shadow: -3px 2px 3px #000;
  padding-left: 10px;
  margin-bottom: 7px;
  background: #303030;
  color: #F7F7F7;
}
.post h3:before {
  font-family: FontAwesome;
  position: relative;
  content: '\f054';
  font-size: 17px;
  padding-right: 10px;
}

Style 8*

 .post h3 {
  padding: 3px;
  text-shadow: -1px -1px 0px #000000;
  box-shadow: -2px 2px 3px #000;
  padding-left: 10px;
  margin-bottom: 7px;
}
.post h3:before {
  font-family: FontAwesome;
  position: relative;
  content: '\f02d';
  text-shadow: 0px 0px 0px #000;
  color: #000;
  font-size: 17px;
  padding-right: 10px;
}

Style 9*

 .post h3{
  padding: 3px;
  padding-left: 10px;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-color: #FEBD17;
  border-radius: 9px;
  box-shadow: 2px 2px 2px;
  border: #000 1px solid;
}
.post h3:before {
  font-family: FontAwesome;
  position: relative;
  content: '\f061';
  font-size: 17px;
  padding-right: 10px;
}

Style 10

 .post h3 {
margin: 0px 0px 10px;
padding: 10px;
background-color: #00ABC5;
box-shadow: 0px 3px 0px #4ACCDF;
color: #FFF;
font-size: 16px;
line-height: 16px;
font-family: "Bree Serif",serif;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
}

Style 11

 .post h3 {
  background: transparent url("http://2.bp.blogspot.com/-jNxuEWNpGTk/UV7-6ovsE3I/AAAAAAAABYs/tXcNlEqxCwM/s1600/h2.jpg") repeat-x scroll 0px 0px;
  color: #FFF;
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 0px;
  font-family: fantasy;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 1px 6px 3px #000;
  padding: 10px 2px 10px 10px;
  text-shadow: 0px 1px #000;
  text-transform: uppercase;
}

Style 12

 .post h3{
margin-top:10px;
    max-width:95%;
    padding:6px 2px;
color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:20px;
    font-family:'Oswald',sans-serif;
    background-color:#F8FAFD;
    text-decoration:none;
    border-left:10px solid #05A8FC;
    box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h3:hover {
  border-left:10px solid #FC2B2C;
}

Style 13

 .post h3 {
color:#222222;
border-left:10px solid #222222;
border-right:10px solid #222222;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #222222;
-webkit-box-shadow:0px 0px 13px #222222;
-moz-box-shadow:0px 0px 13px #222222;
}
.post h3:hover {
color:#219DFC;
border-left:10px solid #219DFC;
border-right:10px solid #219DFC;
box-shadow:0px 0px 13px #219DFC;
-webkit-box-shadow:0px 0px 13px #32A4FC;
-moz-box-shadow:0px 0px 13px #32A4FC;
}

Style 14

.post h3{
background: #F9F9F9;
font-family:'Oswald',sans-serif;
font-size: 120%;
padding: 6px 12px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #03DA03;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height:1.0em;
}
.post h3:hover {
border-bottom: 4px solid #003F80;
}

Style 15

 .post h3 {
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
border: 3px solid rgb(251, 10, 38);
padding: 0px 1px 4px 14px;
box-shadow: rgb(251, 10, 38) 3px 3px3px;
color: rgb(251, 10, 38);
font-family:'Oswald',sans-serif;
font-size:120%;
font-weight:400;
margin: 0px 0px 1em;
text-transform: uppercase;
text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}

Style 16

 .post h3 {
border:3px dashed #000000;
border-bottom:5px solid #000000;
padding: 0px 1px 4px 14px;
box-shadow: rgb(251, 10, 38) 3px 3px 3px;
color: rgb(251, 10, 38);
font-family:'Oswald',sans-serif;
font-size:120%;
font-weight:400;
margin: 0px 0px 1em;
text-transform: uppercase;
text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}

Style 17

 .post h3 {
background:#333;
margin:5px 4px 5px 0;
padding:9px 0 9px 10px;
border:0;
color:white;
font-size:120%;
line-height:16px;
font-family:'Oswald',sans-serif;
text-decoration:none;
text-transform:uppercase;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
}

Style 18

 .post h3 {
padding:5px;
border:5px dashed #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}

Style 19

 .post h3 {
padding:5px;
border:5px dotted rgb(251, 10, 38);
color:#000000;
font:140% 'Oswald',Sans-Serif;
}

Style 20

 .post h3 {
padding:5px;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
color:#333333;
font:140% 'Oswald',Sans-Serif;
text-transform: uppercase;
}

Style 21

  .post h3{
color:#5daef2;
border:1px solid 5daef2;
font-size: 18px;
padding:5px;
padding-left:20px;
border-radius:20px;
box-shadow:0px 0px 12px #2091f0;
}

Style 22

 .post h3{
color:#e9ae20;
border:1px dotted #e9ae20;
font-size: 18px;
padding:5px;
padding-left:20px;
border-radius:20px;
}

Style 23

 .post h3 {
background-attachment: scroll;
background-color: white;
background-image: url('http://1.bp.blogspot.com/-hSWWgNO_pOs/VOToQXw_wmI/AAAAAAAABsU/SYUSJONNRQM/s1600/h3.png');
background-position: 5px 40%;
background-repeat: no-repeat no-repeat;
border: 2px solid;
border-radius: 80px 80px 80px 80px;
box-shadow: 0 1px 3px, 1px 1px 0 inset;
color: #333333;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: 1.7;
list-style: none outside none;
margin: 13px 3px;
outline: medium none;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0;
text-transform: uppercase;
vertical-align: baseline;
}

Style 24

 .post h3 { 
    background-attachment: scroll; 
    background-color: white; 
    background-image: url("http://2.bp.blogspot.com/-Om2OSEw8_Dw/VOTqzN0-2dI/AAAAAAAABso/AiT4uNsOVBs/s1600/h3.png"); 
    background-position: 0 50%; 
    background-repeat: no-repeat no-repeat; 
    border: 3px solid #0D7005; 
    border-radius: 14px 14px 14px 14px; 
    box-shadow: 3px 3px 3px #ABABAB; 
    color: #25991C; 
    font-family: Lobster,cursive; 
    font-size: 20px; 
    font-weight: normal; 
    margin: 0 0 1em; 
    padding: 0 1px 4px 34px; 
    position: relative; 
    text-shadow: 1px 1px 0 #000000; 
    text-transform: capitalize; 
}

Style 25

 .post h3{
background: url("http://1.bp.blogspot.com/-hSWWgNO_pOs/VOToQXw_wmI/AAAAAAAABsU/SYUSJONNRQM/s1600/h3.png") no-repeat scroll 4px center transparent;
border: 3px solid #C8C800;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
color: #A5A503;
font-family: ‘lobster’,sans-serif;
font-size: 19px;
font-weight: bold;
line-height: 1;
margin: 15px 3px;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase;
}

Style 26

 .post h3{
text-align: center;font-weight:bold;border:solid 5px #999c3b;
font-size:17px;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;padding:3px}

Style 27

 .post h3{
text-align: center;font-weight:bold;border:solid 4px #0fc7ff;font-size:17px;
-moz-border-radius-topleft: 55px;
-moz-border-radius-topright:55px;
-moz-border-radius-bottomleft:55px;
-moz-border-radius-bottomright:55px;
-webkit-border-top-left-radius:55px;
-webkit-border-top-right-radius:55px;
-webkit-border-bottom-left-radius:55px;
-webkit-border-bottom-right-radius:55px;
border-top-left-radius:55px;
border-top-right-radius:55px;
border-bottom-left-radius:55px;
border-bottom-right-radius:55px;}

Style 28

 .post h3 {  border-bottom: 2px solid #0078ff;
font-size: 18px;
color: #0078ff;
padding: 0;
margin: 10px 0;
font-family: 'Roboto', sans-serif;
text-align: left;
font-weight: 400;
text-shadow: 0 0 2px
;}

Style 29

 .post h3 {font-size:120%; font-weight:bold;
padding-bottom: 5px; margin: 10px 0;
background: #E3F0F2 url(http://2.bp.blogspot.com/-rYrj9bjhWEU/VDGo7uyJlkI/AAAAAAAAACY/ZxjX8wlLhFI/s1600/note.png) center no-repeat;
border: 1px solid #6CC;
background-position: 7px 50%;
padding: 10px 10px 10px 50px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

Style 30

 .post h3 {background: url(http://4.bp.blogspot.com/-46e73WBN3IA/VUca1yDdTLI/AAAAAAAAA2M/aF22DVUoZWI/s1600/wfdex-651285-4043.gif)  left 6px top 50% no-repeat scroll rgb(67, 97, 247); border: 1px dashed rgb(116, 138, 247); color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: normal; list-style: none; margin: 10px 0px; outline: rgb(67, 97, 247) solid 4px; padding: 0px 1px 4px 45px; position: relative; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;
}

*Lưu ý: đối với Style 7, 8, 9 bạn cần thêm thư viện FontAwesome bằng cách thêm đoạn code dưới đây trước thẻ <b:skin>

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Sử dụng Heading Tags khi viết bài

Khi viết bài, sau khi chọn được Style CSS mà bạn thích, bạn cần viết theo cú pháp sau:

 <h3>...Nội dung...</h3>

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

Iris Tips

30 Stylish Heading Tags cho Blogger với CSS

Iris Tips

Có thể bạn quan tâm

Mẹo nhỏ khi bình luận

2 Comments

Iris Tips

30 Stylish Heading Tags cho Blogger với CSS

Stylish Heading Tags for Blogger with CSS

1. CSS Heading Tags

Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Style 7*

Style 8*

Style 9*

Style 10

Style 11

Style 12

Style 13

Style 14

Style 15

Style 16

Style 17

Style 18

Style 19

Style 20

Style 21

Style 22

Style 23

Style 24

Style 25

Style 26

Style 27

Style 28

Style 29

Style 30

2. Sử dụng Heading Tags khi viết bài

Iris Tips

Có thể bạn quan tâm

Hơn 10.000 độc giả đã đăng ký thành công

Mẹo nhỏ khi bình luận

2 Comments

Cập nhật mới trên Iris Tips

Phiếu khảo sát