Thanh mạng xã hội trượt dọc theo website

Social Sidebar Widget for Blogger

Sau đây Iris Tips xin chia sẻ cho các bạn một tiện ích "cực cool", đó là thanh Social trượt dọc theo blog của bạn. Tiện ích này cũng giúp tăng lượng truy cập từ mạng xã hội cho website của bạn.

CSS

Thêm đoạn CSS sau vào trước thẻ </head>

Style 1 Thanh MXH ở cạnh trái màn hình

<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=entypo);[class*="entypo-"]:before{font-family:'entypo',sans-serif}
#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 Iris Tips ---------- */
#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>

Style 2 Thanh MXH ở cạnh phải màn hình

<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=entypo);[class*="entypo-"]:before{font-family:'entypo',sans-serif}
#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 Iris Tips---------- */
#social-sidebar{right:0;z-index:999;margin-top:-75px;/* (li * a:width) / -2 */
    position:fixed;top:50%}
#social-sidebar ul li:first-child a{border-radius:5px 0 0}
#social-sidebar ul li:last-child a{border-radius:0 0 0 5px}
#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{right:130%;opacity:1}
#social-sidebar ul li a span{border-radius:3px;line-height:24px;right:-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;right:-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>

HTML

Tiếp theo thêm đoạn code sau vào trước thẻ </body>

<div id='social-sidebar'>
            <ul>
                <li>
                    <a class='entypo-twitter' href='https://twitter.com/Iris_Tips' target='_blank'>
                        <span>Twitter</span>
                    </a>
                </li>
                <li>
                    <a class='entypo-gplus' href='https://plus.google.com/b/101485071107768481012' target='_blank'>
                        <span>Google+</span>
                    </a>
                </li>
                <li>
                    <a class='entypo-tumblr' href='http://www.tumblr.net/#' target='_blank'>
                        <span>Tumblr</span>
                    </a>
                </li>
<li>
                    <a class='entypo-facebook' href='https://www.facebook.com/pages/Iris-Tips/914163981938548' target='_blank'>
                        <span>Facebook</span>
                    </a>
                </li>
        <li>
                    <a class='entypo-rss' href='http://feeds.feedburner.com/IrisTips' target='_blank'>
                        <span>Feedburner</span>
                    </a>
                </li>
            </ul>
        </div>

Chỉnh sửa các thông số cho phù hợp với website của bạn. Vậy là xong rồi đấy :)

Ngoài ra bạn cũng có thể chỉnh sửa lại vị trí thanh sidebar bằng cách điều chỉnh CSS

• DEMO Cạnh trái
• DEMO Cạnh phải

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 digitalhubinc/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm