Những Title Box thường dùng trong Blogspot

Những mẫu code Title Box thường dùng trong Blogspot đã được THAYHIEUBUNGBU sưu tầm và bổ sung thêm trong bài viết này. Title Box được dùng trong các bài viết, page giúp quý bạn đọc phân biệt và làm nổi bật từng phần của bài viết, Với mỗi mẫu Title Box có cách thể hiện khác nhau tùy thuộc vào nội dung và bố cục bạn mong muốn. Bạn cũng có thể chỉnh sửa kích thước, màu sắc , hình khối để phù hợp hơn bới Blogspot của bạn!

TITLE BOX BLOGSPOT 1

THAYHIEUBUNGBU.COM

TITLE BOX BLOGSPOT 2

---

TITLE BOX BLOGSPOT 3

TITLE BOX BLOGSPOT 4

TITLE BOX BLOGSPOT 5

TITLE BOX BLOGSPOT 6

Title Box Blogspot 7

<style>


/* gg-box-1  ========================= */


#gg-box-1 {
    border-bottom: 2px solid #1ca87e;
    margin-bottom: 40px;
    display: block;
    
}

#gg-box-1 h3.tde {
    margin: 0;
    font-size: 17px;
    line-height: 20px;
    display: inline-block;
    text-transform: uppercase;
}

#gg-box-1 h3.tde :after {
    content: "";
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 20px solid #1ca87e;
    border-bottom: 0px solid transparent;
    border-right: 0 solid transparent;
    position: absolute;
    top: 0px;
    right: -20px;
}

#gg-box-1 h3.tde span {
    background: #1ca87e;
    padding: 10px 20px 8px 20px;
    color: white;
    position: relative;
    display: inline-block;
    margin: 0;
}

.sub-cat {
    display: inline-block;
    margin: 0;
    line-height: 45px;
    margin-left: 100px;
    float: right;
}

/* gg-box-2  ========================= */

#gg-box-2 h3.tde :after {
    content: "";
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-left: 15px solid #1b8ea8;
    border-bottom: 19px solid transparent;
    border-right: 0 solid transparent;
    position: absolute;
    top: 0px;
    right: -15px;
}

#gg-box-2 h3.tde span {
    background: #1b8ea8;
    padding: 10px 20px 8px 20px;
    color: white;
    position: relative;
    display: inline-block;
    margin: 0;
}

#gg-box-2 h3.tde {
    margin: 15px 0;
    font-size: 17px;
    line-height: 20px;
    text-transform: uppercase;
}

#gg-box-2 hr {
    margin: -34px 0px 54px 0px;
    border: 1px solid #1b8ea8;
}


/* gg-box-3 ========================= */

#gg-box-3 h3.tde :after {
    content: "";
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 20px solid #EA3A3C;
    border-bottom: 0px solid transparent;
    border-right: 0 solid transparent;
    position: absolute;
    top: 0px;
    right: -20px;
}


#gg-box-3 h3.tde :before {
    content: "";
    width: 0;
    height: 0;
    border-width: 40px 20px 0px 0px;
    border-style: solid;
    border-color: transparent;
    border-right-color: #EA3A3C;
    position: absolute;  
    top: 0px;
    left: -20px;
}

#gg-box-3 h3.tde span {
    background: #EA3A3C;
    padding: 10px 20px 8px 20px;
    color: white;
    position: relative;
    display: inline-block;
    margin: 0;
  
}

#gg-box-3 h3.tde {
    text-align: center;
    margin: 45px 0;
    border-bottom: 2px solid #ea3a3c;
    font-size: 17px;
    line-height: 20px;
    text-transform: uppercase;
}


/* gg-box-4 ========================= */
.gg-box-4 { 
    position: relative;
    margin: 50px 0; 
    text-align: center;
}
.gg-box-4 .box-title-name {
    font-size: 22px;  
    font-weight: 900;   
    text-transform: uppercase;   
    color: #333;   
    display: inline-block;    
    vertical-align: top;  
    position: relative; 
    z-index: 1;  
    padding-bottom: 15px;
}
.gg-box-4 .box-title-name:before { 
 content: "";  
    position: absolute;  
    border-top: 10px solid #8b26ff; 
    border-left: 15px solid transparent; 
    border-bottom: 7px solid transparent;  
    border-right: 15px solid transparent; 
    left: calc(50% - 40px);
    bottom: -7px;
    width: 50px;
}
.gg-box-4 .box-title-name:after {   
 content: "";   
    position: absolute; 
    z-index: 2;  
    bottom: 0;   
    height: 9px;
    width: 200px; 
    left: calc(50% - 100px);  
    border-top: 2px solid #8b26ff;
}

#gg-box-5 {
    width:100%;
    text-transform: uppercase;
    text-align:left;
    padding:3px;
    color: black;
    font-size: 17px;
    letter-spacing:0;
    border-bottom:4px solid #1ca87e;
    box-sizing:border-box;
    background:linear-gradient(135deg,#ffffff 0%,#ffffff 30%,#F2F2F2 30%,#1ca87e 30%,#1ca87e 100%)
}

#gg-box-6 {
  background: linear-gradient(135deg, #6d69e5 10%, #6d69e5 30%, #46c3fd 100%);
  color: white; 
  font-size: 17px;
  text-transform: uppercase;
  margin: 30px 0px 10px 0px;
  padding: 5px 20px;
}

/* gg-box-7 ========================= */

#gg-box-7 {
  background:#21c7ed;
  color:#222;
  padding: 10px 10px 10px 15px;
  border-radius:10px;
  position:relative;
  margin:.5em auto;
  text-align:left;
  font-weight:500;
  color: white;
  font-family: arial , helvetica , sans-serif;
}
#gg-box-7:before {
  content:'';
  display:block;
  position:absolute;
  bottom:-.9em;
  left:0;
  top:auto;
  background:transparent;
  border:1em solid transparent;
  border-left-color:#21c7ed;
  opacity:1;
}

</style>




<div id='gg-box-1'><h3 class="tde">
<span class="null">Title Box Blogspot 1</span>
</h3>
<div class="sub-cat">
<span>THAYHIEUBUNGBU.COM</span>
</div>
</div>

<div id='gg-box-2'>
<h3 class="tde">
<span>Title Box Blogspot 2</span>
</h3>
<hr>
</div>

<div id='gg-box-3'>
<h3 class="tde">
<span>Title Box Blogspot 3</span>
</h3>
</div>

<div class="gg-box-4">
<div class="box-title-name">
<span class="null">Title Box Blogspot 4</span> </div>
</div>

<div id="gg-box-5"><b>Title Box Blogspot 5</b></div>

<div id="gg-box-6">Title Box Blogspot 6</div><br />

<div id="gg-box-7"><b>Title Box Blogspot 7</b></div>