Tạo nút like, share mạng xã hội đẹp long lanh

Chẳn hẳn những ai đam mê thiết kế blogger hay chỉ gì muốn biết thêm về một kiểu web 2.0 của google này thì điều quan tâm tới những kiểu trình bài blog sinh động. Hôm nay mình sinh chia sẽ lại với các bạn một bài viết cũng khá đơn giản nhưng sẽ giúp cho những bạn chưa hiểu nhiều về blogger sẽ biết cách tạo mút like hay share lên mạng xã hội, google +, Facebook, Tweet.

Tiếp tục bài viết về chèn mạng xã hội dưới phần chi tiết bài viết để khách truy cập vào blog bạn khi khách thích và hài lòng về một bài viết nào đó của bạn có thể chia sẻ bài viết bằng cách Share, Like, G+ hoặc Tweet điều này giúp blog bạn có thêm lượng truy cập và củng có lợi cho SEO rất nhiều.

Ở bài viết này Tuấn Phan hướng dẫn chèn nút  Share, Like, G+, Tweet dưới bài viết cho blogger/blogspot với hiệu ứng CSS3 đẹp mắt cho template của bạn.

Chèn nút Share, Like, G+, Tweet cho blogspot với hiệu ứng đẹp

Với hiệu ứng đóng mở khi chúng ta re chuột vào biểu tượng  Share, Like, G+, Tweet rất đẹp làm cho template blog bạn cá tính hơn.
Cách tiến hành chèn Share, Like, G+, Tweet dưới bài viết:
Bước 1: Đăng nhập vào tài khoản blogger của bạn
Bước 2: Chọn Mẫu
Bước 3: Chỉnh sửa HTML >> Nhấn Ctrl+F tìm đến thẻ ]]></b:skin> thêm đoạn CSS bên dưới trước nó

CSS3 Share, Like, G+, Tweet

