Tùy chỉnh hộp popup cho các nút xã hội trên Blogger

Đăng bởi Admin | 1/1/14 | 0 nhận xét

Trong bài viết này sẽ giải thích cách làm thế nào để thêm hộp popup tùy chỉnh cho các blogger. Trên thực tế đây chỉ là widget. Bạn có thể thêm nó vào blog của bạn dễ dàng. Mẫu dưới đây bao gồm Google+, Facebok và Twitter counters. Hãy bấm xuống dưới liên kết để xem bản demo.

Demo

Đề nghị Widget xã hội cho Blogger:

1. Đăng nhập vào tài khoản blogger và nhấp thả xuống.

2. Bây giờ chọn " Giao diện "như dưới đây.

3. Bấm vào Thêm tiện ích và chọn "HTML / Javascript 
4. Dán mã dưới đây:

<style>
#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz9s2eUiKlA8F7wF1LSg0tteA4alko-N3PiiwAJlOaAqF_JE1MMjbek9_wag_ubsUZNC89LTrmh_s2jpz2YIJI_GvplI1klbzoMNEgXBqcEBWuQ7n0L5RgTIaS4NBf5m48X7AePqD-B8A/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggertrix&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/bloggertrix" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<div class='clear'></div>

*Lưu ý: Bạn thay dòng màu đỏ bằng thông điệp: Đừng quên tham gia cộng đồng của chúng tôi! hoặc bằng dòng thông điệp của riêng bạn.
5. Bây giờ lưu của bạn HTML / Javascript. Bạn đã làm xong. 
Hy vọng Khuyến nghị Widget xã hội này giúp tăng lượt xem trang của bạn.
Bạn có thể xem thêm các mẫu khác bên dưới:

Tạo hộp đăng ký xã hội dạng trượt 4 trong 1 cho Blogger

Tạo nút chia sẻ xã hội dạng ​​xoay Hover US cho blogger

Thêm nút Truyền thông xã hội cho Blogger một cách dễ dàng

Tạo phong cách thời trang cho hộp RSS Subscription trên blog

Tạo Widget truyền thông xã hội màu xanh cho Blogger

Tạo nút truyền thông xã hội nền gỗ cho Blogger

                                                                                       Theo: bloggertrix.com