Xin chào các bạn !!! Sau một hồi lâu đàu mò code thì mình đã tìm ra cách tạo một khung bạn bè bên phải blog có công tắc đóng & mở.

Cách làm

Thêm đoạn javascript sau vào trước </head> :
<script>
function expand1999() {
var ele = document.getElementById(&quot;expandText1999&quot;);
  var text = document.getElementById(&quot;displayText1999&quot;);
var status = localStorage.getItem(&quot;statusFr&quot;);
if (status == 1) {
localStorage.removeItem(&quot;statusFr&quot;);
ele.style.display = &quot;block&quot;;
  text.innerHTML = &quot;Đóng thanh bạn bè <i aria-hidden='true' class='fa fa-toggle-on'/> &quot;;
}
if (status == undefined) {
localStorage.setItem(&quot;statusFr&quot;, 1);
ele.style.display = &quot;none&quot;;
  text.innerHTML = &quot;Mở thanh bạn bè <i aria-hidden='true' class='fa fa-toggle-off'/> &quot;;
}
}
</script>
Chèn đoạn code sau trước thẻ đóng </body> :
<style type='text/css'>




  .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: &#39;&#39;;
    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: &#39;&#39;;  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:&#39;\f002&#39;;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 == &quot;false&quot;'><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>
 *Bước quan trọng :
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
- - 0 bình luận
CHUYÊN MỤC
  • Bình Luận