[Hướng dẫn] Tạo nút share hiệu ứng thụt thò khá đẹp

Xin chào các bạn, đã lâu r mình k share thủ thuật blogspot.
Thật sự là như vậy...
Vì thế, hôm nay mình sẽ share cho ace quả nút share khá chất. Nếu bạn nào muốn thì thực hiện cùng mình nhé!

CÁC BƯỚC THỰC HIỆN:

Bước 1: Blogger => Chủ đề => Chỉnh sửa HTML
Bước 2: Các bạn chèn đoạn code sau vào trước thẻ  ]]></b:skin> :

Copy

/* Share by www.starthao-it.com */
.like-box{display:block;overflow:hidden;background: url(https://i.imgur.com/jwjcL46.png) no-repeat 0px 0px;padding:60px 0 0px;margin:40px 0 5px}
.star-ratings {float:right;margin-top:-40px}
ul.switchBox{width:100%;list-style:none;zoom:1}
ul.switchBox:after{content:"";display:block;clear:both}
ul.switchBox li,ul.switchBox li a{display:block;font:100%/1 "lucida grande",Sans-Serif;text-align:center;font-weight:bold; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; transition:all 0.3s ease 0;-moz-transition-property:all;-webkit-transition-property:all;-o-transition-property:all;-ms-transition-property:all;-moz-transition-duration:0.3s;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s}
ul.switchBox li{float:left;width:31.5%;margin-right:2%}
ul.switchBox li a{padding:12px 0;color:white;text-decoration:none;text-shadow:0 -1px 0 rgba(0,0,0,0.5); box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-o-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-ms-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset}
ul.switchBox li:hover a{ box-shadow:0 2px 5px rgba(0,0,0,0.1) inset;-moz-box-shadow:0 2px 5px rgba(0,0,0,0.1) inset;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.1) inset;-o-box-shadow:0 2px 5px rgba(0,0,0,0.1) inset;-ms-box-shadow:0 2px 5px rgba(0,0,0,0.1) inset}
ul.switchBox li.switch2 a{border:1px #159 solid; background:linear-gradient(top,#73afd8 0%,#397bb8 100%);background:-o-linear-gradient(top,#73afd8 0%,#397bb8 100%);background:-moz-linear-gradient(top,#73afd8 0%,#397bb8 100%);background:-webkit-linear-gradient(top,#73afd8 0%,#397bb8 100%);background:-ms-linear-gradient(top,#73afd8 0%,#397bb8 100%)}
ul.switchBox li.switch2:hover a{ background:linear-gradient(top,#5195c9 0%,#4487c0 100%);background:-o-linear-gradient(top,#5195c9 0%,#4487c0 100%);background:-moz-linear-gradient(top,#5195c9 0%,#4487c0 100%);background:-webkit-linear-gradient(top,#5195c9 0%,#4487c0 100%);background:-ms-linear-gradient(top,#5195c9 0%,#4487c0 100%)}
ul.switchBox li.switch3 a{border:1px #583 solid; background:linear-gradient(top,#9dc983 0%,#65a049 100%);background:-o-linear-gradient(top,#9dc983 0%,#65a049 100%);background:-moz-linear-gradient(top,#9dc983 0%,#65a049 100%);background:-webkit-linear-gradient(top,#9dc983 0%,#65a049 100%);background:-ms-linear-gradient(top,#9dc983 0%,#65a049 100%)}
ul.switchBox li.switch3:hover a{ background:linear-gradient(top,#80b663 0%,#71aa55 100%);background:-o-linear-gradient(top,#80b663 0%,#71aa55 100%);background:-moz-linear-gradient(top,#80b663 0%,#71aa55 100%);background:-webkit-linear-gradient(top,#80b663 0%,#71aa55 100%);background:-ms-linear-gradient(top,#80b663 0%,#71aa55 100%)}
ul.switchBox li.switch5 a{border:1px #933 solid; background:linear-gradient(top,#d87373 0%,#b83939 100%);background:-o-linear-gradient(top,#d87373 0%,#b83939 100%);background:-moz-linear-gradient(top,#d87373 0%,#b83939 100%);background:-webkit-linear-gradient(top,#d87373 0%,#b83939 100%);background:-ms-linear-gradient(top,#d87373 0%,#b83939 100%)}
ul.switchBox li.switch5:hover a{ background:linear-gradient(top,#c95151 0%,#c04444 100%);background:-o-linear-gradient(top,#c95151 0%,#c04444 100%);background:-moz-linear-gradient(top,#c95151 0%,#c04444 100%);background:-webkit-linear-gradient(top,#c95151 0%,#c04444 100%);background:-ms-linear-gradient(top,#c95151 0%,#c04444 100%)}
#switchBox1 li{margin-top:-5px;padding-bottom:5px; box-shadow:0 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 5px 3px rgba(0,0,0,0.2);-o-box-shadow:0 5px 3px rgba(0,0,0,0.2);-ms-box-shadow:0 5px 3px rgba(0,0,0,0.2)}
#switchBox1 li.switch2{background:rgba(17,85,153,1)}
#switchBox1 li.switch3{background:rgba(68,119,34,1)}
#switchBox1 li.switch5{background:rgba(136,51,51,1)}
#switchBox1 li:last-child{margin-right:0%}
#switchBox1 li:hover{margin-top:-2px;padding-bottom:2px; box-shadow:0 1px 2px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);-o-box-shadow:0 1px 2px rgba(0,0,0,0.2);-ms-box-shadow:0 1px 2px rgba(0,0,0,0.2)}

Bước 3: Các bạn chèn đoạn code sau vào nơi muốn hiển thị nút share nhé!

Copy

<div style='margin:10px 0'>
<div class='like-box'>
<span class='star-ratings'>
<b>
Cảm nhận của bạn
</b>
<br/>
</span>
</div>
<ul class='switchBox' id='switchBox1'>
<li class='switch2'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-facebook'/>
Facebook
</a>
</li>
<li class='switch3'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>
Twitter
</a>
</li>
<li class='switch5'>
<a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
<i aria-hidden='true' class='fa fa-google-plus'/>
Google+
</a>
</li>
</ul>
</div>
<div class='clear'/>

=> Các bạn có thể thêm nút share khác như Pinterest, Unghotoi...v...v...

LỜI KẾT:

Các bạn dùng thử xem nhé. Chúc các bạn thành công!