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 nooit tings 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.

Demo for Post

Xem hình minh họa:

((Bạn cũng có thể kéo xuống cuối blog này để xemdemo)

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Phầnt ử trang.

   4- 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>Đề xuất dành cho bạn.</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>

Trong đó thay chữ Đề xuất dành cho bạn. thành chữ bạn thích nha.

5. Bấm lưu tiện ích lại.Lưu

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.

- 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 Thiết Kế - 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.Lưu Mẫu 

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

  Xem hình minh họa:

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Phầnt ử trang.

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

- 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='bpslidein_place_holder'></div>
</b:if>

Bấm lưu.Lưu Mẫu 
Chúc thành công!

?

X

Đề xuất dành cho bạn.

Quang Lê Và Những Ca Khúc Trữ Tình Hay Nhất

Chủ đề: