 |
| Hình Minh Họa |
CÁC BƯỚC THỰC HIỆN
Bước 1: Chèn CSS Sau vào trước ]]></b:skin>
/* CSS header-page */Bước 2: Chèn Vào Nơi mà bạn muốn đặt, thường là trên bài viết hoặc dưới menu chẳng hạn
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;}
.container:before,.container:after{content:" ";display:table;}
.container:after{clear:both;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
@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;}
#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:75px;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;}
<header id="header-page" style="font-family: Roboto;"><div class="content"><div class="container"><div class="row"><div class="col-lg-4 hidden-md hidden-sm hidden-xs"><br /><section class="header-hook"><div class="header-hook-box">Hãy cùng bắt đầu <br />khám phá bằng việc giúp chúng tôi<br /><br /><h1>HIỂU VỀ BẠN HƠN</h1><hr />Bạn quan tâm tới lĩnh vực nào?</div></section></div><div class="col-lg-8 col-md-10"><br /><section class="header-category"><div class="header-category-box"><br /><article class="category"><a href="https://www.blogger.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Blogger?&max-results=12"><div class="symbol"><span class="icon icon-code"></span></div><h4 class="category-title">Thủ Thuật Blogger</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/SEO%20Blogspot?&max-results=12"><div class="symbol"><span class="icon icon-pallete"></span></div><h4 class="category-title">SEO Blogspot</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Template%20Blogger?&max-results=12"><div class="symbol"><span class="icon icon-cradle"></span></div><h4 class="category-title">Template Blogger</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Cover%20Facebook?&max-results=12"><div class="symbol"><span class="icon icon-business-man"></span></div><h4 class="category-title">Cover Facebook</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Ki%E1%BA%BFm%20Ti%E1%BB%81n?&max-results=12"><div class="symbol"><span class="icon icon-money"></span></div><h4 class="category-title">Thủ Thuật Kiếm Tiền</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Facebook?&max-results=12"><div class="symbol"><span class="icon icon-bubble"></span></div><h4 class="category-title">Thủ Thuật Facebook</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Internet?&max-results=12"><div class="symbol"><span class="icon icon-speaker"></span></div><h4 class="category-title">Thủ Thuật Internet</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Windows?&max-results=12"><div class="symbol"><span class="icon icon-monitor"></span></div><h4 class="category-title">Thủ Thuật Windows</h4></a></article></div></section></div></div></div></div></header>Bước 3: Lưu Template và tận hưởng
Demo cho anh em nào vẫn chưa hình dung ra được
 |
| Hình Minh Họa |
LỜI KẾT
Như vậy là mình vừa hướng dẩn xong cho các bạn cách Tạo side Label Landing Mượt, Tuyệt Đẹp rồi, nếu các bạn thấy hay đừng quên tặng mình 1 share làm động lực hoặc nếu có thắc mắc hãy để lại comment bên dưới, và bây giờ xin chào và hẹn gặp lại :3
Chúc các bạn thành công !
Đăng nhận xét