Hôm nay namkna chia sẻ cho các bạn tiện ích nút like/share lên các mạng xã hội cho bài viết của blog. Tiện ích được tạo bởi way2blogging. Tiện ích này có đặc điểm là hiển thị trên đầu bài viết của bạn, trong khi bạn di chuyển xuống dưới để đọc bài viết thanh ngang xã hội này được cố định trên cùng của bài viết. Rất thuận tiện cho độc giả like/ share (thích/chia sẻ) ngay lập tức trên thanh nổi. Widget này đi gồm các nút like của: Twitter, Facebook, Google plus, Pinterest, StumbleUpon và Digg nút.
Xem Demo: Demo for postẢnh minh họa:
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) -> Tiếp tục (Proceed)
4- Chọn Mở rộng tiện ích mẫu (Expand Template Widgets) -> Xem video:
5- Đây tiện ích dựa trên jQuery, và blog của bạn phải có plugin jQuery. nếu blog của bạn đã có một plugin jQuery mới nhất, thì hãy bỏ qua bước 5 này và trực tiếp thực hiện theo từ bước 6.
Nếu chưa có Jquery thì thêm đoạn mã dưới đây trước thẻ đóng </ head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
6- Đoạn code tiếp theo không bao gồm lệnh gọi file Jquery nó chỉ chạy khi ta xem các bài viết do vậy sẽ giảm tải thời gian khi bạn xem các trang không phải bài viết như trang chủ, trang label,...
- Dán code bên dưới vào trước thẻ </head>
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> /*<![CDATA[*/ #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;} #w2bSocialFloat td{padding:4px;margin:0;border:none;} #w2bSocialFloat td iframe{max-width:82px;width:82px !important;} #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);} /*]]>*/ </style> <script type="text/javascript"> /*<![CDATA[*/ // Set the Top Offset $theOffset = 0; jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})}); /*]]>*/ </script> <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script> <script type="text/javascript"> /*<![CDATA[*/ // Twitter (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs"); // Google + (plus) (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Stumbleupon (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Digg (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); /*]]>*/ </script> </b:if>7- Tiếp theo là chọn vị trí đặt button like/share trên bài viết.
- Thêm đoạn code bên dưới vào sau thẻ <data:post.body/> .
<b:if cond='data:blog.pageType == "item"'> <div id="w2bSocialFloat" class="w2bSocialFloat"> <table width="100%" class="w2bSocialFloat"> <tr> <td> <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a> </td> <td> <iframe expr:src=""//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe> </td> <td> <div expr:id=""w2bPinit-" + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> <data:post.body/> <script type="text/javascript"> w2bPinItButton({ url:"<data:post.url/>", thumb: "<data:post.thumbnailUrl/>", id: "<data:post.id/>", defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4m1xY32q560czAxUVCMiL1A7zZEDuWKdM0-qZRWGbi57xv3thr9k8YxZyjaUaZ4u5Gee20u36yUe-alUr7N8HNHTJGz3XiTYUV7MU-hYyy0lr3KbGkXm9QxIgaMWTGLYKcO7XRntlqdE/s1600/w2b-no-thumbnail.jpg", pincount: "horizontal" }); </script> </div> </td> <td> <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div> </td> <td> <su:badge layout="1" expr:location="data:post.url"></su:badge> </td> <td> <a class="DiggThisButton DiggCompact"></a> </td> </tr> </table> </div> </b:if>8- Lưu mẫu lại
Lưu mẫu và kiểm tra các trang bài viết trên blog của bạn, một jQuery làm việc và tuyệt vời với các nút mạng xã hội thanh nằm ngang nổi trên blog của bạn.
Cập nhật:
- Nếu blog của bạn sử dụng auto readmore bạn sẽ tìm thấy 3 thẻ <data:post.body/> . Khi đoa bạn hãy chèn đoạn code bên trên (bước 7) ngay sau đoạn code như bên dưới:<b:if cond='data:blog.pageType == "item"'> <data:post.body/>- Để đổi màu nền của thanh share, bạn hãy thay đổi phần màu đỏ background:#FFFFFF; ở bước 6. Bạn có thể lấy mãu màu Tại đây.
- Để sử dụng lâu dài các bạn hãy tải 2 file javarscrip là: w2b_blogger_pinit.js và jquery.js về (xem cách tải Tại đây) sau đó Uplaod lên host riêng (host Google code Tại đây hoặc Dropbox Tại đây) để sử dụng lâu dài nha.
Hy vọng tiện ích này là hữu ích cho bạn, xin vui lòng để lại ý kiến của bạn, và chia sẻ bài viết.
Theo:way2blogging
Nhận xét
Chào bạn, BLog của bạn rất hữu ích.
Trả lờiXóaMình muốn trao đổi linh blog của mình
www.máy-tính-bảng.com với blog của bạn???
Thanks
@Nguyen van Toan Rất vui lòng. Sau khi bạn gắn link blog mình vào rùi thì Vào đây thông báo cho mình nha/
Trả lờiXóabạn ơi, mình làm mà nó hiện lên
Trả lờiXóaA username and password are being requested by http://bloggerblogwidgets.googlecode.com. The site says: "Google Code Subversion Repository"
Sửa sao đây bạn
Bạn thải file js sau về:
Xóahttps://www.dropbox.com/s/ao21fnb23bfrvhk/w2b_blogger_pinit.js
Uoload lên host riêng.
Sau đó thay vào file bên dưới:
http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js
minh làm giống vậy mà ko hiện ra là sao nhỉ
Trả lờiXóaBạn chú ý bước 7 nha.
Xóathực sự mình làm đi làm lại rất nhiều lần mà ko sao đc, nane quá bạn Nam à? bạn có cách gì giúp trực tiếp đc ko? bạn dùng teamview giúp minh đc thì tốt quá, mình còn muốn mỗi cái thui, những cái khác cần thiết cho blog mình đã làm ok rồi. dù sao cũng cảm ơn blog của bạn, ko có gì để diễn tả, ÔI QUÁ TUYỆT VỜI
Trả lờiXóaBạn có thể gửi template vào mail tavannam01@gmail.com mình sẽ Edit giúp.
Xóachào bạn, bạn cho mình hỏi chút được ko? mình muốn tạo 1 trang popup cho blogspot mà ng dùng phải bấm like mới xem đc nội dung thì làm thế nào hả bạn?? nó giống như trang up.tutviet chấm info/
Trả lờiXóaBạn xem bài viết này nha: Hiện nội dung được ẩn khi like mạng xã hội cho blogspot
XóaTại sao mình làm mà nó không trượt nhỉ? hiện ra thì thấy đẹp mà dính đó chứ k thấy trượt :'(
Trả lờiXóa