Tạo side Label Landing tuyệt đẹp giống Bác Sĩ Windows

Một blog load nhanh, mượt sẽ thu hút rất nhiều người xem, ghé lại và ngược lại. Ngoài ra, tốc độ load không chỉ là yếu tố duy nhất thu hút người xem mà cái quan trọng không kém là mẫu blog. Một blog đẹp thì người xem sẽ có thấy thích thú cũng như ở lại blog lâu hơn đôi khi chỉ đơn giản là để 'ngắm' nó. Đây cũng chính là lý do hôm nay mình xin được chia sẻ với các bạn side Label Landing cực đẹp được thiết kế bởi Bác Sĩ Windows.

Xem Demo

Các bước thực hiện
Bước 1: Chèn đoạn CSS sau vào dưới thẻ <style>

/* CSS header-page */
.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;}

Bước 2: Chèn đoạn code phía dưới vào nới muốn hiển thị (thường là dưới Menu)

<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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;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>

Ở đây, mình dùng font chữ là Roboto, các bạn có thể thay thể ở phần in đỏ sao cho phù hợp với blog.

Hi vọng với kiểu side Label Landing này sẽ giúp blog của bạn đẹp hơn.
Chúc các bạn thành công!

#Blogspot