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

Đăng bởi Admin | 28/8/2019)

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/AVvXsEjKvyWczPmKbBI83ZRg2OyRNuoFV7f31zJ_HOYtthxI2EF0HpjaMEV4JLxmDAo9hh6l-CxUUzsDlqLQVyKx8MzrbGlkGPTY2qdswxoeYxqRUvh-twV6zEtatH_pnrNp5yfSOg2xneRObUM/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ài viết liên quan:

• Tweet
• Share
• Share
• Share
• Share