Hướng Dẫn Thêm Thanh Bạn Bè ( Có Nút Đóng & Mở ) Cho Blogspot

đã xuất bản
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
Bài viết cùng chuyên mục

0 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

Gợi ý cho bạn