Share
Xem chủ đề cũ hơnGo downXem chủ đề mới hơn
avatar
Sáng lập viên
Sáng lập viên
Posts : 18
Points : 105
Thanked : 30
Xem lý lịch thành viênhttp://borutofans.forumvi.com

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

on Sat Jun 25, 2016 8:04 am
Message reputation : 100% (1 vote)

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
avatar
Sáng lập viên
Sáng lập viên
Posts : 16
Points : 2147483647
Thanked : 36
Xem lý lịch thành viên

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

on Sun Jun 26, 2016 7:19 am
Message reputation : 100% (1 vote)
Tôi thích bài viết của bạn ! @Admin
Xem chủ đề cũ hơnVề Đầu TrangXem chủ đề mới hơn
Permissions in this forum:
Bạn không có quyền trả lời bài viết