Thêm Pop Out Facebook, Google+, Twitter cho blogspot (Blogger)

Facebook, Google và Twitter là 3 mạng xã hội lớn nhất hiện và hầu hết các Blog/Website đều gắn các nút mạng xã hội này hoặc họ gán các Group (hay Page) này lên trực tiếp lên các Site. Múc đích nhất là “Nhận được một lượng lớn traffic” từ các mạng xã hội này.

Nhưng việc thêm các Group (hay Page) này vào Blog/Website của bạn nó lại chiếm quá “nhiều diện tích”. Chính vì đều này mà hôm nay Windows2it sẽ hướng dẫn cho các bạn thêm các Group (hay Page) này vào Site của bạn chiếm 1 một diện tích nhỏ nhất mà vẫn dữ được “tính năng” của nó. Thủ thuật này có tên POP OUT DẠNG TRƯỢT

Đọc thêm:




☼ Cách tiến hành:

Chỉ cần chèn đoạn mã sau đây vào một Widget HTML/Javascript là Oke

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

1. Code đối với mạng xã hội Facebook

Thêm Pop Out like box facebook cho blogspot

<style type="text/css">
#fbplikebox {
    display: block;
    padding: 0;
    z-index: 99999;
    position: fixed;
    background: #ffffff;
}

.fbplbadge {
    background-color: #3B5998;
    display: block;
    height: 150px;
    top: 40%;
    margin-top: -55px;
    position: absolute;
    left: -47px;
    width: 47px;
    background-image: url("https://3.bp.blogspot.com/-1GCgbuSZXK0/T38iRiVF41I/AAAAAAAABpg/WlGuQ3fi-Rs/s1600/vertical-right.png");
    background-repeat: no-repeat;
    overflow: hidden;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<br />
<div id="fbplikebox" style="display: none;">
<div class="fbplbadge">
</div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Windows2lt&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe>
</div>  


2. Code đối với mạng xã hội Google+

Thêm Pop Out Follower cho blogspot

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://4.bp.blogspot.com/-ihjy-j5R5zY/UNViuM_KGPI/AAAAAAAAHyk/lPr2Ddred_M/s1600/g++lordhtml.jpg") no-repeat scroll left center transparent !important;
display: block;
float: left;
height: 330px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:30%;
}
.gplusbox div{
padding: 15px;
background: white;
border: 2px solid #D64937;
border-right: 0;
}
</style>
<br />
<div class="gplusbox">
<div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/101640176381227204665" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div>
</div>

3. Code đối với mạng xã hội Twitter

Thêm Pop Out Twitter cho blogspot

<script type="text/javascript">
//<!-- 
$(document).ready(function() {$(".twitterboxot").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); 

//--> 

</script> 

<style type="text/css">
 .twitterboxot{background: url("https://2.bp.blogspot.com/-Pbf_Gxpfxn8/TujHvHczKJI/AAAAAAAABLA/aRmd6pIMgDw/s1600/twitterfanbox-OT.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 240px;
padding: 0 5px 0 46px;
width: 245px;
z-index: 99999;
position:fixed;
right:-250px; top:20%;}
</style>
<div class="twitterboxot"><div>
<div id="twitter-box"></div>
<script>
var tw_user = 'quangmen93';
var tw_width = 320;
var tw_height = 325;
var no_face = 15;
(function() {
var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
tw_box.src = '//www.twitter-fanbox.com/tw.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
})();
</script></div></div>

☼ Tùy chỉnh

·        Thay Windows2lt thành ID Page Facebook của Bạn

·        Thay 101640176381227204665 ID Page Google+ của Bạn

·        Thay quangmen93 ID Twitter của Bạn

·        Còn mấy cái tùy chỉnh khác thì các Bạn Pro mình không cần phải nhắc tới (-_-) @! <Nhưng mình nghĩ các bạn không phải chỉnh sửa lại đâu mình đã hiệu chỉnh cho phù hợp hết rùi> <MÌNH ĐỂ TRỰC TIẾP 2 DEMO Google+Facebook TRỰC TIẾP TRÊN BÀI ĐĂNG CHO CÁC BẠN THAM KHẢO LUÔN ĐÓ>

☼ Kết luận

·        Sử dụng 1 đoạn CSS, đoạn Scipts mở (chưa mã hóa - endcode) và sử dụng Jquery để hổ trợ hiệu ứng trượt (nếu Blog của bạn chưa có thư viện Jquery)

·        Đẹp, gọn không chính diện tích nhưng vẫn dữ “được tính năng”

Còn bạn làm mà nó không hoạt động hay muốn Support gì thì cứ để lại comment @!



Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

6 nhận xét:

  1. Mình đã làm theo hướng dẫn mà bị lỗi nó dính vào nhau. Thanh facebook không kéo ra được :( Bạn xem giúp mình được không. Trang của mình là http://www.vanchoe.com/ Cảm ơn bạn trước.

    ReplyDelete
    Replies
    1. Mình kiểm tra trang bạn _ nhưng ko thấy bạn thực hiện thủ thuật (làm bị lỗi bạn đã xóa rồi chăn)__ Bạn vui lòng để lại mình xem thử nó bị lỗi gì..
      >>> Bạn chỉ cần Copy đoạn và paste HTML/JavaScript và sữ ID lại là xong >> cái này là sao bị lỗi được ta? :)

      Delete
  2. bây giờ mình muốn thu nhỏ cái bảng slide show trong blog mình thì tìm code ở đâu vậy ad mình mò ko ra dc do slide show nó có sẳn
    notebookmmo.blogspot.com

    ReplyDelete
    Replies
    1. SiteShow:

      Thì bạn tìm đoạn code này: để tùy chỉnh chiều cao
      .fpimg{
      width: 100%!important;
      height: 410px; Sữa 410px thành kích thước bạn muốn
      }

      và tìm tới đoạn code này: để tùy chỉnh chiều rộng

      .slider{
      height: 570px!important;
      width: 480px; Sữa 480px thành kích thước bạn muốn
      margin-left: 0px;
      margin-top: 48px;
      float: right;
      margin-bottom: 0;
      height: 671px;
      }

      Delete
  3. mình làm rồi G+ có hiện ra ngon lành, còn fanfacebok thì không hiện ra, bạn giúp mình với nhé

    ReplyDelete
    Replies
    1. Blog bạn đâu cho mình xem qua tí !!! Nếu G+ được thì facebook phải làm được luôn chứ !!! ... Demo mình để hoạt động rất tốt mà :)

      Delete