Cách làm
Thêm đoạn javascript sau vào trước </head> :
<script>Chèn đoạn code sau trước thẻ đóng </body> :
function expand1999() {
var ele = document.getElementById("expandText1999");
var text = document.getElementById("displayText1999");
var status = localStorage.getItem("statusFr");
if (status == 1) {
localStorage.removeItem("statusFr");
ele.style.display = "block";
text.innerHTML = "Đóng thanh bạn bè <i aria-hidden='true' class='fa fa-toggle-on'/> ";
}
if (status == undefined) {
localStorage.setItem("statusFr", 1);
ele.style.display = "none";
text.innerHTML = "Mở thanh bạn bè <i aria-hidden='true' class='fa fa-toggle-off'/> ";
}
}
</script>
<style type='text/css'>*Bước quan trọng :
.bb_on_off i{padding-left: 2px}
.bb_on_off {float: right; color: #fff; position: relative; top: 11px; padding-right: 15px}
.bb_on_off a{color: #fff}
.float-ck {background: #fff; position: fixed; top: 43px; z-index: 1}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
.float-ck:before {
content: '';
display: block;
position: absolute;
top: 0;
width: 1px;
height: 100%;
background: #f0f0f0;
box-shadow: inset 1px 0 #ddd;
}
.float-ck::-webkit-scrollbar {display: none}
#hide_float_right {text-align:right; font-size: 11px; border-left: 1px solid #6d6d6d; }
#hide_float_right a {background: none; padding: 2px 4px; color: #FFF;}
#float_content_right { padding-right: 15px; padding-left: 10px}
#ban-be-right {width: 180px}
#ban-be-right ul{list-style-type: none;
margin: 0;
padding: 0;}
#ban-be-right ul li{line-height:1.8em;background:transparent;position:relative; font-size: 13px; text-overflow: ellipsis}
#ban-be-right a{white-space: nowrap; font-size:15px;color:#333;text-decoration:none}
#ban-be-right img{height: 40px; width: 40px; border-radius:50%;max-height:40px;max-width:40px;overflow:hidden;margin-right:5px}
#ban-be-right li span .fa{width: 20px;height: 20px;line-height: 21px;text-align: center;border-radius: 50%;display: inline-block;margin-right: 5px;color:#fff;font-size: 13px;text-overflow: ellipsis}
#ban-be-right li:after{background-color: #f2f3f5;border: 1px solid #dddfe2;border-radius: 2px;bottom: -3px;content: ''; display: block;left: -3px;opacity: 0;position: absolute; right: -3px; top: -3px;transition: 400ms cubic-bezier(.08,.52,.52,1) background-color, 400ms cubic-bezier(.08,.52,.52,1) border-color, 400ms cubic-bezier(.08,.52,.52,1) opacity;z-index: -1;}
#ban-be-right li:hover:after{opacity:1;transition-duration: 100ms;}
#ban-be-right .lol {text-transform: uppercase; font-size: 13px; color: #757575; font-weight: 500; margin-top: 10px; }
.tick-online {color: rgb(66, 183, 42); font-size: 7px; float: right; line-height: 40px}
.bfip:before{content:'\f002';color:#a3a3a3; font-family: fontawesome; padding-left: 5px; position: absolute}
.search-bt-fr{padding: 2px; margin-left: 1px}
.search-bt-frt_input {width: 1000px;border: none; padding: 6px; padding-left: 30px}
.tim-kiem-fr {margin-left: 1px}
</style>
<b:if cond='data:blog.isMobileRequest == "false"'><div class='float-ck' style='right: 0px; height: 90%; overflow: auto'>
<div id='expandText1999' style='display:block'>
<div id='float_content_right'>
<div id='ban-be-right'>
<ul>
<div class='lol'>BẠN BÈ</div>
<a class="hastip0_bacsiwindows" href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank' title='Designer Võ Hữu Nhân'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Hữu Nhân <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
<a href='https://www.facebook.com/Nhan.Dz.Boss' target='_blank'><li><img src='https://graph.facebook.com/100010646251256/picture?type=large'/>Thêm Bạn Bè <i class='fa fa-circle tick-online'/></li></a>
</ul>
</div>
</div>
<div class='tim-kiem-fr'>
<form action='/search' class='search-bt-fr' method='get' style='margin: 0; bottom: 0; position: fixed; width: 12%'>
<span><input class='search-bt-frt_input' name='q' placeholder='Tìm kiếm...' type='text' value=''/></span>
</form>
</div>
</div>
</div>
</b:if>
Thuộc tính đóng mở của thanh bạn bè nằm ở đâu và hoạt động hay không là phụ thuộc vào đoạn code cuối cùng này.
Chèn đoạn code sau vào nơi muốn hiển thị nút đóng/mở:
<li class='dongmothanhbanbe'> <a class='dongmothanhbanbe' href='javascript:expand1999();' title='Đóng - Mở Thanh Bạn Bè'> <i class='fa fa-eercast'/></a></li>Link thuộc tính đóng / mở : javascript:expand1999();
Chúc các bạn thành công
BÌNH LUẬN (0)