Tạo thanh bạn bè giống Facebook có công tắc

Xin chào tất cả các bạn đã quay trở lại blog Star Sơn IT, hôm nay mình xin chia sẻ cho các bạn cách tạo thanh bạn bè giống Facebook có công tắc tuyệt đẹp. Do mình thấy bên Trọng Khanh Nguyễn có sử dụng, đẹp quá nên mình view-source rồi share luôn.

Các bước thực hiện:

Bước 1: Chèn đoạn code sau vào nơi các bạn muốn hiển thị công tắc đóng mở, còn thanh bạn bè thì mặc định của nó là luôn hiển thị ở bên phải của blog.

<a class='bb_on_off' href='javascript:expand1999();' id='displayText1999' style='color: #fff'>Đóng thanh bạn bè <i aria-hidden='true' class='fa fa-toggle-on'></i>

</a>

<script type='text/javascript'>

//<![CDATA[

function show_post_sharing() {var div=document.getElementById('show_post_sharing');div.style.display = (div.style.display == "block") ? "none" : "block";}

function show_topBar_friend() {

var div=document.getElementById('topBar_friend');

div.style.display = (div.style.display == "block") ? "none" : "block";}

function show_topBar_message() {var div=document.getElementById('topBar_message');

div.style.display = (div.style.display == "block") ? "none" : "block";}

function show_topBar_notification() {var div=document.getElementById('topBar_notification');

div.style.display = (div.style.display == "block") ? "none" : "block";}

function show_topBar_lock() {var div=document.getElementById('topBar_lock');div.style.display = (div.style.display == "block") ? "none" : "block";}

function show_topBar_arrow() {var div=document.getElementById('topBar_arrow');div.style.display = (div.style.display == "block") ? "none" : "block";}

//]]>

</script>

<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 { 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: 170px}

#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{font-size:15px;color:#333;text-decoration:none}

#ban-be-right img{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: #f6f7f9;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;}

.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 {border: none; padding: 6px; padding-left: 30px}

.tim-kiem-fr {margin-left: 1px}

</style>

<script>

function expand1999() {

 var ele = document.getElementById("expandText1999");

 var text = document.getElementById("displayText1999");

 if(ele.style.display == "block") {ele.style.display = "none";text.innerHTML = "Mở thanh bạn bè <i aria-hidden='true' class='fa fa-toggle-off'></i> ";}

 else {ele.style.display = "block";text.innerHTML = "Đóng thanh bạn bè <i aria-hidden='true' class='fa fa-toggle-on'></i> ";

 }} 

</script>

<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>

<a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a>

<a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a><a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a><a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a><a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a><a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a><a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a><a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a><a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a><a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a><a href='/lienket' target='_blank'><li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzimWbuah6FPYCQF4QD2ZK-GwCe8Lo1iQvtDcgs745WOCrJNJf3ZkmYSs1KJhumsOj_dlw6RsNkXOXhMA_lwjp57ojR771pXOYDODwf0PIOIrICFDmEP41Fb_eExm3qwJoB1pCyJE3wa0/s1600/no+avatar+-+trongkhanhnguyenCom.jpg'/>Đặt Liên Kết <i class='fa fa-circle tick-online'></i></li></a>

</ul>

</div></div></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%'>

<a class='bfip'></a><span><input class='search-bt-frt_input' name='q' placeholder='Tìm kiếm...' type='text' value=''/></span>

</form>

</div>

Bước 2: Lưu template lại và hưởng thụ.

Chúc các bạn thành công!

Code by: Trọng Khanh Nguyễn