Thủ thuật blogspot - Dautoblog

Facebook, Twitter, Google Plus Ẩn hiện trong cùng 1 tiện ích

Đối với Blog/Website Để Tăng Fans xã hội của bạn,chúng tôi có ba Pop khác nhau Giống như Hộp xuất hiện khi di chuột vào hình ảnh nhỏ ở thanh bên phải blog của bạn.

Một trong những cách tốt nhất để tăng fan xã hội của bạn là thêm Jquery Pop-up Box xã hội cho
Blog của bạn.Khi tiện ích này được cài đặt trên blog của bạn, khách truy cập của bạn sẽ thấy hiển thị một hộp trượt ra với các tùy chọn như trang page Facebook của bạn, hoặc theo trên Twitter, hoặc thêm bạn trong vòng tròn kết nối của G+.

Ưu điểm tiện ích này là tiết kiệm không gian trên trang. Bởi vì nếu bạn thêm tất cả các widget trên trang web / blog của bạn, nó sẽ có một không gian rộng lớn mà sẽ làm cho khách truy cập của bạn khó chịu.
Ở đây tôi đã thêm vào 3 hộp với hiệu ứng jQuery di chuột đơn giản. Cho phép thêm widget này thuận tiện thông qua Generator Widget,hoặc cài đặt thủ công.
Xem Demo

DEMO

Facebook, Twitter, Google Plus Ẩn hiện trong cùng 1 tiện ích

Làm thế nào để thêm các pop up này vào Blog của bạn
Ta cần đăng nhập blog và chọn thêm một tiện ích rồi dán code sau vào và lưu lại
<style type="text/css">
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {
width:245px;
height:260px;
overflow:hidden;
}
#twitter_div {
width:260px;
height:238px;
overflow:hidden;
}
#google_plus_div {
width:320px;
height:143px;
overflow:hidden;
}

#facebook_right {
z-index:10005;
border:2px solid #3c95d9;
background-color:#fff;
width:245px;
height:260px;
position:fixed;
right:-249px;
}
#facebook_right img {
position:absolute;
top:-2px;
left:-35px;
}
#facebook_right iframe {
border:0px solid #3c95d9;
overflow:hidden;
position:static;
height:360px;
left:-2px;
top:-3px;
}
#twitter_right {
z-index:10004;
border:2px solid #6CC5FF;
background-color: #6CC5FF;
width:260px;
height:243px;
position:fixed;
right:-264px;
}
#twitter_right_img {
position: absolute;
top: -2px;
left: -35px;
border: 0;
}
#google_plus_right {
z-index: 10003;
background-color: #006ec9;
border:2px solid #006ec9;
border-top:2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-right:2px solid #0056a0;
border-left: hidden;
width:320px;
height:107px;
position:fixed;
right:-323px;
}
#google_plus_right_img {
position: absolute;
top:-2px;
left:-33px;
border:0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {
jQuery("#facebook_right").hover(function () {
jQuery(this).stop(true, false).animate({
right: 0
}, 500);
}, function () {
jQuery("#facebook_right").stop(true, false).animate({
right: -245
}, 500);
});
jQuery("#twitter_right").hover(function () {
jQuery(this).stop(true, false).animate({
right: 0
}, 500);
}, function () {
jQuery("#twitter_right").stop(true, false).animate({
right: -260
}, 500);
});
jQuery("#google_plus_right").hover(function () {
jQuery(this).stop(true, false).animate({
right: 0
}, 500);
}, function () {
jQuery("#google_plus_right").stop(true, false).animate({
right: -320
}, 500);
});
});
//]]>
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <div id="on"><div id="facebook_right" style="top: 12%;"> <div id="facebook_div"><img alt="" src="http://1.bp.blogspot.com/-Wu3ENGeqb08/UaQJjHUEqpI/AAAAAAAAapQ/hEP3pV27MYQ/s1600/DTCfacebook_right.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F477172592337348&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe> </div></div></div><div id="on"><div id="twitter_right" style="top: 28%;"><div id="twitter_div"><img id="twitter_right_img" src="http://1.bp.blogspot.com/-PPND58tI660/UaQJ6XYp82I/AAAAAAAAapY/DIe3jd4W1XE/s1600/DTCtwitter_right.png"/><script type='text/javascript'>function fanbox_init(screen_name){ document.getElementById('twitterfanbox').innerHTML = '<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=' + screen_name + '" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>';} </script><div id="twitterfanbox"><script type="text/javascript"> fanbox_init("Dautocrazy");</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 45%;"> <div id="google_plus_div"><img id="google_plus_right_img" src="http://4.bp.blogspot.com/-qhmlfk3KutQ/UaQKKzxkVlI/AAAAAAAAapg/nu-cVLuZrYo/s1600/DTCgoogle_plus_right.png" /> <div style="float: left; margin: 10px 10px 10px 0;"><div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/116992302811065531576" data-source="blogger:blog:followers" data-width="270"></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></div></div></div>

Thay:
- 477172592337348 thành ID page facebook của bạn
- Dautocrazy thành tên đăng nhập tiwitter của bạn
- 116992302811065531576 thành ID G+ của bạn
Lưu ý:
https://www.facebook.com/pages/Giải-Trí-Chia-Sẻ/477172592337348
Đoạn bôi xanh chính là ID page facebook
Comments blogger

Không có nhận xét nào :