[Đóng góp] Khung quảng cáo bên trái ( có nút đóng )

  Bài viết hay nhất1

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
  Bài viết hay nhất2
Cái này dùng css là đủ rồi. Dùng js chi cho phiền.

Html:

Code:
<div id="qc-left">
  <a href="#qc-left" class="btt-close">x</a>
  <a href="https://www.tinhoc123.net" target="_blank" class="tooltipstered"><img width="125" height="300" src="http://i.imgur.com/meJHddD.jpg"></a>
</div>

Css:

Code:
#qc-left {box-shadow: 2px 2px 7px #888888;position: fixed;bottom: 10%;z-index: 9999;left: 5px;border: 4px solid #fff;border-radius: 4px 1px 1px 4px;transition: 1s all;opacity: 1;}
.btt-close {position: absolute;right: -25px;top: -4px;background: red;padding: 0 5px;cursor: pointer;font-size: 18px;color: white!important;text-decoration: none;}
#qc-left:target{opacity: 0;z-index: -999;left:-999px}

Demo online:

http://jsfiddle.net/caVYd/222/
  Bài viết hay nhất3
Thanks anh , em mới tập tành thôi , đúng là ko thể so được vs thánh !
  Bài viết hay nhất4
Mấy bác ơi, cho em hỏi. Thế nếu làm cái nút đóng quảng cáo thì có bị dính chưởng của forumotion ko ạ
  Bài viết hay nhất5
kingofgame wrote:Mấy bác ơi, cho em hỏi. Thế nếu làm cái nút đóng quảng cáo thì có bị dính chưởng của forumotion ko ạ
Ờ thích thì cứ làm , ko bị dính chưởng đâu , nó chỉ la hán phi thiên ấn thôi !
You cannot reply to topics in this forum