TẠO SIDE LABEL LANDING MƯỢT, TUYỆT ĐẸP CHO BLOGSPOT
Hình Minh Hoạ
CÁC BƯỚC THỰC HIỆN:
Bước 1: Chèn CSS Sau vào trước ]]>
/* 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 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
Bước 3: Lưu Template và quẩy :))
Nguồn: Star Cường IT
TẠO SIDE LABEL LANDING MƯỢT, TUYỆT ĐẸP CHO BLOGSPOT
Reviewed by Vũ Việt Hoàng
on
tháng 10 19, 2017
Rating:
Reviewed by Vũ Việt Hoàng
on
tháng 10 19, 2017
Rating:
Không có nhận xét nào: