Tạo Slide Label Landing mượt đẹp cho blogspot | Fix lỗi canh lề ở một số template

Bài viết liên quan:

Theo mình được biết từ lúc bài viết Star Cường kiki về Tips này thì có rất nhiều bạn mang về xài, trong đó có mình. Nhưng hầu như các bạn làm theo bài viết của Star Cường thì khi hiện ra Blog nó bị lỗi là hơi lệch các Label với nhau. Các bạn xem hình dưới đây sẽ rõ. Nhiều khi lỗi xíu thôi là mình cảm thấy bực rồi :v

Tạo Slide Label Landing mượt đẹp | Fix lỗi canh lề

Như các bạn đã thấy hình phía dưới. Nếu các bạn đặt code CSS ở ]]></b:skin>
 và đặt code Hiển thị ở nơi khác thì sẽ xảy ra lỗi như vậy, cho dù bạn có canh chỉnh CSS thế nào đi nữa nó cũng vẫn lệch như trên hình.

Tạo Slide Label Landing mượt đẹp | Fix lỗi canh lề

Theo tính cách của mình thì mình muốn mọi thứ phải hoàn mỹ cho nên mình viết bài này thôi. Mong các bạn sẽ ủng hộ mặc dù bị lệch vẫn xài được tốt :v
Vậy thì cách khắc phục như thế nào?
Rất đơn giản! Các bạn chỉ cần coppy toàn bộ code phía dưới và dán vào bất cứ đâu các bạn thích đặt (trong chỉnh sửa Template hay Widget bên ngoài đều được)
<style>
/* CSS header-page */
#header-page .header-category .header-category-box .category{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;}
#header-page .header-category .header-category-box .category:before{content:&quot;&quot;;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
#header-page .header-category .header-category-box .category:hover,#header-page .header-category .header-category-box .category:focus,#header-page .header-category .header-category-box .category:active{color:white;}
#header-page .header-category .header-category-box .category:hover:before,#header-page .header-category .header-category-box .category:focus:before,#header-page .header-category .header-category-box .category:active:before{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);}
#header-page{position:relative;background-image:linear-gradient(30deg,rgba(27,57,99,0.9) 20%,rgba(179,41,46,0.9) 87%),url(&quot;//static.edumall.vn/assets/edumall_v3/bg-header-2b2547de83ec3b62c43b8e5f101c957d0ba19cfde26946b4442917cfdf3aa2e8.jpg&quot;);background-size:cover;background-position:center center;color:white;}
#header-page .container{position:relative;}
@media only screen and (min-width:1200px){#header-page{padding-top:100px;padding-bottom:75px;}}
@media only screen and (max-width:1199px){#header-page{padding-top:20px;padding-bottom:30px;margin-bottom:20px;}}
#header-page .header-hook{padding-top:55px;}
#header-page .header-hook .header-hook-box p{margin-bottom:0;}
#header-page .header-hook .header-hook-box hr{width:168px;border-top:solid 4px #D41701;margin:15px 0;}
#header-page .header-category{margin-left:-10px;margin-right:-10px;}
#header-page .header-category .header-category-box{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;}
#header-page .header-category .header-category-box .category{width:170px;height:100px;margin-bottom:20px;text-align:center;padding:10px;position:relative;z-index:1;cursor:pointer;background-color:rgba(0,0,0,0.1);}
@media only screen and (min-width:1470px){#header-page .header-category .header-category-box .category{width:210px;height:110px;}}
@media only screen and (max-width:350px){#header-page .header-category .header-category-box .category{width:140px;height:85px;}#header-page .header-category .header-category-box .category .symbol{font-size:30px;}}
#header-page .header-category .header-category-box .category .symbol{font-size:40px;margin:0;}
#header-page .header-category .header-category-box .category h4{font-size:14px;font-weight:400;margin:0;}
#header-page .header-category .header-category-box .category a{color:white;}
#header-page .header-category .header-category-box .category a:hove{color:white;text-decoration:none;}
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;}
.container:before,.container:after{content:&quot; &quot;;display:table;}
.container:after{clear:both;}
@media (min-width:768px){.container{width:750px;}}
@media (min-width:992px){.container{width:970px;}}
@media (min-width:1200px){.container{width:1170px;}}
@font-face{font-family:&quot;symbol&quot;;src:url(//static.edumall.vn/assets/symbol/fonts/symbol-9ebb41d8d8ad0e1c1a9a1f6e5c237ea33bedac81d42f7a13140c55246a3dbc03.eot);src:url(//static.edumall.vn/assets/symbol/fonts/symbol-9ebb41d8d8ad0e1c1a9a1f6e5c237ea33bedac81d42f7a13140c55246a3dbc03.eot?#iefix) format(&quot;embedded-opentype&quot;),url(//static.edumall.vn/assets/symbol/fonts/symbol-d98d2f02e55f50eb744e41ea85f41b171f7bf4a1ceeabc086e658db18dc9c1f8.woff) format(&quot;woff&quot;),url(//static.edumall.vn/assets/symbol/fonts/symbol-136c1aa370ad46c6239c9961a5fdc2f1e689bb98fa35f42d82ced3b801bdafac.ttf) format(&quot;truetype&quot;),url(//static.edumall.vn/assets/symbol/fonts/symbol-7babf0a1f77985ffdb221ad483115f0ea434ba76c7e982c2a35086257f4da6e0.svg#symbol) format(&quot;svg&quot;);font-weight:normal;font-style:normal;}
[data-icon]:before{font-family:&quot;symbol&quot;!important;content:attr(data-icon);font-style:normal!important;font-weight:normal!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
[class^=&quot;icon-&quot;]:before,[class*=&quot; icon-&quot;]:before{font-family:&quot;symbol&quot;!important;font-style:normal!important;font-weight:normal!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.icon-all:before{content:&quot;\61&quot;;}
.icon-bubble:before{content:&quot;\62&quot;;}
.icon-business-man:before{content:&quot;\63&quot;;}
.icon-circle-plus:before{content:&quot;\64&quot;;}
.icon-code:before{content:&quot;\65&quot;;}
.icon-cradle:before{content:&quot;\66&quot;;}
.icon-money:before{content:&quot;\67&quot;;}
.icon-monitor:before{content:&quot;\68&quot;;}
.icon-pallete:before{content:&quot;\69&quot;;}
.icon-speaker:before{content:&quot;\6a&quot;;}
.icon-star:before{content:&quot;\6b&quot;;}
.icon-flame:before{content:&quot;\6c&quot;;}
.icon-clock:before{content:&quot;\6d&quot;;}
.icon-star-outline-2:before{content:&quot;\6e&quot;;}
.icon-play:before{content:&quot;\6f&quot;;}
.icon-file:before{content:&quot;\70&quot;;}
.icon-open-book:before{content:&quot;\71&quot;;}
.icon-chart:before{content:&quot;\72&quot;;}
.icon-clock-fill:before{content:&quot;\73&quot;;}
.icon-layers:before{content:&quot;\74&quot;;}
.icon-shopping:before{content:&quot;\75&quot;;}
.icon-done:before{content:&quot;\76&quot;;}
.icon-error:before{content:&quot;\77&quot;;}
.icon-close:before{content:&quot;\78&quot;;}
.icon-three-dots:before{content:&quot;\79&quot;;}
.icon-nav-left:before{content:&quot;\7a&quot;;}
.icon-nav-right:before{content:&quot;\41&quot;;}
.icon-filter:before{content:&quot;\42&quot;;}
.icon-close-round:before{content:&quot;\43&quot;;}
.icon-download:before{content:&quot;\44&quot;;}
.icon-carret-right-bold:before{content:&quot;\45&quot;;}
.icon-bubble-2:before{content:&quot;\46&quot;;}
.icon-power:before{content:&quot;\47&quot;;}
.icon-carret-down:before{content:&quot;\48&quot;;}
.icon-pack:before{content:&quot;\49&quot;;}
.icon-saved:before{content:&quot;\4a&quot;;}
.icon-shipping:before{content:&quot;\4b&quot;;}
.icon-checked:before{content:&quot;\4c&quot;;}
.col-lg-4,.col-lg-8,.col-md-10{position:relative;min-height:1px;padding-left:15px;padding-right:15px;}
.col-lg-4{width:30%!important;float:left}
.col-lg-8,.col-md-10{width:65%!important;}
@media (min-width:992px){.col-lg-8,.col-md-10{width:83.33333333%;float:left;}}
@media (max-width:767px){.hidden-xs{display:none!important;}}
@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important;}}
@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important;}}
.color-1,.header-category .category:nth-child(1)::before{background-color:#44C0D9!important;}
.color-2,.header-category .category:nth-child(2)::before{background-color:#E7428E!important;}
.color-3,.header-category .category:nth-child(3)::before{background-color:#FF7903!important;}
.color-4,.header-category .category:nth-child(4)::before{background-color:#8958E9!important;}
.color-5,.header-category .category:nth-child(5)::before{background-color:#4C9E3B!important;}
.color-6,.header-category .category:nth-child(6)::before{background-color:#FFB10F!important;}
.color-7,.header-category .category:nth-child(7)::before{background-color:#F24733!important;}
.color-8,.header-category .category:nth-child(8)::before{background-color:#17B99F!important;}
</style>
<header id='header-page'>
<div class='content'>
<div class='container'>
<div class='row'>
<div class='col-lg-4 hidden-md hidden-sm hidden-xs'>
<section class='header-hook'>
<div class='header-hook-box'>
<p>
Hãy cùng bắt đầu
  <br/>
khám phá bằng việc giúp chúng tôi
</p>
<br/>
<h1>HIỂU VỀ BẠN HƠN</h1>
<hr/>
<p>Bạn quan tâm tới lĩnh vực nào?</p>
</div>
</section>
</div>
<div class='col-lg-8 col-md-10'>
<section class='header-category'>
<div class='header-category-box'>
<article class='category'>
  <a href='/'>
<p class='symbol'>
<span class='icon icon-code'/>
</p>
<h4 class='category-title'>Thủ Thuật Blogger</h4>
</a>
</article>
<article class='category'>
<a href='/'>
<p class='symbol'>
<span class='icon icon-pallete'/>
</p>
<h4 class='category-title'>SEO Blogspot</h4>
</a>
</article>
<article class='category'>
<a href='/'>
<p class='symbol'>
<span class='icon icon-cradle'/>
</p>
<h4 class='category-title'>Template Blogger</h4>
</a>
</article>
<article class='category'>
<a href='/'>
<p class='symbol'>
<span class='icon icon-business-man'/>
</p>
<h4 class='category-title'>Tin Tức Blogger</h4>
</a>
</article>
<article class='category'>
<a href='/'>
<p class='symbol'>
<span class='icon icon-money'/>
</p>
<h4 class='category-title'>Thủ Thuật Kiếm Tiền</h4>
</a>
</article>
<article class='category'>
<a href='/'>
<p class='symbol'>
<span class='icon icon-bubble'/>
</p>
<h4 class='category-title'>Thủ Thuật Facebook</h4>
</a>
</article>
<article class='category'>
<a href='/'>
<p class='symbol'>
<span class='icon icon-speaker'/>
</p>
<h4 class='category-title'>Thủ Thuật Tin Nhắn</h4>
</a>
</article>
<article class='category'>
<a href='/'>
<p class='symbol'>
<span class='icon icon-monitor'/>
</p>
<h4 class='category-title'>Ảnh Girl Xinh</h4>
</a>
</article>
</div>
</section>
</div>
</div>
</div>
</div>
</header>
Và kết quả:
Tạo Slide Label Landing mượt đẹp | Fix lỗi canh lề

Không có gì khó khăn phải không các bạn. Mong rằng các bạn sẽ có một Label Landing Mượt Tuyệt Đẹp như ý muốn! Mọi ý kiến để lại bình luận phía dưới nhá! :D
Lấy code: Star Cường IT

Phan Niệm

Không muốn hoặc không thích, không tồn tại hoặc không thể! Cám ơn các bạn đã ghé thăm, chúc các bạn có những phút giây thoải mái và bổ ích trên blog của mình! Thanks for... Xem thêm về tôi

  1. Nó lệch là do tui chỉnh icon thôi chứ chả liên quan gì đến css hết

    Trả lờiXóa
    Trả lời
    1. tui đã test nhiều blog rồi nha, toàn lệch hết

      Xóa
    2. Khi mà hải chưa biết tuổi niệm :v

      Xóa
    3. chứ biết như Niệm bây h là ko có ý kiến gì rồi :v

      Xóa
    4. Niệm bh k bắt nạt đc :v

      Xóa
  2. Liên kết không ông ?
    https://nguyensineit.blogspot.com

    Trả lờiXóa
  3. Trả lời
    1. đọc cmt thấy ông Cường đã từng thả 1 <3 mới ghê :D

      Xóa
  4. Hm... còn 1 cách nữa để ko bị lệch đó là... đừng dùng :)) chiếm diện tích blog quá :v

    Trả lờiXóa
    Trả lời
    1. Cái thằng kia giả mạo à. Comment lung tung vậy mất uy tín sao =))

      Xóa
    2. Catche nó lưu cũng hay ra phết nhỉ :)

      Xóa
  5. em đang sử dụng cái này nè :v

    Trả lờiXóa
  6. hướng dẫn làm cái bài viết liên quan đi anh :V

    Trả lờiXóa
  7. Bài này hình như e thấy anh viết lâu rồi :))_hình như anh lôi nó lên thì phải 😯

    Trả lờiXóa
    Trả lời
    1. đúng rồi em, tại thấy tâm đắc bài này :v

      Xóa
  8. hình như bài cũ úp lại
    buổi tối vui vẻ nha anh

    Trả lờiXóa
    Trả lời
    1. cám ơn em nhé! vẫn sáng trưa chiều đều đều :v

      Xóa
  9. :V chế thêm vài cái đê a

    Trả lờiXóa
    Trả lời
    1. Ok để a chế mấy cái tào lao cho :v

      Xóa
  10. Buổi tối vv nha a. Để e áp dụng vào blog e thử

    Trả lờiXóa
  11. thêm bài về gái đê a

    Trả lờiXóa