Cách làm các nút Like G+ Share cho cuối bài viết và trượt dọc Blog

Thêm những nút Like Facebook, G+, Twitter và chia sẻ link trang web, blog ra mạng xã hội là điều cực kỳ cần thiết. Đặc biệt là khi các bạn muốn nhiều hơn nữa độc giả đọc bài viết hoặc vào Website của mình. Nó có lợi cho việc làm tăng lượt View và rất tốt cho SEO nữa

Bạn muốn tạo các nút Like +1 Share cho bài viết cũng như trang chủ hay các trang trong Blogspot của mình? Sau đây mình sẽ giúp các bạn cách làm các nút Like G+ Share cho cuối bài viết và trượt dọc Blog. Nếu Blog của bạn chưa có hãy thử cách này xem nhé!

Để tạo được nút Like +1 Share cuối bài viết Blospot bạn làm như sau:

Bước 1: Đăng nhập Blogspot ==> Templates(Mẫu) ==> Edit HTML (chỉnh sửa HTML)

==> Khuyến khích các bạn down toàn bộ code về rồi sửa bằng Notepad ++ . Chú ý trước khi sửa sao lấy 1 bản gốc để tránh trường hợp code lỗi ko khôi phục được

Bước 2: Tìm một trong các đoạn code bên dưới:

Đoạn 1: Như blog của mình là đoạn này nhưng chú ý nó có mấy đạn như này bạn thử cho vào cái cuối cùng xem thế nào

<data:post.body/>

Đoạn 2:

<div class='post-footer'>

Đoạn 3:

<div class='post-footer-line post-footer-line-1'>

Đoạn 4:

<div class='post-footer-line post-footer-line-2'>

Đoạn 5:

<div class='post-footer-line post-footer-line-3'>

Rồi thêm đoạn code dưới đây xuống dưới đoạn code trên (chú ý thay lần lượt chứ không phải thay tất nhé. Bạn thay từng cái 1 lưu temp lại và ra load lại trang xem nó hiển thị đúng chưa nếu đúng rồi thì ok đã thành công nhé)

<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:3px solid #bbb;border-bottom:1px solid #bbb;width:100%;height:24px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#666'>
<strong>
LIKE and Share this article:
</strong>
:
</div>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f57432236fb4dee' type='text/javascript'/>
</div>
</b:if>

Các bạn lưu lại ra check lại xem hiển thị ok chưa

Cách thêm Like Facebook, G+, Twitter chia sẻ mạng xã hội trượt dọc Blog

1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript

2. Dán code dưới đây vào tiện ích vừa thêm.

<style>
/* huong dan thuthuat-vui.blogspot.com */
.sharing_box_thuthuat-vui {
position: fixed;
top: 38%;
left: 0;
border: 0px solid #00EE00;
padding: 3px 3px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #F0FFFF;
width: 55px;
min-height: 290px;
}
.sharing_box_thuthuat-vui .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:45px!important;
}
</style>

<div class='sharing_box_thuthuat-vui'>
<div style='text-align:center; margin-top:5px'>
</div>

<div class='item twitter_float' style='margin-left:0px'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
</div>

<div class='item' style='margin-left:0px'>
<div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div>
<div id='fb-root'></div>
</div>

<div class='item' style='margin-left:0px'>

<g:plusone size='tall'></g:plusone>
</div>

<div class='item' style='margin-left:0px'>

<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'></a>
</div>

</div>
</div>


<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<script type='text/javascript'>gapi.plusone.go();</script>


<script type='text/javascript'>
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>

3. Lưu tiện ích và xem kết quả nhé :)

Pig Ella's Diary

Cách làm các nút Like G+ Share cho cuối bài viết và trượt dọc Blog

0 nhận xét:

Đăng nhận xét