22 May 2016

Tạo nút bấm back to top, back to bottom và tắt quảng cáo góc trái màn hình cho web và blogspot

Code Tạo quảng cáo ở cuối trang web, 
blogspot có nút tắt bằng css và js


Gợi ý: 2 loại code trên mình để left (bên trái) nếu các bạn muốn bên phải thì cứ chỗ nào trong đoạn code có chữ left thì đổi thành right.
Tắt quảng cáo [x] (Bằng css) bên trái
2021
<!--Demo ads-->
<style>
#adBox {height: 310px; width: 300px; position:fixed; left:0px;bottom:0px; z-index:999;  }
#adBox img{ border:1px solid #3691CE;}
#adBox #adBox_title a { margin: 0px 0px 0px 194px; font-weight: bold; text-align: right; background-color: red; color: white;}
#adBox:target {display:none;}
</style>

<div id="adBox">
 <div id="adBox_title"><a href="#adBox">Tt Qung Cáo [X]</a></div>
<img src="link images" /></div>

<!-- End quang cao -->
Tắt quảng cáo [x] (Bằng js) bên trái
2021
<script type="text/javascript">
   function hide_float_left() {
       var content = document.getElementById('float_content_left');
       var hide = document.getElementById('hide_float_left');
       if (content.style.display == "none")
       {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }
           else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
       }
       }
</script>
<style>
   .float-ck { position: fixed; bottom: 0px; z-index: 9000}
   * html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
   #float_content_left {border: 1px solid #01AEF0;}
   #hide_float_left {text-align:left; font-size: 11px;}
   #hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
   <div id="hide_float_left">
      <a href="javascript:hide_float_left()">Tt Qung Cáo [X]</a>
   </div>
   <div id="float_content_left">
      <!-- Start quang cao-->
      <embed src="http://ads.visaonho.com/img/afoo/300x250.swf" width="250" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" wmode="transparent" allowScriptAccess="always"/>
      <!-- End quang cao --> 
   </div>
</div>

Code quay về đầu trang web, blogspot
(Nút cuộn lên đầu trang không cần lăn chuột)


Back to top (JQuery)
2021
<!-- BACK TO TOP -->
<style type='text/css'>
.back-to-top {
	border: 1px solid #F1F1F1;
	background: #C10000;
	text-align: center;
	padding: 5px;
	position: fixed;
	bottom: 0px;
	right: 35px;
	cursor: pointer;
	display: none;
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	width: 38px;
	border-radius: 8px 8px 0px 0px;
}

.back-to-top:hover {
	border: 1px solid #ffa789;
	background: #ff6734;
}

</style>

<p class='back-to-top'> BACK TO TOP </p>
<script >
    jQuery(document).ready(function() {
            var offset = 220;
            var duration = 500;
            jQuery(window).scroll(function() {
                if (jQuery(this).scrollTop() >
                    offset) {
                    jQuery('.back-to-top').fadeIn(duration);
                } else {
                    jQuery('.back-to-top').fadeOut(duration);
                }
            });
            jQuery('.back-to-top').click(function(event) {
                event.preventDefault();
                jQuery('html, body').animate({
                    scrollTop: 0
                }, duration);
                return false;
            })
        }
    );
</script>

Code di chuyển xuống cuối trang web, blogspot 
(Nút cuộn xuống cuối trang không cần lăn chuột)
Back to bottom (js)
2021
<!-- BACK TO BOTTOM -->
<style type='text/css'>.bottombottom{position: fixed; z-index: 9999; bottom: -3px; right: -6px; padding-bottom: 0px;}</style>
<a class='bottombottom' href='javascript:window.scrollTo(0,999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' src='http://icons.iconarchive.com/icons/saki/nuoveXT-2/48/Actions-green-arrow-down-bottom-icon.png'/></a>

<!-- QDS Bottom -->
<script type='text/javascript'>
function hide_float_right() {
    var content = document.getElementById(&#39;float_content_right&#39;);
    var hide = document.getElementById(&#39;hide_float_right&#39;);
    if (content.style.display == &quot;none&quot;)
    {content.style.display = &quot;block&quot;; hide.innerHTML = &#39;<a href='javascript:hide_float_right()'>Tt Qung Cáo [X]</a>&#39;; }
        else { content.style.display = &quot;none&quot;; hide.innerHTML = &#39;<a href='javascript:hide_float_right()'>Xem Qung Cáo</a>&#39;;
    }
    }
</script>

0 nhận xét:

Post a Comment

 

BACK TO TOP

Xuống cuối trang