 |
| Sidebar chia sẻ mạng xã hội chuyên nghiệp |
Nhiều người nghĩ rằng Blogger không hỗ trợ và thêm vào các Sidebar và bạn vẫn giữ giao diện cũ nhàm chán. Nhưng bằng cách sử dụng các đoạn mã nhỏ, bạn có thể tùy chỉnh blog hoặc website của mình theo sở thích.
Hôm nay tôi chia sẻ một Sidebar khá chuyên nghiệp và hấp dẫn. Cho phép bạn tùy chỉnh các đường dẫn một cách dễ dàng.
Cách làm
<div id='social-sidebar'>
<ul>
<li>
<a class='entypo-twitter' href='Chèn link twitter của bạn vào đây' target='_blank'>
<span>Twitter</span>
</a>
</li>
<li>
<a class='entypo-gplus' href=' Chèn link Google+ của bạn vào đây ' target='_blank'>
<span>google+</span>
</a>
</li>
<li>
<a class='entypo-tumblr' href=' Chèn link tumblr của bạn vào đây' target='_blank'>
<span>tumblr</span>
</a>
</li>
<li>
<a class='entypo-facebook' href=' Chèn link Facebook của bạn vào đây' target='_blank'>
<span>facebook</span>
</a>
</li>
<li>
<a class='entypo-rss' href=' Chèn link RSScủa bạn vào đây' target='_blank'>
<span>feedburner</span>
</a>
</li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul,#social-sidebar ul li,#social-sidebar ul li a {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;z-index:999;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>
-----------------------------------------------------------------------------------------------------------------
Và một lần nữa cảm ơn bạn đọc đã quan tâm. Rất mong nhận được những đóng góp và những lời nhận xét có giá trị để blog ngày càng phát triển hơn nữa.
-----------------------------------------------------------------------------------------------------------------
Chúc các bạn thành công!
Không có nhận xét nào:
Đăng nhận xét