Tạo Slide Label Landing mượt đẹp cho blogspot | Fix lỗi canh lề ở một số template
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
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.
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)
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
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam
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.
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:"";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("//static.edumall.vn/assets/edumall_v3/bg-header-2b2547de83ec3b62c43b8e5f101c957d0ba19cfde26946b4442917cfdf3aa2e8.jpg");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:" ";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:"symbol";src:url(//static.edumall.vn/assets/symbol/fonts/symbol-9ebb41d8d8ad0e1c1a9a1f6e5c237ea33bedac81d42f7a13140c55246a3dbc03.eot);src:url(//static.edumall.vn/assets/symbol/fonts/symbol-9ebb41d8d8ad0e1c1a9a1f6e5c237ea33bedac81d42f7a13140c55246a3dbc03.eot?#iefix) format("embedded-opentype"),url(//static.edumall.vn/assets/symbol/fonts/symbol-d98d2f02e55f50eb744e41ea85f41b171f7bf4a1ceeabc086e658db18dc9c1f8.woff) format("woff"),url(//static.edumall.vn/assets/symbol/fonts/symbol-136c1aa370ad46c6239c9961a5fdc2f1e689bb98fa35f42d82ced3b801bdafac.ttf) format("truetype"),url(//static.edumall.vn/assets/symbol/fonts/symbol-7babf0a1f77985ffdb221ad483115f0ea434ba76c7e982c2a35086257f4da6e0.svg#symbol) format("svg");font-weight:normal;font-style:normal;}
[data-icon]:before{font-family:"symbol"!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^="icon-"]:before,[class*=" icon-"]:before{font-family:"symbol"!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:"\61";}
.icon-bubble:before{content:"\62";}
.icon-business-man:before{content:"\63";}
.icon-circle-plus:before{content:"\64";}
.icon-code:before{content:"\65";}
.icon-cradle:before{content:"\66";}
.icon-money:before{content:"\67";}
.icon-monitor:before{content:"\68";}
.icon-pallete:before{content:"\69";}
.icon-speaker:before{content:"\6a";}
.icon-star:before{content:"\6b";}
.icon-flame:before{content:"\6c";}
.icon-clock:before{content:"\6d";}
.icon-star-outline-2:before{content:"\6e";}
.icon-play:before{content:"\6f";}
.icon-file:before{content:"\70";}
.icon-open-book:before{content:"\71";}
.icon-chart:before{content:"\72";}
.icon-clock-fill:before{content:"\73";}
.icon-layers:before{content:"\74";}
.icon-shopping:before{content:"\75";}
.icon-done:before{content:"\76";}
.icon-error:before{content:"\77";}
.icon-close:before{content:"\78";}
.icon-three-dots:before{content:"\79";}
.icon-nav-left:before{content:"\7a";}
.icon-nav-right:before{content:"\41";}
.icon-filter:before{content:"\42";}
.icon-close-round:before{content:"\43";}
.icon-download:before{content:"\44";}
.icon-carret-right-bold:before{content:"\45";}
.icon-bubble-2:before{content:"\46";}
.icon-power:before{content:"\47";}
.icon-carret-down:before{content:"\48";}
.icon-pack:before{content:"\49";}
.icon-saved:before{content:"\4a";}
.icon-shipping:before{content:"\4b";}
.icon-checked:before{content:"\4c";}
.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>
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
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam
Nhận xét
Đăng nhận xét