nad blog

Hiện nay, mạng xã hội ngày càng phổ biến và việc thêm các share button chia sẻ bài viết cho website là một việc không thể thiếu nên hôm nay mình xin giới thiệu cho các bạn một số trang wen cung cấp dịch vụ này miễn phí, việc làm web của bạn sẽ đơn giản hơn rất nhiều.

1. ShareThis

Share This được các trang web sử dụng rất nhiều, hỗ trợ nhiều nền tảng, kiểu dáng cũng như website, mạng xã hội,...

2. Socialize

Một plugin Wordpress dễ dùng, hỗ trợ nhiều vị trí và bạn có thể đặt ở cuối bài hay dưới thanh tiêu đề để khuyến khích người dùng chia sẻ. Tuy chỉ hỗ trợ 12 mạng xã hội nhưng thế cũng đủ và không có nhiều ưu điểm khác nhưng cũng không đến nỗi.

3. AddThis

Cái thằng này thì khá phổ biến với nhiều ưu điểm, nhưng vì nhiều trang sử dụng nên nhìn cũng chán mắt rồi, mình khuyên các bạn không nên dùng làm gì.

4. Sharexy

Người dùng có thể lựa chọn từ hơn 20 mạng xã hội để chia sẻ, và chia sẻ qua email cũng được bao gồm. Như ShareThis và AddThis, Sharexy có thể được sử dụng trên bất kỳ loại trang web. Một plugin WordPress cũng có sẵn. Với nhiều kích thước và hình dạng cho bạn lựa chọn ( có hình sao nhìn khá dễ thương ). Nói chung là dùng tốt.

5. Digg Digg

Digg Digg là một plugin Wordpress, hỗ trợ các mạng xã hội như: Twitter, Buffer, Facebook (cả hai Chia sẻ và Like), LinkedIn, Google +1, Reddit, Pinterest, và hơn thế nữa. Với những lựa chọn bên trái, phải, trên, dưới, cũng hỗ trợ cả mail, print.

6. GetSocial

GetSocial là một plugin WordPress,cũng có những chức năng cơ bản và hỗ trợ các mạng xã hội phổ biến, có thể được sắp xếp lại theo thứ tự ưa thích bằng cách sử dụng chức năng kéo-và-thả đơn giản.

7. Slick Social

Slick Social là một dạng Panel nên khá gọn trong khi sử dụng nhưng chỉ hỗ trợ nền tảng wordpress, giao diện đẹp, với khả năng tùy chỉnh cao thì nó cũng là một lựa chọn hay.

8. Shareaholic

Shareaholic hỗ trợ hai giao diện chính với nhiều kích thước khác nhau, hỗ trợ nhiều mạng xã hội, website, mail, bookmark, với các kiểu classic, flat, sexy cho bạn lựa chọn. Shareaholic còn có cả Headline trông khá đẹp mắt nhưng load trang khá chậm.

9. AddToAny

Đúng như tên gọi, bạn có thể sử dụng Add To Any ở mọi trang web, giao diện đẹp mắt, nhiều định dạng cho nhiều vị trí cho bạn thoải mái lựa chọn. Ngoài ra, Add To Any còn hỗ trợ các "Like Buttons" của Google+, Facebook, Twitte, Printerest,...Với những ưu điểm trên thì bạn còn chờ gì nữa mà không sử dụng Add To Any.

10. Share 42

Share 42 có giao diện khá đơn giản nhưng không quá xấu, sử dụng được tại mọi trang web vì sử dụng JS nên cũng hơi chậm khi load trang, giao diện có chút khác biệt với các trang trên nhưng chỉ hỗ trợ hai giao diện là "horizontal" và "vertical "sticky"".

11. Simple Sharing Buttons

Với giao diện Flat và sử dụng Font Awesome thì trông nó khá đơn giản vì vậy bạn nên sử dụng trên những vị trí như góc hay dưới tiêu đề bài viết, thanh header hay footer...những nơi không quá nổi bật là những vị trí tuyệt vời. Simple Sharing Button cũng không hỗ trợ nhiều mạng xã hội hay trang web nhưng khi đặt tại những vị trí trên thì điều này cũng không còn quan trọng nữa. Với ưu điểm sử dụng được tại mọi trang web cũng như nền tảng và load nhanh với giao diện đơn giản thì Simple Sharing Button cũng đáng để bạn thử.

