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

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!

Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Mọi chi tiết xin liên hệ:
Email: Naruto95qt@gmail.com
Star Quốc Blog
CHUYÊN MỤC

Comments của bạn (47 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

Hotline: 01208.021.643
Nhắn Tin Facebook Zalo: 01208.021.643
Liên hệ hợp tác & phát triển
Naruto95qt@gmail.com