[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.

[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>

<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é

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

Leave a Reply