Code Pop Out Facebook, Google+, Twitter cho blogspot (Blogger)

Người đăng: Minh Tuyết vào lúc 16:46 | 0 nhận xét

Code Pop Out Facebook, Google+, Twitter cho blogspot (Blogger) 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á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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdgUwXDwg8JT_OhoVWM43xfvTfv1lsHpesTQIcii_Tl98WZLksjzBd_YVpNMvtK5ea4xbWTu5963OHCuDId_kyqcPjO5I7zjkergqoartt0ZTotVQy4ZUDirRTx1jcbanUZ-vVtaUF0M/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/chiasethuthuatit24h&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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo3HA6ZUYH9I-UKSiSk_KLyleMJKSHZ7-62N1GUONJHmXJYS57sux2MD4r5duqSjkgFC1n_dgkUP6vYn2-JmTfMp6ktaUwqIpBkhnWW9lzgK4886vAxI6huByU2D9_OkImsiWGCVxHRyPg/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/minhtuyet1990" 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt4x_AxKC4m-GZCSqQVYGuWrAnMUm0D6Opyhyphenhyphenwl0qfYaI12Jor2ZkfW9lontbuLwX90ff1n5Hze4Kfc8VK37JPeEC8UtRbuQc6kyBlNIVjAPyw9jGgaIT9a22QeXaL-6sIueZ4L-_72cY/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 = 'jodiescao';
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 chiasethuthuatit24h thành ID Page Facebook của Bạn
 · Thay minhtuyet1990 ID Page Google+ của Bạn
 · Thay jodiescao 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 (-_-) @!