Tạo thanh công cụ có button đóng mở

Chào mừng các bạn đã quay trở lại với blog của mình.Hôm nay mình sẽ hướng dẫn các bạn tạo một thanh công cụ có button đóng mở khá là đẹp cho blog của bạn.

Nhấn vào đây để coi demo

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

Bước 1:Phải chắc chắn rằng blog của bạn đã có thư viện Jquery và Font Awesome nhé.Nếu không có hãy thêm 2 link bên dưới vào bên trên thẻ <b:skin> nhé

<script src='https://cdn.jsdelivr.net/gh/diendeeptraik/mixphoto@d153f75/jqueryv3.2.1.js'></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,500' rel='stylesheet'/>

Bước 2:Các bạn tìm đến đoạn ]]></b:skin> rồi thêm đoạn code bên dưới vào ngay bên trên nó nha

/*Add Post FAB*/
.add-post-bf--controls {position: fixed;height: auto;bottom: -60px;right: 32px;z-index: 2000; }
.add-post-bf--controls:not(.active) .nds {display: none; }
.add-post-bf--controls .btns {width: 40px;margin: auto; }
.add-post-bf--controls .btns .nds {width: 40px;height: 40px;border-radius: 50%;z-index: 300;transform: scale(0);cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);background: #fff;color: #676767;margin-bottom: 12px; }
.add-post-bf--controls .btns .nds span {width: 100%;text-align: center;line-height: 40px;display: inline-block; }
.add-post-bf--controls #floating-button {width: 56px;height: 56px;border-radius: 50%;background: #2196F3;cursor: pointer;box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.2);position: relative; }
.add-post-bf--controls #floating-button svg.feather{width: 24px;height: 24px;}
.add-post-bf--controls .plus {color: white;display: block;text-align: center;line-height: 57px;animation: plus-out 0.3s;transition: all 0.3s; }
.add-post-bf--controls.active .plus {animation: plus-in 0.15s linear;animation-fill-mode: forwards; }
.add-post-bf--controls .edit {position: absolute;top: 0;display: block;bottom: 0;left: 0;right: 0;opacity: 0;margin: auto;transform: rotateZ(-70deg);transition: all 0.3s;animation: edit-out 0.3s;text-align: center;color: #fff; }
.add-post-bf--controls.active .edit {animation: edit-in 0.2s;animation-delay: 0.1s;animation-fill-mode: forwards; }
.add-post-bf--controls.active .nds {animation: bounce-nds 0.1s linear;animation-fill-mode: forwards; }
.add-post-bf--controls.active .nd3 {animation-delay: 0.08s; }
.add-post-bf--controls.active .nd4 {animation-delay: 0.15s; }
.add-post-bf--controls.active .nd5 {animation-delay: 0.2s; }
.add-post-bf--controls .nd1 {bottom: 100px;animation-delay: 0.2s;animation: bounce-out-nds 0.3s linear;animation-fill-mode: forwards; }
.add-post-bf--controls .nd3 {bottom: 160px;animation-delay: 0.15s;animation: bounce-out-nds 0.15s linear;animation-fill-mode: forwards; }
.add-post-bf--controls .nd4 {bottom: 220px;animation-delay: 0.1s;animation: bounce-out-nds 0.1s linear;animation-fill-mode: forwards; }
.add-post-bf--controls .nd5 {bottom: 280px;animation-delay: 0.08s;animation: bounce-out-nds 0.1s linear;animation-fill-mode: forwards; }
@keyframes edit-in {from {opacity: 0;transform: rotateZ(-70deg); }to {opacity: 1;transform: rotateZ(0deg); } }
@keyframes edit-out {from {opacity: 1;transform: rotateZ(0deg); }to {opacity: 0;transform: rotateZ(-70deg); } }
@keyframes plus-in {from {opacity: 1;transform: rotateZ(0deg); }to {opacity: 0;transform: rotateZ(180deg); } }
@keyframes plus-out {from {opacity: 0;transform: rotateZ(180deg); }to {opacity: 1;transform: rotateZ(0deg); } }
@keyframes bounce-nds {from {opacity: 0; }to {opacity: 1;transform: scale(1); } }
@keyframes bounce-out-nds {from {opacity: 1;transform: scale(1); }to {opacity: 0;transform: scale(0); } }
body.active {position: relative; }
body.active:after {content: '';position: absolute;left: 0;top: 0;bottom: 0;right: 0;z-index: 2000;background-color: rgba(0,0,0,0.3); }
/*Styles*/
svg{vertical-align: middle;}
svg.feather {margin-top: -4px;width: 19px;height: 19px;}
.btn-default svg.feather {margin-top: -3px;width: 16px;height: 16px;}
/*Tooltip*/
[tooltip]{/*position:relative*/}
[tooltip]::after,[tooltip]::before{text-transform:none;font-size:.9em;line-height:1;user-select:none;pointer-events:none;position:absolute;opacity:0;visibility:hidden;-webkit-transform:scaleY(.4) scaleX(.4);-moz-transform:scaleY(.4) scaleX(.4);-ms-transform:scaleY(.4) scaleX(.4);-o-transform:scaleY(.4) scaleX(.4);transform:scaleY(.4) scaleX(.4);-webkit-transition:all .3s cubic-bezier(.64,.09,.08,1);-moz-transition:all .3s cubic-bezier(.64,.09,.08,1);transition:all .3s cubic-bezier(.64,.09,.08,1)}
.round-check,.round-check input+label{position:relative;display:inline-block}
[tooltip]::before{border:5px solid transparent;z-index:100}
[tooltip]::after{content:attr(tooltip);text-align:center;min-width:3em;max-width:21em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1ch 1.5ch;border-radius:.3ch;box-shadow:0 1em 2em -.5em rgba(0,0,0,.35);background:#333;color:#fff;z-index:99}
[tooltip]:hover::after,[tooltip]:hover::before{opacity:1;visibility:visible;-webkit-transform:scaleY(1) scaleX(1) translateY(0);-moz-transform:scaleY(1) scaleX(1) translateY(0);-ms-transform:scaleY(1) scaleX(1) translateY(0);-o-transform:scaleY(1) scaleX(1) translateY(0);transform:scaleY(1) scaleX(1) translateY(0)}
[tooltip='']::after,[tooltip='']::before{display:none!important}
[tooltip][flow^=left]::before{top:50%;border-right-width:0;border-left-color:#333;left:calc(0em - 5px);transform:translate(-.5em,-50%)}
[tooltip][flow^=left]::after{top:50%;right:calc(100% + 5px);transform:translate(-.5em,-50%)}

Bước ba:Tìm đến thẻ mở <body> hoặc <body rồi thêm đoạn html này ngay dưới nó nhé

<div class="add-post-bf--controls clearfix active" style="bottom: 32px; transition: all 0.3s ease 0s;">
<div class="btns">
<div class="nd5 nds" flow="left" tooltip="Go to top">
<a href="#">
<span class="create-new-post" data-type="gif">
<svg class="feather feather-gif" fill="#676767" height="24" style="width: 27px;height: 27px;" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
</svg><i class="fas fa-angle-double-up" style="     color: #676767;     position: absolute;     text-align: center;     float: none;     right: 15px;     top: 12px; "></i>
</span></a>
</div>
<div class="nd5 nds" flow="left" tooltip="Embed gif">
<span class="create-new-post" data-type="gif">
<svg class="feather feather-gif" fill="#676767" height="24" style="width: 27px;height: 27px;" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"></path><defs>
<path d="M24 24H0V0h24v24z" id="a"></path>
</defs>
<clipPath id="b">
<use overflow="visible" xlink:href="#a" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</clipPath>
<path clip-path="url(#b)" d="M11.5 9H13v6h-1.5zM9 9H6c-.6 0-1 .5-1 1v4c0 .5.4 1 1 1h3c.6 0 1-.5 1-1v-2H8.5v1.5h-2v-3H10V10c0-.5-.4-1-1-1zm10 1.5V9h-4.5v6H16v-2h2v-1.5h-2v-1z"></path></svg>
</span>
</div>
<div class="nd5 nds" flow="left" tooltip="Embed video">
<span class="create-new-post" data-type="embed">
<svg class="feather feather-link" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
</span>
</div>
<div class="nd5 nds" flow="left" tooltip="Upload video">
<span class="create-new-post" data-type="video">
<svg class="feather feather-video" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect height="14" rx="2" ry="2" width="15" x="1" y="5"></rect></svg>
</span>
</div>
<div class="nd5 nds" flow="left" tooltip="Upload image">
<span class="create-new-post" data-type="image">
<svg class="feather feather-camera" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
</span>
</div>
</div>
<div id="floating-button">
<span  class="plus">
<svg class="feather feather-plus" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg>
</span>
<svg class="feather feather-x edit" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
</div>
</div>
<script>//<![CDATA[
jQuery(document).ready(function($) {
 $(document).on('click', '.add-post-bf--controls', function(event) {
     $(this).toggleClass('active');
    });
})
//]]></script>

Lời kết:Chúc các bạn thành công :D