Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger
Thứ Bảy, tháng 11 15, 2014
b
ộ nút Share Buttons hiệu ứng đẹp tự trượt lên cho Blogspot, bộ nút chia sẻ tự động hiện ở dưới lên cho blogger, nút share button tự xuất hiện cho blogger cùng Terocket nhé!
b
ộ nút Share Buttons hiệu ứng đẹp tự trượt lên cho Blogspot, bộ nút chia sẻ tự động hiện ở dưới lên cho blogger, nút share button tự xuất hiện cho blogger cùng Terocket nhé!
Tiếp tục với những chuỗi thủ thuật blog hay cùng Terocket, hôm nay chúng tớ sẽ hướng dẫn cả nhà cách để tạo một Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger, với thủ thuật blog tạo nút buttons share này thì hiệu ứng cực kỳ đẹp mắt, nó sẽ tự động hiện lên ở dưới màn hình khi chúng ta lăn xuống xem trang. Với việc này, gây ấn tượng mạnh mẽ với người đọc, làm họ có cảm giác kích thích và muốn share ngay lập tức.
Tiện ích này chỉ hoạt động với bài viết dài
Các widget có chứa bốn nút chia sẻ xã hội gồm Facebook, Twitter, Google+, LinkedIn. Và có một nút đóng X khi người dùng không muốn nó xuất hiện nữa. Rất tiện dụng với Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger này đúng không nào. Trước đây thì Terocket đã cho ra nhiều thủ thuật blog khác cực kỳ hay liên quan đến nút share buttons này rồi, các bạn có thể xem list ở cuối bài viết nha.
Nút share buttons này sẽ tự động hiện lên khi ta lăn trang xuống.
Còn giờ, chúng ta sẽ bắt tay vào để thực hiện Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger này nào. Chuẩn bị nhé các thành viên Terocket.
Đầu tiên cần thêm mã sau vào code HTML của trang.
Đầu tiên bạn vào Blog Title → Template → Edit HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm cho <data:post.body/> và copy đoạn mã sau vào sau <data:post.body/>.
NOTE : Nhớ rằng có rất nhiều đoạn mã <data:post.body/> , khoảng 3 cái gì đó, bạn cần tìm đúng cái cần chèn vào nhé.
<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'/>
</b:if>
Tiếp theo các bạn chỉ cần thêm đoạn mã sao vào trong HTML của trang.
Đầu tiên bạn vào Blog Title → Template → Edit HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm cho </body> và copy đoạn mã sau vào trước nó. Và lưu lại. Thế là xong!
<b:if cond='data:blog.pageType == "item"'>
<script src='https://googledrive.com/host/0B-0uHUanipfMNGNkeEYwazNLT2M' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'> <a class='boxclose' id='boxclose'/>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.linkedin:hover .slide{left:-150px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228}.linkedin .icon,.linkedin .slide{background:#007bb6}</style>
<div id='share-buttons'> <div class='facebook share-button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTerocket&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'> </iframe> </div> <div class='twitter share-button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' data-via='AllBloggerTrick' href='https://twitter.com/share'> Tweet </a><script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div> <div class='google share-button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div><script type='text/javascript'>
(function() {
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 class='linkedin share-button'> <i class='icon'> <i class='icon-linkedin'> </i> </i> <div class='slide'> <p> linkedin </p> </div> <script data-counter='right' type='IN/Share'> </script> <script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script> </div></div><div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'> Don't You Think this Awesome Post should be shared ??<br/> <span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span> </div> </div> </div> </b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Note: Ở trong đoạn mã trên có 2 phần cần chú ý đó là Terocket bạn cần thay đổi lại chính là đường link Fanpage của mình nhé.Thứ 2 là đoạn mã http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js Các bạn để ý, nếu có mã Jquery.min.js đó trong web của mình rồi thì xóa nó đi nha.
Ở trên là thủ thuật tạo Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger cực kỳ hay cho cả nhà, chắc chắn thủ thuật này của Terocket nhiều bạn sẽ cực kỳ thích thú. Nếu các bạn thấy hay hãy share đến bạn bè nha, và nếu thấy chưa làm được hoặc chưa hiểu chổ nào, hãy gửi bình luận ở dưới đây, chúng tớ sẽ giải đáp đầy đủ cho các bạn.
Nhận xét