Hướng dẫn thêm nút Like, share, google+ và tweet vào dưới bài viết Blogspot

Hướng dẫn thêm nút Like, share, google+ và tweet vào dưới bài viết Blogspot

Để bài viết và blog được mọi người biết đến nhiều hơn ta cần cho thêm 1 số tiện ích giúp mọi người dễ dàng chia sẻ và tương tác hơn. Và sau đây mình sẽ hướng dẫn các bạn thêm nút Like, Share, Google + Tweet vào cuối bài viết của Blog.

Bước 1. Đầu tiên vào trang blog của mình, sau đó nhấn tổ hợp phím f12, sau đó các bạn vào phần mũi tên 1 nhấn chuột vào. di chuyển chuột tới vị trí muốn đặt nút like, share,.. ở vị trí 2, sau đó ta sẽ thấy phần có nền bị bôi đen 3, các bạn copy để chọn vị trí dán. Chú ý: để ý dưới phần bôi đen trong khung màu xanh để tìm kiếm đúng vị trí muốn đặt nút like, share,..

Bước 2.Vào blogger.com, nhập địa chỉ email và pass của bạn, vào trang blog của bạn và chọn 

Mẫu -> Chỉnh sửa HTML.

Bước 3. Nhấn tổ hợp phím ctrl + f để tìm kiếm, dán phần bạn vừa copy ở phần 1 vào  : <div class='blog-pager' id='blog-pager'> và chú ý cả phần dưới trong ô vuông màu xanh ở bước 1 để tìm cho đúng. Khi đã chọn đúng ta dán đoạn code trên đoạn  <div class='blog-pager' id='blog-pager'> . Cuối cùng ấn Lưu mẫu.

<!-- Scripts Start -->

<b:if cond='data:post.isFirstPost'>

<!-- Twitter -->

<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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>

</b:if>

<!-- Twitter -->

<div style='float:left;'>

<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>

</div>

<!-- Google +1 -->

<div style='float:left;'>

<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>

</div>

<!-- Li+chia sẻ facebook -->

<div class='fb-like' data-action='like' data-href='' data-layout='button_count' data-share='true' data-show-faces='false' data-width='520'/>

Chúc các bạn thành công!

Nguồn: hayyho.blogspot.com