Tạo thanh cố định bên trái trong bài viết giống zing chỉ hiển thị trên máy tính

Trang báo mạng zing.vn có một tính năng rất hay đó là trong bài viết của họ có một thanh trượt cố định bên trái và nó chỉ hiển thị trên máy tính. Trong thanh trượt này tích hợp 4 nút chính: chia sẻ zalo, chia sẻ facebook, góp ý & báo lỗi và bình luận.

Nói chung thì đây là tính năng cũng không còn mới mẻ gì nhưng mình muốn nhấn mạnh cái hay ở chỗ là tạo nút chia sẻ zalo tùy chỉnh thay vì phải nhúng code chia sẻ của zalo. Nếu bạn thấy hay thì lấy code về chèn vào template của mình. Các bạn chỉ cần chèn đoạn code này trong widget Blog1 bên dưới thẻ <data:post.body/> trong bài viết hoặc bên dưới nhận xét đều được.

<!--The article tools-->

<b:if cond='data:view.isPost and !data:blog.isMobileRequest'>

  <ul class='the-article-tools'>

    <li class='btnZalo zalo-share-button' data-customize='true' data-layout='icon-text' data-oaid='4149141187665243535' expr:data-href='data:post.url.canonical'><a href='javascript:void(0);' rel='nofollow' title=''><span class='ti-zalo'/></a><span class='label'>Chia sẻ qua Zalo</span></li>

    <li class='btnFacebook'><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' rel='noopener nofollow' target='_blank' title=''><span class='ti-facebook'/></a><span class='label'>Chia sẻ FB</span></li>

     <li class='btnError'><a href='/p/lien-he.html' title=''><span class='ti-marker-alt'/></a><span class='label'>Góp ý &amp; Báo lỗi</span></li>

     <li class='btnComment'><a href='#comments' title=''><span class='ti-comments'/></a><span class='label'>Bình luận</span><span class='counter'><data:post.numberOfComments/></span></li>

  </ul>

<link href='https://vietblogdao.github.io/blog/themify-icons.css' rel='stylesheet'/>

<style type='text/css'>/* <![CDATA[ */

@media (min-width:767px){

.the-article-tools{width:40px;position:fixed;top:40%;left:0;list-style:none;z-index:999;background:#f7f7f7;border:1px solid #e4e4e4;border-left:0;border-top-right-radius:5px;border-bottom-right-radius:5px}

.the-article-tools li{width:40px;height:40px;line-height:42px;float:left;display:block;cursor:pointer;font-size:16px;text-align:center!important;position:relative;margin:0 5px 0 0!important;border:0!important}

.the-article-tools li a{color:#888;display:block!important;padding:0!important;width:100%;height:100%}

.the-article-tools li a span{color:#888}

.the-article-tools li span.label{display:none;height:30px;line-height:30px;border-top-right-radius:15px;border-bottom-right-radius:15px;position:absolute;left:60px;top:7px;white-space:nowrap;padding:0 15px 0 6px;background:#444;color:#FFF;font-size:12px}

.the-article-tools li span.label:before{content:"";top:0;left:-15px;position:absolute;display:block;width:0;height:0;border-top:15px solid transparent;border-right:15px solid #444;border-bottom:15px solid transparent}

.the-article-tools li.btnFacebook span.label{background:#306199;color:#FFF}

.the-article-tools li.btnFacebook span.label:before{border-right-color:#306199}

.the-article-tools li.btnZalo span.label{background:#018fe5;color:#FFF}

.the-article-tools li.btnZalo span.label:before{border-right-color:#018fe5}

.the-article-tools li.btnZalo .ti-zalo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvjOejr7xd5cIaQLChyphenhyphenydeQQ7ZVr8PVhnO5Zn0DZUYysMQA5qzh8yGbjBfhgKeOISjcfQlfdmZSwp-T4oM0AriEraVnWJ5CER4W8NmVR2QNrqfS2Hy7mLif1Z4itLP8Ntpu8_wGI-xkRdc/s1600/icon_zalo.png) no-repeat 50% 50%;width:40px;height:40px;display:inline-block;background-size:20px!important;vertical-align:middle;margin-right:2px;position:relative;top:-2px}

.the-article-tools li.btnZalo:hover .ti-zalo{background-size:24px!important;background-position:50% 45%!important}

.the-article-tools li.btnEmail{background:#fcb400}

.the-article-tools li.btnEmail span.label{background:#00AEE8;color:#FFF}

.the-article-tools li.btnFontStyle{font-size:10px;display:none}

.the-article-tools li.btnFontSize{display:none}

.the-article-tools li.btnComment{height:auto}

.the-article-tools li.btnComment a{display:inline-block}

.the-article-tools li.btnComment span.label{background:#1eaf8b;color:#FFF}

.the-article-tools li.btnComment span.label:before{border-right-color:#1eaf8b}

.the-article-tools li.btnComment span.counter{display:none}

.the-article-tools li.btnError span.label{background:#dc0000;color:#FFF}

.the-article-tools li.btnError span.label:before{border-right-color:#dc0000}

.the-article-tools li:hover{font-size:20px;line-height:44px}

.the-article-tools li:hover span.label{display:block}

.the-article-tools li:hover.btnFacebook a{font-size:20px}

.the-article-tools li:hover.btnFacebook a span{color:#4368D2}

.the-article-tools li:hover.btnError a span{color:#c10000}

.the-article-tools li:hover.btnComment a span{color:#000}

}

@media (max-width:767px){.the-article-tools{display:none!important}}

/* ]]> */</style>

<script src='https://sp.zalo.me/plugins/sdk.js'/>

</b:if>

<!--/The article tools-->

Đoạn code ở trên mình sử dụng biểu tượng font themify-icons, nếu các bạn không muốn sử dụng biểu tượng này thì xóa link font đi:

<link href='https://vietblogdao.github.io/blog/themify-icons.css' rel='stylesheet'/>

Các bạn có thể thay lại biểu tượng bằng font khác hay bằng link ảnh đều được

+ Facebook: <span class='ti-facebook'/>
+ Góp ý & Báo lỗi: <span class='ti-marker-alt'/>
+ Bình luận: <span class='ti-comments'/>

Bài cùng chuyên mục

Bài cùng tác giả