Hot Post

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


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
Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

18 Comments

  1. Bạn ơi, hướng dẫn mình làm cái chuông hiện nhấp nháy số 1 cái nhé! gửi mail cho mình ha, cám ơn bạn nhiều !!! dovanbang.net@gmail.com

    Trả lờiXóa
    Trả lời
    1. Cái này mỗi web phải viết code riêng bạn ơi, vì cái menu mỗi web 1 code khác nhau mà. Website của bạn là trang nào?

      Xóa
    2. web mình giống web bạn thôi nhưng chắc phiên bản khác bạn ạ... Hướng dẫn mình nhé, cám ơn bạn!

      Xóa
    3. Check mail nhé :-bd

      Xóa
    4. Bạn ơi, sao của mình số 1 nó không được như của bạn vậy!!!! :'(

      Xóa
  2. Không được là như thế nào @@ bạn chụp ảnh màn hình rồi up lên đây, chứ nói không vậy ai mà biết (Dán url hình ảnh vào comment là được)

    Trả lờiXóa
  3. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  4. Mình không biết up lên đâu lên up lên mail, bạn xem qua nhé!!!!

    Trả lờiXóa
  5. https://goo.gl/bxGF5V linh ảnh đấy nhé!

    Trả lờiXóa
  6. Link lỗi rồi bạn ơi, không thì bạn đính kèm rồi gửi qua mail cho mình cũng được

    Trả lờiXóa
  7. Cái này do bạn sử dụng Font Awesome ở kích thước nhỏ nên bị lệch bố cục. Bạn thử giảm right với top lại, "right:2px;top:7px;" -->"right:1px;top:6px;" chỉnh từ từ lại cho nó khớp là được

    Trả lờiXóa
  8. Ban cho minh hỏi cách chuyển thanh mạng xã hội theo top right, bottom phỉa làm chỉnh như thế nào vậy

    Trả lờiXóa
    Trả lời
    1. Cụ thể bạn muốn ở vị trí nào bạn? Mình mới vừa thêm Style ở cạnh phải vào bài viết rồi đấy :)

      Xóa
  9. Thanks, đẹp lắm, mà blog của cậu đẹp thật, nếu miễn phí thì cho tớ xin, quảng cáo cho cậu luôn

    Trả lờiXóa
    Trả lời
    1. Template hiện tại thì chắc không được đâu bạn :D Nếu bạn muốn thì mình có thể share cho bạn temp gốc, để lại mail nhé.

      Xóa
    2. vuatrochoiyuri@gmail.com
      Ý mình là cái gốc ấy, cái cậu bỏ công sức ra sao miễn phí được ^_^

      Xóa

Đăng nhập bằng Google


Cùng tham gia bình luận bài viết này nhé!