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

Theo mình được biết từ lúc bài viết Star Cường IT về Tips này (http://www.starcuongit.com/2017/09/tao-side-label-landing-muot-tuyet-dep.html) 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


Như các bạn đã thấy trên hình. 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.
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ả:

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

Hãy là người đẹp trai từ những câu nói.

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

    ReplyDelete
    Replies
    1. tui đã test nhiều blog rồi nha, toàn lệch hết

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

    ReplyDelete
  3. 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

    ReplyDelete