/* CSS Slide Share Button */
#button-count-share{float:none;width:100%;overflow:hidden;background:rgba(12, 12, 12, 0.35);text-align:center;margin:15px auto;padding:0;padding-top:7px;padding-bottom:2px;}
#button-count-share span{float:none;position:relative;font-size:13px;color:#fff;margin:12px}
.button-share{background:#f9f9f9;position:relative;display:inline-block;float:none;height:40px;line-height:40px;overflow:hidden;width:140px;margin:0 auto;box-shadow:inset 0 0 5px rgba(0,0,0,0.1);}
.slide-share{z-index:2;display:inline-block;height:40px;line-height:40px;left:0;position:absolute;width:140px;margin:0 auto}
.slide-share p{font-family:&#39;Roboto&#39;;font-weight:700;color:#fff;font-size:15px;left:0;position:absolute;text-align:center;width:100%;margin:0 auto}
.button-share .slide-share{transition:all 0.4s ease-in-out}
.facebook .fb_iframe_widget{display:block;position:absolute;right:15px;top:0;z-index:1}
.twitter iframe{right:10px;top:10px;z-index:1;display:block;position:absolute}
.google #___plusone_0{width:90px!important;top:10px;right:10px;position:absolute;display:block;z-index:1}
.facebook .slide-share{background:#3b5998}
.twitter .slide-share{background:#4099ff}
.google .slide-share{background:#E41B17}
.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share{left:140px;opacity:0.6;}

Sau khi chèn CSS xong chúng ta tìm đến thẻ <div class=’post-footer’> thứ 2 và chèn đoạn Code bên dưới dưới nó

 

Code Share, Like, G+, Tweet cho blogspot

<div id=’button-count-share’>
<div class=’facebook button-share’>
<div class=’slide-share’>
<p>Share</p>
</div>
<a class=’fb-share-button’ name=’fb_share’ rel=’nofollow’ share_url=’&quot;//www.facebook.com/sharer.php?u=&quot; + data:blog.url’ type=’button_count’/>
</div>
<div class=’facebook button-share’>
<div class=’slide-share’>
<p>Like</p>
</div>
<div class=’fb-like’ data-action=’like’ data-layout=’button_count’ data-share=’false’ data-show-faces=’false’/>
</div>
<div class=’google button-share’>
<div class=’slide-share’>
<p>G+</p>
</div>
<div class=’g-plusone’ data-count=’true’ data-size=’medium’ expr:data-href=’data:post.url’ rel=’nofollow’/>
<script type=’text/javascript’>
  window.___gcfg = {lang: &#39;id&#39;};

  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div class=’twitter button-share’>
<div class=’slide-share’>
<p>Tweet</p>
</div>
<a class=’twitter-share-button’ data-count=’horizontal’ data-related=” data-via=” expr:data-text=’data:post.title’ expr:data-url=’data:post.url’ href=’//twitter.com/share’ title=’Share via Twitter’>Tweet</a>
<script async=’async’ src=’//platform.twitter.com/widgets.js’ type=’text/javascript’/>
</div>
<div class=’clear’/>
</div>

Tiếp tục chúng ta tìm đến thẻ </body> chèn đoạn JS bên trên nó

 

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’fb-root’/>
    <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 = &quot;//connect.facebook.net/vi_VN/all.js#xfbml=1&quot;;
        fjs.parentNode.insertBefore(js, fjs);
      }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
</b:if>

Bước 4 : Lưu lại và xem kết quả
Chúc các bạn thành công
Xem thêm: Thiết kế giao diện mobi cho blogger

May đồng phục
Tags: Tạo blog đẹpThiết kế web

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bài viết liên quan:

Dân SEO cần biết: Xu hướng SEO mới nhất hiện nay

Dân SEO cần biết: Xu hướng SEO mới nhất hiện nay

Thiết Kế Website chuẩn di động là gì?

Thiết Kế Website chuẩn di động là gì?

Bản wordpress 4.3.1.0 mới đang bị lỗi không nhận dạng file robots.txt

Bản wordpress 4.3.1.0 mới đang bị lỗi không nhận dạng file robots.txt

Cách xoá comment facebook trong website

Cách xoá comment facebook trong website

Chiến lược marketing là gì

Chiến lược marketing là gì

Đăng tin quảng cáo thủ công

Đăng tin quảng cáo thủ công

Xem thêm nhiều hơn

video

Nguồn nước sinh hoạt của người dân bị nhiễm xăng gây nhiều hậu quả nghiêm trọng

Cho thuê xe ô tô tập lái chất lượng

Cho thuê xe ô tô tập lái chất lượng

Điều tra vụ người dân đốt cỏ gây tai nạn liên hoàn tại Cao tốc TP HCM - Long Thành

Điều tra vụ người dân đốt cỏ gây tai nạn liên hoàn tại Cao tốc TP HCM - Long Thành

Kinh nghiệm đi du lịch Hồng Kông tự túc tiết kiệm nhất

Kinh nghiệm đi du lịch Hồng Kông tự túc tiết kiệm nhất

video

Dịch vụ tư vấn thiết kế và in ấn bao bì mang phong cách chuyên nghiệp

Adobe Lightroom Classic CC 2018 Full Cr@ck | Phần mềm chỉnh sửa ảnh hiệu quả

Adobe Lightroom Classic CC 2018 Full Cr@ck | Phần mềm chỉnh sửa ảnh hiệu quả

Nhận may đồng phục, cơ quan, xí nghiệp, công ty, nhà hàng, khách sạn, spa, thẩm mỹ viện, Mầm non, Cafe giá rẻ nhất, TpHCM, Bình Dương, Long An, Đồng Nai. May theo yêu cầu đơn hàng, nhận gia công Thêu, In, tên, logo công ty lên đồng phục, may đồng phục giá rẻ tại TPHCM, khăn và vật liệu trên vải, may rèm cửa các loại…

Sài Gòn “Ho Chi Minh” Viet Nam">