Item: Thêm Pop Out Facebook, Google+, Twitter cho blogspot (Blogger)
Rating: 9.5
Author: Bùi Tấn Đạt

Bởi: Bùi Tấn Đạt - Lúc: 01:06

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:

● Popup hiển thị like box của Fanpage facebook trên Blogspot (blogger) Mặc định và cài thời gian

● Thêm hộp tìm kiếm kết hợp với các nút mạng xã hội Version Pro

● "Loại bỏ" JavaScript và CSS chặn hiển thị tăng tốc độ Load của blogspot (blogger)

☼ 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 Facebook, Google+, Twitter cho blogspot (Blogger)

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlLLWR4ONcgo2hJ7UNjgjx30AxwlPuPTtRKXqbwmnPCswApG85eid5feXSfT4Boduz4RhPtM-0J-StEvlsiXjHkJDlnPxxeUKl3guxGJ2Iwgd2CsxNWJGwRgnbZ3J7E74FwHWcMoi3Ft0/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="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/VNuento&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+

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Z_j7SbTqUCIBcSCCEGpGpxVlg2Q1jZ2uNRSRLx47hK5Xf10lxoBw1MyaNyj4xKcRUyC_BjVFOJ96WL5StTZU8RzHqtqsbSp_X6WyOK7_PvwPoMmQyhrQjxR39wZRkxovgUdhGg6I7bRG/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/117640569566037262630" 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

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWo0e3wi7L744M5IQIL0TyPEBMCZnbmozAiYpF9CZF7cHYAhqjArmo_ktlPkA9ODPNxTBvjfnLxFv5PIog6Rl3iSFokyegIR-LE5AtWv968p-YQQrVrE1VSECMs-29ajnp_f7EVogKNhw/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+ VÀ 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 @!