Floating Social Sharing Bar ẩn hiện cho Blogger

Floadting Social Sharing Bar

Tiếp tục là Social Sharing Bar khác nhưng lần này sẽ gắn vào cạnh trái blog của bạn kèm theo nút ẩn hiện khá tiện dụng và hiện đại.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn code bên dưới vào trước thẻ ]]></b:skin>

.twist_SocialBar{position:fixed;bottom:30%;padding:0;left:0;background:none;text-align:center;margin:0 auto;z-index:99999999}
.twist_SocialBar label:hover{cursor:pointer;opacity:1}
.twist_SocialBar label{text-align:center;opacity:0.4;width:50px;background:#3A3939;color:#FFF;border:0;font-family:FontAwesome;display:block;font-size:12px;padding:0 0;border-radius:0;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;position:absolute;line-height:1.5em;margin-top:346px}
input.ShowHide_Button:checked + label{transform-origin:50% 0%!important;-webkit-transform-origin:50% 0%!important;-moz-transform-origin:50% 0%!important;-ms-transform-origin:50% 0%!important;-o-transform-origin:50% 0%!important;opacity:1;-webkit-transform:translateX(0px) rotateY(-180deg);-moz-transform:translateX(0px) rotateY(-180deg);-ms-transform:translateX(0px) rotateY(-180deg);-o-transform:translateX(0px) rotateY(-180deg);transform:translateX(0px) rotateY(-180deg);-webkit-transition-delay:0.2s;-moz-transition-delay:0.2s;-ms-transition-delay:0.2s;-o-transition-delay:0.2s;transition-delay:0.2s;border:1px solid #3A3939;border-radius:50px 0 0 50px;width:30px;max-width:30px}
input.ShowHide_Button ~ .ShowHideMe{-webkit-transition:.6s all cubic-bezier(0.730,-0.485,0.145,1.620);-moz-transition:.6s all cubic-bezier(0.730,-0.485,0.145,1.620);-ms-transition:.6s all cubic-bezier(0.730,-0.485,0.145,1.620);-o-transition:.6s all cubic-bezier(0.730,-0.485,0.145,1.620);transition:.6s all cubic-bezier(0.730,-0.485,0.145,1.620)}
input.ShowHide_Button:checked ~ .ShowHideMe{margin-left:-75px!important}
input.ShowHide_Button{display:none}
.twist_SocialBar .social_menu{display:inline-block;float:left;list-style:none;max-width:50px;margin:0;padding:0}
.twist_SocialBar .social_menu .button_facebook{background:#3a579a}
.twist_SocialBar .social_menu .button_facebook:hover{background:#314a83}
.twist_SocialBar .social_menu .button_twitter{background:#00abf0}
.twist_SocialBar .social_menu .button_twitter:hover{background:#0092cc}
.twist_SocialBar .social_menu .button_googleplus{background:#df4a32}
.twist_SocialBar .social_menu .button_googleplus:hover{background:#be3f2b}
.twist_SocialBar .social_menu .button_pinterest{background:#cd1c1f}
.twist_SocialBar .social_menu .button_pinterest:hover{background:#ae181a}
.twist_SocialBar .social_menu .button_stumbleupon{background:#ea4b24}
.twist_SocialBar .social_menu .button_stumbleupon:hover{background:#c7401f}
.twist_SocialBar .social_menu .button_linkedin{background:#2554BF}
.twist_SocialBar .social_menu .button_linkedin:hover{background:#224EB4}
.twist_SocialBar .social_menu .button_facebook .count,.twist_SocialBar .social_menu .button_twitter .count,.twist_SocialBar .social_menu .button_googleplus .count,.twist_SocialBar .social_menu .button_pinterest .count,.twist_SocialBar .social_menu .button_stumbleupon .count,.twist_SocialBar .social_menu .button_linkedin .count{color:#fff!important;padding-top:4px;font-size:13px!important;line-height:1.2em;font-family:sans-serif;font-weight:bold}
.twist_SocialBar .social_menu > ul{margin:0;padding:0;list-style:none}
.twist_SocialBar .social_menu .share{background:#FFF;color:#807F7F;font-size:11px;height:45px!important}
.twist_SocialBar .social_menu .share .count.h4{font-size:18px;font-family:sans-serif;color:#424242;height:25px!important;line-height:1.5em;font-weight:bold;margin:0!important}
.twist_SocialBar .social_menu .share .h6{padding-bottom:3px;font-family:sans-serif;margin:0!important;line-height:1.5em}
.twist_SocialBar .social_menu > ul > li{margin:0 0 0 0;position:relative;text-align:center;list-style:none;list-style-type:none;padding:0;border:0;border-left:0 solid rgba( 0,0,0,.4);height:50px;width:50px;overflow:hidden;display:block;box-sizing:border-box;background:none;box-sizing:content-box;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
.twist_SocialBar .social_menu > ul > li a{display:block;width:100%;height:100%;box-sizing:border-box;padding:5px 0;cursor:pointer;text-decoration:none}
.twist_SocialBar .social_menu > ul > li:hover{border-left:5px solid rgba( 0,0,0,.3);width:40px}
.twist_SocialBar .social_menu > ul > li i{color:#fff!important;font-family:FontAwesome;font-size:20px;font-style:normal;font-weight:normal;line-height:1em;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
.twist_SocialBar .social_menu > ul > li:hover i{opacity:0.9}
@media only screen and (min-width:768px) and (max-width:979px){.twist_SocialBar{bottom:20%!important}}
@media only screen and (min-width:480px) and (max-width:767px){.twist_SocialBar{bottom:15%!important}}
@media only screen and (max-width:479px){.twist_SocialBar{bottom:10%!important;display:none!important;/*---delete this code line to make it appear on mobile--*/}}

Javascript

2Tiếp tục tìm đến thẻ </body> và dán đoạn script sau vào trước thẻ đó.

<script type='text/javascript'>
//<![CDATA[
var _0x1de3=["\x68\x72\x65\x66","\x61\x74\x74\x72","\x6C\x69\x6E\x6B\x5B\x72\x65\x6C\x3D\x63\x61\x6E\x6F\x6E\x69\x63\x61\x6C\x5D","\x68\x74\x74\x70\x3A\x2F\x2F\x73\x68\x61\x72\x65\x63\x6F\x75\x6E\x74\x2E\x74\x77\x69\x73\x74\x62\x6C\x6F\x67\x67\x65\x72\x2E\x63\x6F\x6D\x2F\x3F\x75\x72\x6C\x3D","\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x3F","\x73\x68\x61\x72\x65\x73","\x64\x61\x74\x61\x2D\x73\x65\x72\x76\x69\x63\x65","\x2E\x73\x68\x61\x72\x65\x2D\x62\x74\x6E","\x70\x61\x72\x65\x6E\x74\x73","\x74\x6F\x46\x69\x78\x65\x64","\x4D","\x6B","\x68\x74\x6D\x6C","\x65\x61\x63\x68","\x2E\x63\x6F\x75\x6E\x74","\x67\x65\x74\x4A\x53\x4F\x4E","\x72\x65\x61\x64\x79"];$(document)[_0x1de3[16]](function(){var _0xf6dfx1=$(_0x1de3[2])[_0x1de3[1]](_0x1de3[0]);$[_0x1de3[15]](_0x1de3[3]+encodeURIComponent(_0xf6dfx1)+_0x1de3[4],function(_0xf6dfx2){shares=_0xf6dfx2[_0x1de3[5]];$(_0x1de3[14])[_0x1de3[13]](function(_0xf6dfx3,_0xf6dfx4){service=$(_0xf6dfx4)[_0x1de3[8]](_0x1de3[7])[_0x1de3[1]](_0x1de3[6]);count=shares[service];if(count>1000){count=(count/1000)[_0x1de3[9]](1);if(count>1000){count=(count/1000)[_0x1de3[9]](1)+_0x1de3[10]}else {count=count+_0x1de3[11]};};$(_0xf6dfx4)[_0x1de3[12]](count);});});});
//]]>
</script>

HTML

3Vào Bố cục >> Thêm tiện ích HTML/Javascript và dán đoạn code bên dưới vào

<div class='twist_SocialBar'>
  <input class='ShowHide_Button' id='twiSter' type='checkbox'/>
  <label for='twiSter'><i class='fa fa-arrow-left'/></label>
  <div class='ShowHideMe'>
  <div class='social_menu'>
<div class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'/>
        <div class='h6'>SHARES</div>
  </div></div>
<ul>
<li class='button_facebook'>
<a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='&quot;   http://twitter.com/home?status=&quot;   + data:post.title + &quot; - &quot;   + data:post.url + &quot; via @Iris_Tips &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
        <div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>

Chỉnh sửa: via @Iris_Tips thành tài khoản Twitter của bạn.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by twist/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm