Ở các bài viết trước mình cũng đã hướng dẫn cho các bạn cách thêm nút Share trượt dọc hai bên Blog mình cũng nói các ưu, nhược điểm của từng Version. Đến với bài hôm nay “Thêm nút share trượt dọc cho Blogspot Pro Version 2” sẽ được cải tiến hơn rất nhiều so với 2 phiên bản trước: Về màu sắc, hình dạng nút Button, hiệu ứng và đặt biệt hơn là quá trính cập nhật tổng lượt Share sẽ được diễn ra nhanh hơn…Rất bắt mắt và gây hứng thú làm tăng khả năng độc giả chia sẽ bài viết của bạn.
Sử dụng lưu trữ miễn phí bởi OpenShift.com để lưu trữ các script PHP nhằm tính tổng các lượt Share trên các nền tảng mạng xã hội khác nhau.
Mình đã vô hiệu hóa (ẩn) nó trên thiết bị điện thoại khi kích thước màng hình nhỏ hơn 497px bằng CSS. Nếu bạn muốn nó hiện thị trên thiết bị điện thoại chỉ cần xóa đoạn CSS đó đi là được (Mình sẽ chỉ đoạn CSS này ở phần tùy chỉnh).
Bạn có thể cài đặt các nút Share trực tiếp vào bài viết mà tôi đã phát hành trước đó và đã áp dụng trên Blog này.
☼ Giờ bắt đầu thủ thuật cùng Windows2it
Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <head>.
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Bước 2: Tiếp đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ </b:skin>.
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> /*------------------------------------------------------------ Floating Social Share Button Bar Version 2.0 Designed by:: http://www.windows2it.com Shares Count Code by:: http://donreach.com/social-share-count issued under GNU GPL Licence Icons:: FontAwesome 4.2.0 **************** Do Not Remove These Credits ***************** ------------------------------------------------------------*/ .twistBlogger_SocialBar { position: fixed; bottom: 30%; padding: 0; left:0; background: none; text-align: center; margin: 0 auto; z-index: 99999999; } .twistBlogger_SocialBar label:hover { cursor: pointer; opacity:1; } .twistBlogger_SocialBar label { text-align: center; opacity: 0.4; width: 50px; background: #3A3939; color: #FFF; border: 0; font-family: FontAwesome; display: block; font-size: 12px; padding: 0px 0px; border-radius: 0; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; position: absolute; line-height: 1.5em; margin-top: 346px; } input.ShowHide_Button:checked + label { transform-origin: 50% 0%!important; -webkit-transform-origin: 50% 0%!important; -moz-transform-origin: 50% 0%!important; -ms-transform-origin: 50% 0%!important; -o-transform-origin: 50% 0%!important; opacity: 1; -webkit-transform: translateX(0px) rotateY(-180deg); -moz-transform: translateX(0px) rotateY(-180deg); -ms-transform: translateX(0px) rotateY(-180deg); -o-transform: translateX(0px) rotateY(-180deg); transform: translateX(0px) rotateY(-180deg); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; border: 1px solid #3A3939; border-radius: 50px 0px 0px 50px; width: 30px; max-width: 30px; } input.ShowHide_Button ~ .ShowHideMe { -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); } input.ShowHide_Button:checked ~ .ShowHideMe { margin-left: -75px !important; } input.ShowHide_Button { display: none; } .twistBlogger_SocialBar .social_menu { display: inline-block; float: left; list-style:none; max-width:50px; margin: 0; padding: 0; } .twistBlogger_SocialBar .social_menu .button_facebook { background: #3a579a; } .twistBlogger_SocialBar .social_menu .button_facebook:hover { background: #314a83; } .twistBlogger_SocialBar .social_menu .button_twitter { background: #00abf0; } .twistBlogger_SocialBar .social_menu .button_twitter:hover { background: #0092cc; } .twistBlogger_SocialBar .social_menu .button_googleplus { background: #df4a32; } .twistBlogger_SocialBar .social_menu .button_googleplus:hover { background: #be3f2b; } .twistBlogger_SocialBar .social_menu .button_pinterest { background: #cd1c1f; } .twistBlogger_SocialBar .social_menu .button_pinterest:hover { background: #ae181a; } .twistBlogger_SocialBar .social_menu .button_stumbleupon { background: #ea4b24; } .twistBlogger_SocialBar .social_menu .button_stumbleupon:hover { background: #c7401f; } .twistBlogger_SocialBar .social_menu .button_linkedin { background: #2554BF; } .twistBlogger_SocialBar .social_menu .button_linkedin:hover { background: #224EB4; } .twistBlogger_SocialBar .social_menu .button_facebook .count, .twistBlogger_SocialBar .social_menu .button_twitter .count, .twistBlogger_SocialBar .social_menu .button_googleplus .count, .twistBlogger_SocialBar .social_menu .button_pinterest .count, .twistBlogger_SocialBar .social_menu .button_stumbleupon .count, .twistBlogger_SocialBar .social_menu .button_linkedin .count { color: #fff!important; padding-top: 4px; font-size: 13px !important; line-height: 1.2em; font-family: sans-serif; font-weight: bold; } .twistBlogger_SocialBar .social_menu > ul { margin: 0; padding: 0; list-style: none; } .twistBlogger_SocialBar .social_menu .share { background: #FFF; color: #807F7F; font-size: 11px; height: 45px !important; } .twistBlogger_SocialBar .social_menu .share .count.h4 { font-size: 18px; font-family: sans-serif; color: #424242; height: 25px !important; line-height: 1.5em; font-weight: bold; margin: 0px !important; } .twistBlogger_SocialBar .social_menu .share .h6 { padding-bottom: 3px; font-family: sans-serif; margin: 0px !important; line-height: 1.5em; font-size: 11px; } .twistBlogger_SocialBar .social_menu > ul > li { margin: 0px 0px 0px 0px; position: relative; text-align: center; list-style: none; list-style-type: none; padding: 0px; border: 0px; border-left: 0 solid rgba( 0,0,0,.4); height: 50px; width: 50px; overflow: hidden; display: block; box-sizing: border-box; background: none; box-sizing: content-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .twistBlogger_SocialBar .social_menu > ul > li a { display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 5px 0px; cursor: pointer; text-decoration: none; } .twistBlogger_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 40px; } .twistBlogger_SocialBar .social_menu > ul > li i { color: #fff !important; font-family: FontAwesome; font-size: 20px; font-style: normal; font-weight: normal; line-height: 1em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .twistBlogger_SocialBar .social_menu > ul > li:hover i { opacity: 0.9; } @media only screen and (min-width:768px) and (max-width:979px) { .twistBlogger_SocialBar { bottom: 20% !important; } } @media only screen and (min-width:480px) and (max-width:767px) { .twistBlogger_SocialBar { bottom: 15% !important; } } @media only screen and (max-width:479px) { .twistBlogger_SocialBar { bottom: 10% !important; display: none !important; /*---delete this code line to make it appear on mobile--*/ } } </style> </b:if>
Bước 3: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <b:includable id='post' var='post'>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <b:includable id='post' var='post'>.
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div class='twistBlogger_SocialBar'> <input class='ShowHide_Button' id='twiSter' type='checkbox'/> <label for='twiSter'><i class='fa fa-arrow-left'/></label> <div class='ShowHideMe'> <div class='social_menu'> <div class='share'> <div class='share-btn' data-service='total'> <div class='count h4'/> <div class='h6'>SHARES</div> </div></div> <ul> <li class='button_facebook'> <a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'><strong><i class='fa fa-facebook'/> <div class='share-btn' data-service='facebook'> <div class='count'/></div></strong> </a> </li> <li class='button_twitter'> <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @quangmen93 - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/> <div class='share-btn' data-service='twitter'> <div class='count'/></div></strong> </a> </li> <li class='button_googleplus'> <a expr:href='" https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'><strong><i class='fa fa-google-plus'/> <div class='share-btn' data-service='google'> <div class='count'/></div></strong> </a> </li> <li class='button_pinterest'> <a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/> <div class='share-btn' data-service='pinterest'> <div class='count'/></div></strong> </a> </li> <li class='button_stumbleupon'> <a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + " & title=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/> <div class='share-btn' data-service='stumbleupon'> <div class='count'/></div></strong> </a> </li> <li class='button_linkedin'> <a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/> <div class='share-btn' data-service='linkedin'> <div class='count'/></div></strong> </a> </li> </ul> </div> </div> </div> <script type='text/javascript'>//<![CDATA[ $(document).ready(function () { var shareUrl = $("link[rel=canonical]").attr("href"); $.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) { shares = data.shares; $(".count").each(function (index, el) { service = $(el).parents(".share-btn").attr("data-service"); count = shares[service]; if (count > 1000) { count = (count / 1000).toFixed(1); if (count > 1000) count = (count / 1000).toFixed(1) + "M"; else count = count + "k"; } $(el).html(count); }); }); }); //]]></script> </b:if> </b:if>
Bước 4: Lưu mẫu và xem kết quả.
Nút share trượt dọc cho Blogspot
P/s :
Nguyễn Viết Tĩnh
