Lượt xem bài viết : 0
Thủ Thuật Wordpress

Hướng dẫn tạo thẻ tiêu đề title đẹp cho website wordpress

Posted on by Admin

Rất nhiều bạn tập làm web wourdpress rất muốn có thẻ tiêu đề website đẹp như thế này. Hôm nay mình sẽ hướng dẫn chi tiết các bước để các bạn cũng có thể làm được.

Các bước tạo thẻ tiêu đề title đẹp cho website wordpress

Bước 1: Chèn Css của mẫu tiêu đề

Với các bạn chưa quen với code và wordpress có thể làm theo cách sau:

Cài plugin Simple Custom CSS and JS

Tại Menu chức năng của giao diện admin, thêm mới CSS, copy mã code CSS , ấn Đăng (Xem các mã code CSS bên dưới)

Tại giao diện trang chủ, bạn chọn nơi cần thêm tiêu đề, tạo mã html, copy code html vào, lưu lại và tận hưởng thành quả.

Các mẫu thẻ tiêu đề title đẹp cho website wordpress

Mẫu 01

CSS mẫu 01

div#nz-div {
border-bottom: 2px solid #2ecc71;
margin-bottom: 40px;
display: block;
}

#nz-div h3.tde {
margin: 0;
font-size: 16px;
line-height: 20px;
display: inline-block;
text-transform: uppercase;
}

#nz-div h3.tde :after {
content: “”;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 20px solid #2ecc71;
border-bottom: 0px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -20px;
}

#nz-div h3.tde span {
background: #2ecc71;
padding: 10px 20px 8px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
}

Code mẫu 01

<div id=’nz-div’>
  <h3 class=”tde”>
<span class=”null”>Nấm độc có thể ăn được ít nhất 1 lần</span>
  </h3>
</div>

Mẫu 02

CSS mẫu 02

#nz-div-2 h3.tde :after {
content: “”;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-left: 15px solid #3498db;
border-bottom: 19px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -15px;
}

#nz-div-2 h3.tde span {
background: #3498db;
padding: 11px 20px 9px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
}

#nz-div-2 h3.tde {
margin: 15px 0;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

#nz-div-2 hr {
margin: -34px 0px 54px 0px;
border: 1px solid #3498db;
}

Code mẫu 02

<div id=’nz-div-2′>
  <h3 class=”tde”>
<span>Quay đầu là bờ. Bơi sang kia cũng là bờ</span>
  </h3>
  <hr>
</div>
Mẫu 03
<div id=’nz-div-3′>
  <h3 class=”tde”>
<span>Con nhà nghèo nên không nuôi mèo</span>
  </h3>
</div>

#nz-div-3 h3.tde span {
background: #e74c3c;
padding: 10px 20px 8px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
border-radius: 23px 23px 0px 0px;
}

#nz-div-3 h3.tde {
margin: 15px 0;
border-bottom: 2px solid #e74c3c;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

Mẫu 04

<div id=’nz-div-4′>
  <h3 class=”tde”>
<span>Sau cơn mưa thì trời vẫn tối</span>
  </h3>
</div>

#nz-div-4 h3.tde :after {
content: “”;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 20px solid #16a085;
border-bottom: 0px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -20px;
}

#nz-div-4 h3.tde :before {
content: “”;
width: 0;
height: 0;
border-width: 40px 20px 0px 0px;
border-style: solid;
border-color: transparent;
border-right-color: #16a085;
position: absolute;
top: 0px;
left: -20px;
}

#nz-div-4 h3.tde span {
background: #16a085;
padding: 10px 20px 8px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
}

#nz-div-4 h3.tde {
text-align: center;
margin: 45px 0;
border-bottom: 2px solid #16a085;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

Mẫu 05

<div id=’nz-div-5′>  <h3 class=”tde”><span>Rửa tay và chân trước khi ăn dưới mọi hình thức</span></h3></div>

 

#nz-div-5 {
text-align: center;
}

#nz-div-5 h3.tde {
text-align: center;
margin: 45px 0;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

#nz-div-5 h3.tde span {
background: #8cc63f;
height: 50px;
line-height: 50px;
padding: 0px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
z-index: 45;
border-radius: 10px 10px 0px 0px;
border: 1px solid #8bb54b;
}

