Hướng dẫn tạo side label dưới dạng menu cho blogger

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 :

Artikel Terkait

<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:"";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:'';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:"\f17b";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav1 .icon:before{content:"\f1fc";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav2 .icon:before{content:"\f0e7";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav3 .icon:before{content:"\f10a";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav4 .icon:before{content:"\f0eb";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav5 .icon:before{content:"\f00e";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav6 .icon:before{content:"\f0ac";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav7 .icon:before{content:"\f085";font-family:FontAwesome;font-size:30px}
@media screen and (max-width: 800px){
.boxamp{display:none}
}
</style>