[Sticky Widget] Cố định tiện ích khi cuộn trang blogspot - Blog Hồng - Thủ Thuật Blogspot- Facebook - Marketing

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

Đỗ Mạnh Hồng Designer, Developer

Tôi là Đỗ Mạnh Hồng chắc các bạn làm Blogger biết đến tôi cách đây vài năm trước rồi nhỉ, tôi xây dựng lên Blog Hồng với mong muốn lưu trữ những gì tôi trải nghiệm được mà không nhớ nổi để sau này tìm lại dễ dàng hơn và chia sẽ lại cho ai đó cần đến, những bài viết ở đây có một số tôi Coppy và tự viết.
Tôi mong rằng những bạn đến với Blog Hồng hãy văn minh lịch sự
URL : Copy
| https://www.bloghong.com/2016/10/sticky-widget-co-dinh-tien-ich-khi-cuon-trang-blogspot.html

Không có nhận xét nào:

Đăng nhận xét