Thư viện

Trải nghiệm

Thứ Ba, tháng 4 03, 2012

Recommentded post kết hợp Tweet và Facebook cho blogger

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

Chia sẻ:
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.

8 nhận xét:

  1. Có 1 vấn đề cậu ơi
    Cái tiện ích này chỉ xuốt hiện khi kéo xuống tít cuối trang mà đọc 1 bài viết có ai kéo tít xuống dưới đó nữa đâu
    Cậu chỉnh sửa đc ko
    http://kenh21.blogspot.com/2012/04/aaaaaaaaaaaaaaaaaaaa.html

    Trả lờiXóa
  2. Nam ơi, mình có vấn đề muốn thêm là nếu mình muốn nó xuất hiện 1 bài viết có hình, và 2 bài viết khác ko có hình thì mình thêm vô thế nào? và mình ko muốn nó tắt luôn khi nhấn x chứ ko muốn nó nằm xuống dưới vậy thì làm thế nào??? Giúp mình nhé!

    P/s: Trả lời hướng giải quyết giúp mình nhanh cái vụ tag keyword cho bài viết giúp mình nhé! Đã ghi 3 comment rùi mà chưa thấy bạn hồi âm. Thanks

    Trả lờiXóa
  3. @D.A.U Ngon Muốn thế hãy sử dụng tiện ích của facebook. Official Facebook Recommendations Bar Widget for Blogger / Blogspot

    - Phần tag/ key work mình đã trả lời rùi đó nha:Tạo bộ Tag, Keywork cho bài viết trong blogspot

    Trả lờiXóa
  4. Của Nam cũng nằm tít cuối trang. Ý mình là đưa lên trên chút hoặc ẩn hiện như tiện ích của facebook mà bạn đang xài thì tốt quá.

    À Tiện đây cho hỏi ngoài luồng cái: Tài khoản Facebook của mình không hiểu sao bị lock (nó yêu cầu phải gửi bản scan Chứng minh nhân dân-đã gửi rồi) nhưng không thấy nó trả lời. Liệu nó có khóa luôn không ta? Mình mới tập chơi FB nên chưa rành lắm. Ai biết chỉ giúp với!!

    Trả lờiXóa
    Trả lời
    1. Trường hợp của bạn thì vào template(Mở rộng tiện ích). Tìm <data:post.body/> sau đó dán ngay sau nó đoạn code sau
      <div id='bpslidein_place_holder'/>
      Nếu bạn muốn thêm nhiều tùy chọn cho tiện ích như vị trí xuất hiện, màu sắc cho từng thành phần của tiện ích thì có thể sử dụng công cụ tạo Recommended Post Slide nhanh tại đây

      Xóa
  5. Cảm ơn bạn. Mình áp dụng ngay. Nếu có vấn đề gì thì tớ sẽ comment để xin hướng dẫn tiếp
    Thank's!!

    Trả lờiXóa
    Trả lời
    1. HUy nói đúng rồi đó. Bỏ lệnh style='display:none' đi là Ok.

      <div id='recslide_place_holder'/>

      Nếu muốn chỉ hiển thị khi xem bài viết thì dùng:

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

      Xóa