Recommended Post Slide out for Blogger

Một trong những cách để kéo dài thời gian truy cập của độc giả đối với blog của bạn chính là thủ thuật mình sẽ hướng dẫn trong bài viết này. Tiện ích này sẽ mở ra một hộp mời độc giả của bạn đọc thêm một bài nào đó khi họ kéo thanh cuộn đến một mức nào đó trong bài viết, ta tạm gọi hộp này là "Có Thể Bạn Sẽ Thích"

Bạn có thể xem demo bằng hình ảnh ở dưới để rõ ràng hơn

Demo

Làm cách nào để thêm tiện ích thú vị này vào blog?

Bước 1: Vào blogger > Bố cục>
Bước 2: Thêm tiện ích HTML/Javascrip và dán vào phần nội dung đoạn code bên dưới

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Có Thể Bạn Sẽ Thích</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://trollvlhcv.googlecode.com/svn/trunk/icontrollvl/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script>

Bước 3: Lưu lại

Tùy Biến Hộp "Có Thể Bạn Sẽ Thích"

Bạn có thể điều chỉnh hộp trên xuất hiện tại thời điểm nào khi thanh cuộn được kéo xuống. Mặc định của thủ thuật này là khi bạn kéo thanh cuộn xuống cuối cùng của blog thì hộp thoại mới xuất hiện, để thay đổi bạn phải chỉnh sửa lại HTML. Và mình sẽ hướng dẫn bạncách để hộp thoại xuất hiện khi kéo thanh trượt đến hết bài viết
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Tìm thẻ <data:post.body/> và dán ngay sau nó code bên dưới

<b:if cond='data:blog.pageType == "item"'>
<div id='bpslidein_place_holder'/>
</b:if>

Bước 4: Lưu lại template