Star Quốc BlogClose

Chủ Nhật, 8 tháng 7, 2018

Hướng Dẫn Tạo Side Label Dưới Thanh Menu Cho Blogspot

Hello xin chào 500 anh em mình đã trở lại :D mình thấy có nhiều bạn thích cái này nên mình sẽ share lun cho anh em khỏi phải hóng mòn cổ nhé :v

Bước 1 : Dán code này dưới thanh menu :


<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='boxamp'><div class='art-amp'><div class='nav-amp1'><div class='nav_grid'><ul class='sc_vertical'><li class='count-nav'><a href='/search/label/Apps'><span class='icon'/><span class='items'><span class='label'>Thủ Thuật Android</span></span></a></li><li class='count-nav1'><a href='/search/label/Theme'><span class='icon'/><span class='items'><span class='label'>Theme Blogger</span></span></a></li><li class='count-nav2'><a href='/search/label/Flash'><span class='icon'/><span class='items'><span class='label'>Tips Blogger</span></span></a></li><li class='count-nav3'><a href='/search/label/Rom'><span class='icon'/><span class='items'><span class='label'>Tips Facebook</span></span></a></li><li class='count-nav4'><a href='/search/label/Tips'><span class='icon'/><span class='items'><span class='label'>Thủ Thuật Mobile</span></span></a></li><li class='count-nav5'><a href='/search/label/Review'><span class='icon'/><span class='items'><span class='label'>Review</span></span></a></li><li class='count-nav6'><a href='/search/label/News'><span class='icon'/><span class='items'><span class='label'>Đang Cập Nhật</span></span></a></li><li class='count-nav7'><a href='/search/label/Tutorial'><span class='icon'/><span class='items'><span class='label'>Đang Cập Nhật</span></span></a></li></ul></div></div></div></div>  </b:if>
- Tiếp theo dán code này dưới code ở bước 1 :

<style>
.boxamp,.boxampp{width:calc(100%);overflow:hidden}
.boxamp{background:linear-gradient(90deg,#280e75 0,#066573);background-size:cover;background-position:center center;margin-bottom:30px;height:calc(100%);padding:20px 0 100px 0;box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);clip-path: polygon(100% 100%,100% 0,-400% 0);-webkit-clip-path: polygon(100% 100%,100% 0,-400% 0);position: relative;}
.boxamp:after{content:&quot;&quot;;background-image:url();background-size:cover;position:absolute;top:0;width:810px;bottom:0;left:-30%;right:40%;z-index:-1}
.art-amp{max-width:1100px;overflow:hidden}
.art-amp,.headamp{margin:0 auto}
.art-amp,.out-amp{position:relative}
.nav-amp{float:right;width:380px;margin-top:5px}
.nav-amp span{font-size:25px;line-height:1em;color:#fafafa}
.nav-amp p{color:#C0D3CE}
/*---- Menu Grid ----*/
.nav-amp1{float:left;width:100%;position:relative}
.nav_grid:after{clear:both;content:&#39;&#39;;display:block}
.nav_grid ul{list-style:none;margin:0;padding:0;clear:both}
.nav_grid ul li{text-align:center}
.nav_grid ul li a{padding:20px;background: rgba(23, 56, 116, 0.18);border: 1px solid #a5a5a5;border-radius: 5px;}
.trendy-counters-per-row-2 ul li{width:50%;float:right}
.trendy-counters-per-row-3 ul li{width:33.333%;float:right}
.trendy-counters-per-row-4 ul li{width:25%;float:right}
.sc_vertical a,.sc_vertical span:not(.fa){display:block;padding-top:5px;color:#fff;text-align:center;text-transform:capitalize;}
.sc_horizontal a{display:flex;text-align:center;align-items:center;justify-content:center}
.sc_horizontal span{margin-left:3px}
.show-labels-No .label{display:none}
.navgrid{padding:10px;background:#f6f6f6}
.navgrid div{background:#eaeaea;display:inline-block;margin-left:5px;padding:10px}
.navgrid div:hover{cursor:move}
mark.yes{padding:5px;background:#81d742;color:#fff}
.nav_grid ul li{text-align:center;width:23%;float:left;padding:6px}
.nav_grid .fa{color:#fff}
.nav_grid .count-nav .icon:before{content:&quot;\f17b&quot;;font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav1 .icon:before{content:&quot;\f1fc&quot;;font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav2 .icon:before{content:&quot;\f0e7&quot;;font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav3 .icon:before{content:&quot;\f10a&quot;;font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav4 .icon:before{content:&quot;\f0eb&quot;;font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav5 .icon:before{content:&quot;\f00e&quot;;font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav6 .icon:before{content:&quot;\f0ac&quot;;font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav7 .icon:before{content:&quot;\f085&quot;;font-family:FontAwesome;font-size:30px}
@media screen and (max-width: 800px){
    .boxamp{display:none}
}
</style>
Bước 3 : Lưu lại và tận hưởng thành quả :D


Hình ảnh minh họa 

CHÚC CÁC BẠN THÀNH CÔNG!

Facebook Twitter Google+

44 nhận xét:

  1. Chúc anh em buổi chiều tốt lành

    Trả lờiXóa
  2. Trả lời
    1. Chắc do lỗi rồi đó em

      Xóa
    2. ngay blog em luôn: quocbaoblog.ooo

      Xóa
    3. tìm ul li{list-style-type:square;padding:0 0 5px} xóa ist-style-type:square đi nhé e

      Xóa
  3. a gỡ cái hiệu ứng load trang đi anh,....load lâu quá trời luôn :(

    Trả lờiXóa
  4. Tính hỏi a mà h anh viết bài luôn ồi

    Trả lờiXóa
    Trả lời
    1. Tại có người hỏi nên a share lun em

      Xóa
  5. chất đấy anh, tt nè còn slot lk thì cho em cái lk

    Trả lờiXóa
  6. đêm ngủ ngon mơ chịch nha a kaka

    Trả lờiXóa
  7. lồng cái ảnh phía sau là đẹp !~!!

    Trả lờiXóa
  8. hóng bài mới lắm rùi đó a cuốc :v

    Trả lờiXóa

© 2017 Star Quốc Blog