Nút Fllow từ css cho blog

VIEW DEMO

Khi SEO blog, chúng ta sẽ cần dùng các loại mạng xã hội để quảng bá cho blog vì vậy nút Fllow là không thể thiếu, hôm nay mình xin giới thiệu cách tạo nút bộ Fllow với hiệu ứng chuyển đổi khá đẹp.

#Thêm nút Flow

Đăng nhập Blogger > Bố cục > Thêm tiện ích > HTML/javascrip > Dán code dưới vào > Save

<style type="text/css">
#mkrbutton .iconz {background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZztvXo8mb40cgaA-TLpNYMcMKhdxgM_Yy4BVivihRrvmPIwv8ZAO8zTVmoytO7Kx415AcjquXXYDc0v2PXXw-WN00jaLg_1UERLLqA8EluisX6gVHnvg3HSkFvBJyczb5K-ssGQnd8mo/s1600/blsocial12.png') 0 0 no-repeat;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
display:block;
color:#212121;
float:none;
height:48px;
width: 48px;
line-height:48px;
margin:10px auto 0;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out;
-ms-transition:width .25s ease-in-out;
-moz-transition:width .25s ease-in-out;
-o-transition:width .25s ease-in-out;
transition:width .25s ease-in-out;
-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;}
#mkrbutton a span {display:none;}
#mkrbutton:hover a span {display:inline;}
#mkrbutton a span {font-size:1.4em;}
#mkrbutton:hover .iconz {width:250px;}
#mkrbutton .fb {background-position: 0 -384px;}
#mkrbutton .twiter {background-position: 0 -432px;}
#mkrbutton .google {background-position: 0 -480px;}
#mkrbutton .pint {background-position: 0 -528px;}
#mkrbutton .linkedin {background-position: 0 -576px;}
#mkrbutton .devart {background-position: 0 -624px;}
#mkrbutton .ytube {background-position: 0 -672px;}
#mkrbutton .rss {background-position: 0 -720px;}
#mkrbutton .fb:hover {background-position: 0 0;color: #0374DD;}
#mkrbutton .twiter:hover {background-position: 0 -48px;color: #00A1DF;}
#mkrbutton .google:hover {background-position: 0 -96px;color: #A70000;}
#mkrbutton .pint:hover {background-position: 0 -144px;color: #C00;}
#mkrbutton .linkedin:hover {background-position: 0 -192px;color: #005772;}
#mkrbutton .devart:hover {background-position: 0 -240px;color: #4C7A4A;}
#mkrbutton .ytube:hover {background-position: 0 -288px;color: #A00;}
#mkrbutton .rss:hover {background-position: 0 -336px;color: #EC5601;}
</style>

<div id="mkrbutton"><a href="link" class="iconz fb"><span>Facebook</span></a></div>
<div id="mkrbutton"><a href="link" class="iconz twiter"><span>Twitter</span></a></div>
<div id="mkrbutton"><a href="link" class="iconz google"><span>Google+</span></a></div>
<div id="mkrbutton"><a href="link" class="iconz pint"><span>Pinterest</span></a></div>
<div id="mkrbutton"><a href="link" class="iconz linkedin"><span>LinkedIn</span></a></div>
<div id="mkrbutton"><a href="link" class="iconz devart"><span>DeviantArt</span></a></div>
<div id="mkrbutton"><a href="link" class="iconz ytube"><span>Youtube</span></a></div>
<div id="mkrbutton"><a href="link" class="iconz rss"><span>RSS</span></a></div>

2.Thay link thành liên kết phù hợp, thay Chữ màu vàng theo ý của bạn.
3.Không thích nút nào thì bạn có thể xóa nút đó. VD: Nếu bạn không thích nút Pinterest  thì bạn chỉ việc xóa dòng tương ứng.

<div id="mkrbutton"><a href="link" class="iconz pint"><span>Pinterest</span></a></div>

Nếu gặp bất kì khó khăn nào, hãy bình luận vào bên dưới mình sẽ giải đáp!!!

Nguồn MRK