Diễn đàn tổng hợp về Forumotion

DÀNH CHO KHÁCH
Vui lòng đăng nhập hoặc đăng kí để tham gia diễn đàn

[Tự làm] Khung quảng cáo bên trái ( có nút đóng )

Share
    Admin
    avatar
    Posts : 18
    Points : 105
    Thanked : 30

     on Sat Jun 25, 2016 8:04 am

    Demo




    Demo link : http://trandangduat.forumvi.com/t7-topic

    Hoặc : https://jsfiddle.net/53abskm1/ 

    Nhấn vào nut đóng là nó fade luôn á !

    Cách làm


    Làm chi tiết:

    Vào CSS thêm : 

    Code:

    /*Quangcao - made by trandangduat*/
    .cbc{background-position:right top;background-repeat:no-repeat;cursor:pointer;height:15px;right:0;top:0;margin:0;overflow:hidden;position:absolute;transform:scaleX(1);width:16px;z-index:9010;color:white;background:red;font-size:16px;padding:4px;text-align:center;border-radius:0 0 0 5px;font-weight:bold;transition:.2s}
    .cbc:hover{background:rgba(255,0,0,0.93)}

    Quăng code này vào overall_footer_begin

    Code:
    <script type="text/javascript">
        $(document).ready(function () {
            $("#cbc").click(function () {
                $(this).parent().fadeOut(500);
            });
        });
    </script>
        <div style="box-shadow: 2px 2px 7px #888888;position: fixed;bottom: 150px;z-index: 9999;left: 2px;border: 4px solid #fff;border-radius: 4px 1px 1px 4px;">
            <div id="cbc" class="cbc">
                <div id="cb-x" class="cb-x">x
                    </div>
                        </div>
                            <a href="https://www.tinhoc123.net" target="_blank" class="tooltipstered"><img width="125" height="300" src="http://i.imgur.com/meJHddD.jpg"></a>
                            </div>

    Code gộp:

    Quăng vào overall_footer_begin

    Code:
    <script type="text/javascript">
                $(document).ready(function(){
                    $("#cbc").click(function(){
                        $(this).parent().fadeOut(500);
                    });
                });
            </script>
    <div style="box-shadow: 2px 2px 7px #888888;position: fixed;bottom: 150px;z-index: 9999;left: 2px;border: 4px solid #fff;border-radius: 4px 1px 1px 4px;"><div id="cbc" class="cbc"><div id="cb-x" class="cb-x">x</div></div><a href="https://www.tinhoc123.net" target="_blank" class="tooltipstered"><img width="125" height="300" src="http://i.imgur.com/meJHddD.jpg"></a></div>  
    <style>.cbc {background-position: right top;background-repeat: no-repeat;cursor: pointer;height: 15px;right: 0;top: 0;margin: 0;overflow: hidden;position: absolute;transform: scaleX(1);width: 16px;z-index: 9010;color: white;background: red;font-size: 16px;padding: 4px;text-align: center;border-radius: 0px 0px 0px 5px;font-weight: bold;transition: .2s;}.cbc:hover {background: rgba(255, 0, 0, 0.93);}</style>

    Thiết lập


    Thay "http://i.imgur.com/meJHddD.jpg" thành link ảnh với size là : 125 x 300

    Thay : "https://www.tinhoc123.net" thành link ảnh sẽ dẫn đến
    Dang123
    avatar
    Posts : 16
    Points : 2147483647
    Thanked : 36

     on Sun Jun 26, 2016 7:19 am

    Tôi thích bài viết của bạn ! @Admin

    Đăng kí hoặc đăng nhập để gửi trả lời

    Bạn phải là thành viên của diễn đàn thì mới gửi được câu trả lời

    Tạo một tài khoản

    Bạn muốn tham gia diễn đàn của chúng tôi ? Hãy tạo một tài khoản nào !


    Đăng kí

    Đăng nhập vào diễn đàn

    Bạn đã có tài khoản ? Còn chờ gì nữa mà không đăng nhập vào diễn đàn !


    Đăng nhập

  • Bình luận Facebook
  • Bình luận Google