Hi vọng bài viết có ích cho các bạn!!!

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 5 )

Trong bài viết ngày hôm nay, mình sẽ tiếp tục hướng dẫn các bạn chỉnh sửa phần main-post, ở phần trước chúng ta đã có được thanh sidebar thông tin bài viết và cách đặt like box vào blog.

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 6 ) - search box
[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 4 ) - main-post

Và hôm nay sẽ thêm bài viết liên quan vào cuối bài viết, để chúng không hiện ra trang chủ làm hỏng bố cục thì các bạn đặt chúng trong thẻ <b:if cond='data:blog.pageType == "item"'>...</b:if>, và dưới đoạn code này:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>

các bạn copy code sau, và đặt vào trong:

<script type='text/javascript'>var ry='<h2>Bài viết liên quan</h2>';rn='<h2>Không có bài viết liên quan</h2>';rcomment='Nhận xét';rdisable='Tắt Nhận xét';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0RlzX2BivZIk3ZOwZxTiyq3FLM-Mj_1amDAbBok1B3-P_RXcOtvyu9h15PKJ4jI1TpVDZm0nzOK0tIfC_XgEYlBWL6-Cppb3EuWJRfeWdxsfjNy0GsKSzkXx8UwqwDtpXYxo24i0aOMMn/';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><h4><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h4></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>

Và đây là code CSS:

#related-posts li{list-style-type:none;float:left;width:33%;text-align:center;}
#related-posts h2{text-align:center;}
#related-posts{margin-top: 100px;}
#related-posts ul{}
#related-posts img{width: 250px; height: 160px;}

Đến đây, các bạn phải sử dụng mẹo mà mình đã giới thiệu ở phần 2 rồi, ai quên thì xem lại nha, chèn code này trước thẻ </body> để thay đổi kích thước ảnh thumbnail:

<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size);
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
}
}
changeThumbSize("related-posts",250);
</script>

Trong mấy code trên các bạn chú ý số 6 là số bài viết.
Tiếp tục nào, các bạn thêm code sau ngay dưới cái script của thằng related-posts:

<div class='mbt-pager'>
<ul>

<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'> <span>Bạn đang xem bài viết mới nhất</span></a>
</b:if>
</li>

<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Cũ hơn</strong> <span>Bạn đăng xem bài viết cũ nhất</span></a>
</b:if>
</li>
</ul>
</div>

<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span><br>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span><br>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>

Và CSS:

.mbt-pager ul {list-style-type:none;height:100px;}
.mbt-pager {margin-top: 100px;}
.next {float: right; width: 50%; text-align:center;}
.previous {float: left; width: 50%;text-align:center;}a

Các bạn chèn thêm code sau vào trước thẻ </head>: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Các bạn lưu lại và xem thử kết quả.

Phần cuối mình muốn nói về cái share buttons, cái này thì đơn giản thôi, bạn có thể dùng ngay code của blog, nhưng hơi xấu bù lại load nhanh, nhưng các bạn co thể thêm css để cho nó đẹp hơn, share buttons của blog mình là chỉnh sửa từ nó đấy, cách làm thì bạn chép đoạn code này bỏ vào:

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>

Hoặc các bạn có thể sử dụng những js có sẵn được cung cấp sẵn từ một số trang web, tuy đẹp nhưng hay gặp ở những trang khác và load chậm hơn, dưới đây là một số trang web như vậy, giống với Like buttons, các bạn vào chọn kiểu, chọn icon hiện bên ngoài và get code thôi.

[TUT+] Sharing button

Mình xin phép dừng ở đây, hi vọng bài viết có ích cho các bạn.

27 tháng 7, 2014

[TUT+] Sharing Button

1. ShareThis

2. Socialize

3. AddThis

4. Sharexy

5. Digg Digg

6. GetSocial

7. Slick Social

8. Shareaholic

9. AddToAny

10. Share 42

11. Simple Sharing Buttons

29 tháng 6, 2014

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 5 ) - main-post

27 tháng 7, 2014

[TUT+] Sharing Button

1. ShareThis

2. Socialize

3. AddThis

4. Sharexy

5. Digg Digg

6. GetSocial

7. Slick Social

8. Shareaholic

9. AddToAny

10. Share 42

11. Simple Sharing Buttons

29 tháng 6, 2014

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 5 ) - main-post

Subscribe