Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger
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.
An Thành Adthinks - Terocket
Không có nhận xét nào