Bài viết đề xuất trượt trên blog kết hợp Twitter và Facebook.
Trong bài này namkna sẽ giới thiệu một tiện ích mới dạng bài viết đề xuất trượt mà trước đây chỉ Wordpress mới có. Recommended post hiện nay được rất nhiều các trang nổi tiếng như The New York Times, Mashable, Times of India,...Đặc điểm của tiện ích này là khi bạn kéo chuột xuống đọc bài viết thì sẽ xuất hiện một ô đề xuất cho bạn một bài viết được lựa chọn ngẫu nhiên trong blog cho khác xem blog. Điểm đặc biệt là có hình ảnh đi kèm nên rất đẹp.
Bạn xem Demo sẽ thấy rõ hơn
Recommended Post Slider Widget for Blogger with Twitter / Facebook share button - Bài viết đề xuất trượt trên blog kết hợp Twitter và Facebook..
Xem Demo:


Dạng 1: Có nút chia sẻ lên Twitter và Facebook.


Hình minh họa:Bài viết đề xuất trượt trên blog kết hợp Twitter và Facebook. - recommentded post for blogspot
Bài viết đề xuất trượt trên blog kết hợp Twitter và Facebook.
- Bạn cũng có thể kéo xuống cuối blog này để xem demo

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào Bố cục (Layout)
3- Chọn Thêm tiện ích => Chọn HTML/Javarscip và dán đoạn code bên dưới vào:
<style type="text/css">
#recslide{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #000;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-6px -5px 5px #aaa; font-family:Arial, Helvetica, sans-serif;}
#recslide p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#000; font-weight: bold;}
#recslide_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#recslide a,#recslide a:hover,#recslide_title{text-decoration:none;color:#FE3F10; padding: 5px 5px 5px 2px;}
#recslide .close,#recslide .expand,#recslide .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
#recslide .help{right:35px;}
#recslide_image{float:left;width:80px;}
#recslide_title{width:287px;height:30px;overflow:hidden;}
</style>
<div id="recslide" style="display:none;">
 <div class="help">?</div>
 <div class="expand">+</div>
 <div class="close">X</div>
 <p>Recommended for you</p>
 <div id="recslide_image"></div>
 <div id="recslide_title">Loading..</div>
 <center><div id="share_box">loading</div></center>
</div>
<script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bts_onload_queue=='undefined')var bts_onload_queue=[];if(typeof bts_dom_loaded=='boolean')bts_dom_loaded=false;else var bts_dom_loaded=false;if(typeof bts_async_loader!='function'){function bts_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(bts_dom_loaded){newcallback()}else bts_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bts_domLoaded!='function')function bts_domLoaded(callback){bts_dom_loaded=true;var len=bts_onload_queue.length;for(var i=0;i<len;i++){bts_onload_queue[i]()}}bts_domLoaded();bts_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bts_async_loader("http://dl.dropbox.com/u/66256041/PageNavigatio/namkna-blogspot-com/recommended-Slide-v1.0.js",function(){},"bts-out-slide")},"jQueryjs")}</script>
- Thay chữ Recommended for you thành chữ bạn muốn như "Đề xuất dành cho bạn" chẳng hạn.
4- Bấm Lưu Mẫu tiện ích lại.
Bạn có thể bấm vào nút bên dưới để thêm trực tiếp vào blog bạn.

Dạng 2: Không có nút chí sẻ lên Twitter và Facebook.

Hình minh họa:
Bài viết đề xuất trượt trên blog kết hợp Twitter và Facebook. - recommentded post for blogspot

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào Mẫu

3- Chọn Thêm tiện ích => Chọn HTML/Javarscip và dán đoạn code bên dưới vào
<div id="bpslidein" style="display:none;">
 <div class="help">?</div><div class="expand">+</div>
 <div class="close">X</div>
 <p>Recommended for you</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://dl.dropbox.com/u/66256041/PageNavigatio/namkna-blogspot-com/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script>
- bạn có thể bấm vào nút dưới để thêm vào blog của bạn.
4- Bấm Lưu Mẫu tiện ích lại.

Cài đặt nâng cao.

Nếu bạn muốn tiện ích chỉ xuất hiện ở các trang bài viết thì bạn vào Mẫu - Chỉnh Sửa HTML - Mở rộng tiện ích mẫu và tìm 1 trong các đoạn code sau:
<data:post.body/>
Hoặc:
<div class='post-footer-line post-footer-line-1'>
Hoặc 
<p class='post-footer-line post-footer-line-1'>
- Và thêm vào sau nó ddaonj code sau:
<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='recslide_place_holder'></div>
</b:if>
- Bấm Lưu Mẫu tiện ích lại.
Bạn nên download các file ja về và Upload lên host để dùng lâu dài nha.