Lên Google search "DocBao TV" hoặc có thể "Click Vào Đây" để hóng tin hot và clip nóng gái xinh mới nhất ngày hôm nay nhé.
Đối với những bạn làm web, blog thì menu là một thứ không thể thiếu. Nhưng đối với những giao diện gốc của Blogger thì lại không đáp ứng được nhu cầu, gây khó khan cho người truy cập.
Giải pháp tối ưu để giải quyết là: Trang bị cho web, blog một thanh menu đơn giản mà lại đẹp mắt (sticky menu).
Cách cài đặt:
- Chèn đoạn code trong khung dưới đây vào trước thẻ ]]></b:skin>
/* CAOCONGKIEN MENU */
#caocongkien_menu{background-color:#3173f1;height:34px;width:100%;min-width:960px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-top:0 solid #9932CC;height:34px;width:100%;min-width:960;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:2px solid #9932cc;}
#caocongkien_menu ul{list-style:none;margin:auto;width:960px}
#caocongkien_menu ul li{float:left;}
#caocongkien_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:12px;font-family:Arial;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#caocongkien_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:yellow;}
2. Vào "Bố cục"
- Bấm tiếp "Thêm tiện ích" thêm một phần tử "HTML/JavaScript" tại vị trí mà bạn muốn đặt menu rồi copy đoạn code bên dưới đấy dán vào đó.
<div id='caocongkien_menu'>Code menu 2:
<ul>
<li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglyjydbRVKJJ3kjms9kdJlOEuUUhhOmGRAokxvN8t4wN3c8ThFdZaKAbvb4Uc9y66_0koaiSrugK9SNhxsg2adW0f2naenX1R2XASRebcgFcjycPPCH7VipLzWetOi5jPAWr82FxKohhm/s1600/2.gif' style='padding:0px;'/></a></li>
<li><a href='LINK'>Tên menu 1</a></li>
<li><a href='LINK'>Tên menu 2</a></li>
<li><a href='LINK'>Tên menu 3</a></li>
<li><a href='LINK'>Tên menu 4</a></li>
<li><a href='LINK'>Tên menu 5</a></li>
<li><a href='LINK'>Tên menu 6</a></li>
<li><a href='LINK'>Tên menu 7</a></li>
<li><a href='LINK'>Tên menu 8</a></li> </ul>
</div>
<style>
/*------ CSS3 Menu By MBT (www.mybloggertricks.com)---------*/
#mbt-menu, {
margin: 0;
padding: 0;
list-style: none;
}
#mbt-menu {
width: 960px;
margin: 0px auto;
border: 1px solid #222;
background-color: #888;
background-image: -moz-linear-gradient(#666, #acc282);
background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#acc282));
background-image: -webkit-linear-gradient(#666, #acc282);
background-image: -o-linear-gradient(#666, #acc282);
background-image: -ms-linear-gradient(#666, #acc282);
background-image: linear-gradient(#666, #acc282);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mbt-menu a {
float: left;
padding: 12px 30px;
color: #FFF;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #222;
}
#mbt-menu li:hover > a {
color: #FC803D;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #FC803D;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul a:hover {
background-color: #FC803D;
background-image: -moz-linear-gradient(#07CDEF, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#07CDEF), to(#0295DG));
background-image: -webkit-linear-gradient(#07CDEF, #0295DG);
background-image: -o-linear-gradient(#07CDEF, #0295DG);
background-image: -ms-linear-gradient(#07CDEF, #0295DG);
background-image: linear-gradient(#07CDEF, #0295DG);
}
</style>
<br />
<ul id="mbt-menu">
<li><a href="#">Tên menu 1</a></li>
<li><a href="#">Tên menu 2</a></li>
<li><a href="#">Tên menu 3</a></li>
<li><a href="#">Tên menu 4</a></li>
</ul>
Cuối cùng lưu lại rồi xem thành quả nhé.
Đăng nhận xét