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.123tailieufree.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ả.
☼ Tùy chỉnh:
· Thay quangmen93 thành ID Twitter của bạn.
· Nếu bạn muốn nó hiện thị trên diện thoại có kịch thước nhỏ hơn 479px thì xóa đoạn CSS nàydisplay: none !important; đi
· Còn các tùy chỉnh khác đã oke các bạn không cần phải chỉnh sửa gì thêm.
☼ Kết luận:
· Sử dụng các đoạn CSS và đoạn Scipts mở (chưa mã hóa - endcode) nên việc tùy biến rất dễ dàng.
· Thủ thuật này thực hiện thêm code trực tiếp trong Template nên các bạn cẩn thận.
· Theo mình dây là Version tuyệt vời nhất cho đến bây giờ và có thể là mãi mãi.
Không có nhận xét nào:
Write nhận xét