#nz-div-5 h3.tde :before,
#nz-div-5 h3.tde :after {
content: “”;
background: url(https://image.ibb.co/d21QDA/bgh-nz1-l.png);
width: 87px;
height: 50px;
position: absolute;
top: 19px;
z-index: -1;
}
#nz-div-5 h3.tde :before {
left: -44px;
}
#nz-div-5 h3.tde :after {
transform: rotateY(180deg);
right: -44px !important;
}

Mẫu 06

<h3 class=”nz-div-6″><span class=”title-holder”>CẨM NANG NỘI TRỢ CHO ĐÀN ÔNG CÓ THAI</span></h3>

 

.nz-div-6 {
color: #fff;
font-size: 18px;
position: relative;
margin-top: 30px;
margin-bottom: 30px;
font-weight: 700;
background-color: #fff;
text-align: center;
}

h3.nz-div-6:before {
content: “”;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: 0;
border-top: 2px solid #d0d2d3;
z-index: 1;
display: block;
}

.nz-div-6 .title-holder {
min-width: 350px;
height: 45px;
background-color: #56bbe7;
line-height: 45px;
padding: 0px 20px;
position: relative;
z-index: 2;
text-align: center;
display: inline-block;
}

.title-holder:before {
content: “”;
position: absolute;
right: -15px;
border-width: 0px;
bottom: 0px;
border-style: solid;
border-color: #5c9efe transparent;
display: block;
width: 0;
height: 0;
border-top: 23px solid transparent;
border-bottom: 22px solid transparent;
border-left: 15px solid #56bbe7;
}

.title-holder:after {
content: “”;
position: absolute;
left: -15px;
border-width: 0px;
bottom: 0px;
border-style: solid;
border-color: #5c9efe transparent;
display: block;
width: 0;
height: 0;
border-top: 23px solid transparent;
border-bottom: 22px solid transparent;
border-right: 15px solid #56bbe7;
}

Mẫu 07

<div class=”box-title”><div class=”box-title-name”>Quy trình mua bán và thoả thuận</div>
</div>

.box-title {
position: relative;
margin: 50px 0;
text-align: center;
}
.box-title .box-title-name {
font-size: 24px;
font-weight: 900;
text-transform: uppercase;
color: #fff;
background: #00aa46;
display: inline-block;
vertical-align: top;
position: relative;
z-index: 1;
padding: 10px 20px;
marrgin-bottom: 20px;
border-radius: 15px;
}
.box-title .box-title-name:before {
content: “”;
position: absolute;
border-top: 10px solid #00aa46;
border-left: 15px solid transparent;
border-bottom: 7px solid transparent;
border-right: 15px solid transparent;
left: calc(50% – 40px);
bottom: -25px;
width: 50px;
}
.box-title .box-title-name:after {
content: “”;
position: absolute;
z-index: 2;
bottom: -18px;
height: 9px;
width: 200px;
left: calc(50% – 100px);
border-top: 2px solid #00aa46;
}

.divnz p.p-nz-1 {
font-size: 16px;
line-height: 26px;
color: #737373;
font-family: “Roboto Condensed”, sans-serif;
position: relative;
padding: 15px 25px;
margin: 50px auto;
margin-bottom: 5px;
font-style: italic;
border: 2px dashed #ff00c6;
border-radius: 0 30px 0 30px;
max-width: 500px;
display: block;
}

.divnz p.p-nz-1:before,
.divnz p.p-nz-1:after {
content: “”;
position: absolute;
background: url(https://image.ibb.co/mncqDA/red73-Km-d.png) #fff;
width: 35px;
height: 35px;
background-size: contain;
transition: xoaytron 1s cubic-bezier(1, -0.21, 0, 1.21);
animation-duration: 15s;
animation-name: xoaytron;
animation-iteration-count: infinite;
animation-direction: alternate;
}

.divnz p.p-nz-1:before {
left: -16px;
top: -16px;
}
.divnz p.p-nz-1:after {
bottom: -16px;
right: -16px;
transform: rotateZ(180deg);
}

Admin