Thêm chú sóc chia sẻ mạng xã hội 2013-08-18

Thêm chú sóc chia sẻ mạng xã hội

  1. H.B.T_Binh
    Demo : http://game-vn.tk

    untitled
    Công dụng : Như tiêu đề ;))

    Cách làm :
    1. Các bạn tải file .zip về giải nén ra và upload file sharing-sprite.png lên thư mục gốc của style bạn

    2. Vào AdminCP > Styles > Appearance > Styles > Template > footer thêm đoạn code sau vào cuối :

    Mã:
    <div id="social-sharing-box" class="like">
                <a class="facebook" href="http://www.facebook.com/" rel="nofollow" target="_blank">Facebook</a>
                <a class="twitter" href="https://twitter.com/" rel="nofollow" target="_blank">Twitter</a>
                <a class="googleplus" href="https://plus.google.com/" rel="nofollow" target="_blank">Google plus</a>
                <a class="linkedin" href="http://www.linkedin.com/" rel="nofollow" target="_blank">Linkedin</a>
    </div>
    Thay lại các đường dẫn mạng xã hội của bạn

    3. Tiếp tục với template footer.css thêm đoạn code sau vào trên cùng :

    Mã:
    #social-sharing-box{position:fixed;right:20px;bottom:30px;overflow:hidden;}#social-sharing-box a{display:block;float:right;position:relative;text-decoration:none;text-indent:-9999em;padding:0;margin:0;background:url('@imagePath/xenforo/sharing-sprite.png') no-repeat -76px 0;width:81px;height:85px;vertical-align:top;z-index:110;}#social-sharing-box a.twitter,#social-sharing-box a.linkedin,#social-sharing-box a.googleplus{background-position:-38px -49px;transition:margin 300ms;-webkit-transition:margin 300ms;width:37px;height:36px;margin:43px -49px 0 4px;z-index:105;}
    #social-sharing-box a.googleplus{background-position:0 -49px;}
    #social-sharing-box a.linkedin{background-position:-38px -6px;margin-left:0;}
    #social-sharing-box:hover a.twitter,#social-sharing-box:hover a.linkedin,#social-sharing-box:hover a.googleplus{width:37px;margin:43px 0 0 4px;}
    @media all and (max-width:1245px){#social-sharing-box{display:none;}}
    
    Dòng
    @media all and (max-width:1245px){#social-sharing-box{display:none;} này các bạn có thể xóa đi nếu thích hoặc chỉnh cái max-width lại :D

    4.Done! :D
    gacon_hocit, antv and Imma Kun like this.
comments powered by Disqus