Ví du như trang tin tức, giỏ hàng, viết bài mới, liên hệ...vv.
Ở trang thái thu gọn
Control Panel sẽ hiển thị 5 mục từ trên xuống lần lượt
- Đăng sản phẩm (Thay lại ID Blog trong link là được )
- Giỏ hàng
- Tin tức
- Liên hệ
- Backtotop
Khi mở rộng Control Panel
Phía trên sẽ hiện 5 mục, ở giữa hiện 5 mục, bên dưới 2 mục gồm nút call và back to top |
| Tích hợp thêm thanh Control Panel trong TinhDauOnline Premium nằm bên phải màn hình |
Tích hợp thêm thanh Control Panel trong TinhDauOnline Premium
- Vào Blogger ↠ Bố cục
- Tạo HTML/Javascript mới bên phần Sidebar
- Dán vào đoạn code bên dưới
<!-- Side Panel -->
<div class='side-panel hidden-login'>
<div class='sp-item display-docker'>
<p><i class="fa fa-angle-up"></i></p>
</div>
<div class='top-docker'>
<div class='sp-item account-item ty-dropdown-box'>
<div class='sp-item-title sp-item-account ty-dropdown-box__title cm-combination'> <a rel="nofollow" href="https://www.blogger.com/blogger.g?blogID=6392765688485058119"><span class='sprite sprite-icon_acount main-nav-icon'/></span></a>
<div class='sp-item-tip'>Tài khoản<br/> của tôi</div>
</div>
</div>
<div class='sp-item follow-orders-item ty-dropdown-box'>
<div class='sp-item-title ty-dropdown-box__title cm-combination'> <a rel="nofollow" href='https://www.blogger.com/blogger.g?blogID=6392765688485058119#editor/src=sidebar' rel='nofollow'><span class='sprite sprite-icon_following main-nav-icon'/></span></a>
<div class='sp-item-tip'>Đăng<br/> sản phẩm</div>
</div>
</div>
<div class='sp-item blog-item'>
<div class='sp-item-title'>
<a href='/p/gio-hang.html' rel='nofollow'> <span class='sprite sprite-icon_cart_2 main-nav-icon'/> </span></a>
<div class='sp-item-tip'>Giỏ hàng</div>
</div>
</div>
<div class='sp-item news-item ty-dropdown-box'>
<div class='sp-item-title ty-dropdown-box__title cm-combination'> <a href='/p/checkout.html' rel='nofollow'><span class='sprite sprite-icon_news_2 main-nav-icon'/></span></a>
<div class='sp-item-tip'>Thanh toán</div>
</div>
</div>
<div class='sp-item blog-item'>
<div class='sp-item-title'>
<a href='/search/label/Tin%20T%E1%BB%A9c' rel='nofollow'> <span class='sprite sprite-icon_blog main-nav-icon'/> </span></a>
<div class='sp-item-tip'>Tin tức</div>
</div>
</div>
</div>
<div class='middle-docker'>
<div class='sp-item service-nk'>
<div class='sp-item-title'> <a href='/p/chinh-sach-van-chuyen.html' rel='nofollow'><span class='sprite sprite-icon_delivery main-nav-icon'/></span></a>
<div class='sp-item-tip'>Giao nhận<br/> tiện lợi</div>
</div>
</div>
<div class='sp-item service-nk'>
<div class='sp-item-title'> <a href='/p/huong-dan-mua-hang.html' rel='nofollow'><span class='sprite sprite-icon_set_up main-nav-icon'/></span></a>
<div class='sp-item-tip'>Hướng dẫn<br/> mua hàng</div>
</div>
</div>
<div class='sp-item service-nk'>
<div class='sp-item-title'> <a href='/p/bao-hanh-doi-tra.html' rel='nofollow'><span class='sprite sprite-icon_change main-nav-icon'/></span></a>
<div class='sp-item-tip'>Đổi trả<br/> dễ dàng</div>
</div>
</div>
<div class='sp-item service-nk'>
<div class='sp-item-title'> <a href='/p/cam-ket-ban-hang.html' rel='nofollow'><span class='sprite sprite-icon_after_market main-nav-icon'/></span></a>
<div class='sp-item-tip'>Cam kết<br/> Bán hàng</div>
</div>
</div>
<div class='sp-item service-nk'>
<div class='sp-item-title'> <a href='h/p/phuong-thuc-thanh-toan.html' rel='nofollow'><span class='sprite sprite-icon_payment main-nav-icon'/></span></a>
<div class='sp-item-tip'>Hướng dẫn<br/> thanh toán</div>
</div>
</div>
</div>
<div class='bottom-docker'>
<div class='sp-item contact-nk'>
<div class='sp-item-title contact-nk'> <a href='tel:0932913631' rel='nofollow'><span class='sprite sprite-icon_hotline main-nav-icon'/></span></a>
<div class='sp-item-tip'>Hotline</div>
</div>
</div>
<div class='sp-item'>
<div class='sp-item-title'> <a href='/p/lien-he.html' rel='nofollow'><span class='sprite sprite-icon_chat main-nav-icon'/></span></a>
<div class='sp-item-tip'>Liên hệ</div>
</div>
<div/>
</div>
<a href="#top" id="smoothup"><div class='sp-item scroll-top-page-item'>
<div class='sp-item-title'><span class='sprite sprite-icon_top main-nav-icon'/>
<div class='sp-item-tip'>Lên đầu trang</div>
</span></div>
</div></a>
</div>
</div></div>
<style>
/* Side Panel */
.side-panel{position:fixed;width:40px;top:35%;right:0;background-color:#37393e;z-index:99999;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;-ms-transition:all 0.3s ease 0s}
.side-panel.hidden-login .sp-item-popup .sp-item-sub-popup{margin-top:0}
.side-panel .sp-item{position:relative;display:block}
.side-panel .sp-item.scroll-top-page-item{margin-bottom:10px}
.side-panel .sp-item.blog-item{margin:8px 0 0}
.side-panel .sp-item .sp-item-title{cursor:pointer;padding:2px 0;z-index:12;margin:2px 0;position:relative;display:block}
.side-panel .sp-item .sp-item-title span{font-size:11px;display:block;color:#fff;text-align:center}
.side-panel .sp-item .sp-item-title span.cart-num,.side-panel .sp-item .sp-item-title span.compare-num{height:16px;right:15px;top:0;width:16px;line-height:16px;background-color:red;border-radius:50%;color:#fff;display:inline-block;font-size:10px;position:absolute;text-align:center;vertical-align:middle;font-weight:700}
.side-panel .sp-item .sp-item-title span.main-nav-icon{display:block;margin:0 auto}
.side-panel .sp-item .sp-item-title span.sprite{height:30px;width:30px}
.side-panel .sp-item .sp-item-title span.sprite-icon_acount{background-position:-46px 0}
.side-panel .sp-item .sp-item-title span.sprite-icon_following{background-position:-48px -37px}
.side-panel .sp-item .sp-item-title span.sprite-icon_cart_2{background-position:-46px -73px}
.side-panel .sp-item .sp-item-title span.sprite-icon_news_2{background-position:-128px -38px}
.side-panel .sp-item .sp-item-title span.sprite-icon_comparing{background-position:-91px -385px}
.side-panel .sp-item .sp-item-title span.sprite-icon_blog{background-position:-47px -111px}
.side-panel .sp-item .sp-item-title span.sprite-icon_delivery{background-position:-160px -675px}
.side-panel .sp-item .sp-item-title span.sprite-icon_hotline{background-position:-200px -300px}
.side-panel .sp-item .sp-item-title span.sprite-icon_set_up{background-position:2px -375px}
.side-panel .sp-item .sp-item-title span.sprite-icon_change{background-position:-158px -770px}
.side-panel .sp-item .sp-item-title span.sprite-icon_after_market{background-position:0 -415px}
.side-panel .sp-item .sp-item-title span.sprite-icon_payment{background-position:-46px -298px}
.side-panel .sp-item .sp-item-title span.sprite-icon_chat{background-position:-46px -334px}
.side-panel .sp-item .sp-item-title span.sprite-icon_top{background-position:-46px -373px}
.side-panel .sp-item .sp-item-title span.sprite-logo-nk{background-position:0 -856px;height:27px;width:158px;margin:9px 0 0}
.side-panel .sp-item .sp-item-title span.sprite-cart-3{background-position:-1px -755px;width:31px;height:27px;position:absolute;right:12px;top:10px}
.side-panel .sp-item .sp-item-title:hover{background-color:#ffe700}
.side-panel .sp-item .sp-item-title:hover .sp-item-tip{-webkit-animation-name:sp-item-tip;animation-name:sp-item-tip}
.side-panel .sp-item .sp-item-title .sp-item-tip{font-family:'Open Sans',sans-serif;font-size:12px;line-height:normal;display:flex;display:-webkit-flex;display:-moz-flex;flex-direction:column;-webkit-flex-direction:column;-moz-flex-direction:column;justify-content:center;opacity:0;position:absolute;right:70px;top:0;width:85px;height:35px;padding:0 5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center;color:#fff;background-color:#6a6a6a;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;visibility:hidden}
.side-panel .sp-item .sp-item-title .sp-item-tip:after{border:5px solid transparent;content:"";position:absolute;top:12px;right:-8px;border-left-color:#6a6a6a}
.side-panel .top-docker .account-item,.side-panel .top-docker .cart-item,.side-panel .top-docker .news-item,.side-panel .top-docker .comparing-item{display:none}
.side-panel .middle-docker .service-nk{display:none}
.side-panel.extend{top:0;width:55px;bottom:0}
.side-panel.extend .sp-item .sp-item-popup{right:55px}
.side-panel.extend .sp-item .sp-item-title:hover .sp-item-tip{-webkit-animation-name:sp-item-tip-extend;animation-name:sp-item-tip-extend}
.side-panel.extend .display-docker p .icon-display:after{content:"\f103"}
.side-panel.extend .top-docker{position:absolute;top:40px;width:100%}
.side-panel.extend .top-docker .account-item,.side-panel.extend .top-docker .cart-item,.side-panel.extend .top-docker .news-item,.side-panel.extend .top-docker .comparing-item{display:block}
.side-panel.extend .middle-docker{position:absolute;top:45%;width:100%}
.side-panel.extend .middle-docker .service-nk{display:block}
.side-panel.extend .bottom-docker{bottom:0;position:absolute;width:100%}
.side-panel .display-docker p{text-align:center;background:#5a9f5b none repeat scroll 0 0;margin:0 0 10px 0;cursor:pointer;padding:6px 0}
.side-panel .display-docker p .icon-display:after{color:#fff;content:"\f102";font-size:14px;font-weight:700}
.side-panel .bottom-docker .contact-nk{display:none}
.side-panel.extend .bottom-docker .contact-nk{display:block}
.sp-item-title.contact-nk{background:red}
.sprite{display:inline-block;vertical-align:middle;font-size:0!important}
.sprite{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvnScFu8ewdIVC4f7w9czBtKXkzWrNHuSIU15j0yeI4E3HB4ftRNf5S2NBk7ZgDXqbo8Zl4dVPJgS_7Xt-eggQNYwexIsjElRzy21puXRYeTltbYNnA17z3w1TjehGJEbYAN_DaSNuTcS_/s1600/sprite_iris_tips.png);background-repeat:no-repeat}
.display-docker{height:40px;}
.side-panel .hidden-login{margin:0 auto;text-align:center;}
.side-panel .sp-item .sp-item-title{min-width:40px;max-width:55px;}
@keyframes sp-item-tip{from{opacity:0;right:70px;visibility:hidden}to{opacity:1;right:40px;visibility:visible}}
@-webkit-keyframes sp-item-tip{from{opacity:0;right:70px;visibility:hidden}to{opacity:1;right:40px;visibility:visible}}
@keyframes sp-item-tip-extend{from{opacity:0;right:70px;visibility:hidden}to{opacity:1;right:55px;visibility:visible}}
@-webkit-keyframes sp-item-tip-extend{from{opacity:0;right:70px;visibility:hidden}to{opacity:1;right:55px;visibility:visible}}
</style>
