[Sticky Widget] Cố định tiện ích khi cuộn trang blogspot

Sticky Widget là một thủ thuật cố định một widget (tiện ích) khi cuộn trang giúp tăng tỉ lệ click cho blogspot hay website rất hiệu quả vì đây là tiện ích có tính chất gây sự chú ý cực kỳ cao.

Bạn đang xem: [Sticky Widget] Cố định tiện ích khi cuộn trang blogspot

[Sticky Widget] Cố định tiện ích khi cuộn trang blogspot

Vậy chúng ta bắt đầu tìm hiểu cách cố định tiện ích khi cuộn trang trên blogspot nhé
Bước 1 : Mẫu > Chỉnh sửa HTML thêm đoạn code sau trên </body>

Xem thêm: Một số công cụ cần dùng để rip hoặc thiết kế templates blogspot

<script type='text/javascript'>
$(document).ready(function(){$("#HTML1").sticky({topSpacing:0,bottomSpacing:200})});
</script>
<script type='text/javascript'>
/*<![CDATA[*/
function downloadJSAtOnload(){var e=document.createElement("script");e.src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js";document.body.appendChild(e)}if(window.addEventListener)window.addEventListener("load",downloadJSAtOnload,false);else if(window.attachEvent)window.attachEvent("onload",downloadJSAtOnload);else window.onload=downloadJSAtOnload;
(function($){var e={topSpacing:0,bottomSpacing:0,className:'is-sticky',center:false},$window=$(window),$document=$(document),sticked=[],windowHeight=$window.height(),scroller=function(){var a=$window.scrollTop(),documentHeight=$document.height(),dwh=documentHeight-windowHeight,extra=(a>dwh)?dwh-a:0;for(var i=0;i<sticked.length;i++){var s=sticked[i],elementTop=s.stickyWrapper.offset().top,etse=elementTop-s.topSpacing-extra;if(a<=etse){if(s.currentTop!==null){s.stickyElement.css('position',").css('top',").removeClass(s.className);s.currentTop=null}}else{var b=documentHeight-s.elementHeight-s.topSpacing-s.bottomSpacing-a-extra;if(b<0){b=b+s.topSpacing}else{b=s.topSpacing}if(s.currentTop!=b){s.stickyElement.css('position','fixed').css('top',b).addClass(s.className);s.currentTop=b}}}},resizer=function(){windowHeight=$window.height()};if(window.addEventListener){window.addEventListener('scroll',scroller,false);window.addEventListener('resize',resizer,false)}else if(window.attachEvent){window.attachEvent('onscroll',scroller);window.attachEvent('onresize',resizer)}$.fn.sticky=function(d){var o=$.extend(e,d);return this.each(function(){var a=$(this);if(o.center)var b="margin-left:auto;margin-right:auto;";stickyId=a.attr('id');a.wrapAll('<div id="'+stickyId+'StickyWrapper" style="'+b+'"></div>').css('width',a.width());var c=a.outerHeight(),stickyWrapper=a.parent();stickyWrapper.css('width',a.outerWidth()).css('height',c).css('clear',a.css('clear'));sticked.push({topSpacing:o.topSpacing,bottomSpacing:o.bottomSpacing,stickyElement:a,currentTop:null,stickyWrapper:stickyWrapper,elementHeight:c,className:o.className})})}})(jQuery);
/*]]>*/
</script>

Trong đó các bạn chỉnh sửa HTML1 là tiện ích tùy chọn mà các bạn muốn cố định nhé
Bước 2 :  Lưu mẫu lại và kiểm tra thành quả nhé

Xem thêm: Khắc phục lỗi reply (trả lời) trên blogspot mới nhất 2019

Chúc bạn thành công ! Thủ thuật blogspot này quá đơn giản mà đúng không?

Nguồn: https://www.bloghong.com
Danh mục: Thủ Thuật Blogspot