fbpx

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

may dong phuc

May Đồng Phục

Gọi:0972.87.1518
Tạo nút like, share mạng xã hội đẹp long lanh
5(100%)5Đánh giá
Tags: Tạo blog đẹpThiết kế web
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

Bài viết liên quan

Cài WordPress trên host miễn phí 000webhost

Cài WordPress trên host miễn phí 000webhost

Người Việt Nam chúng ta một phần vì không có nhiều tiền và một phần vì ( nghèo ) nên việc tìm được một cái gì free là hết muốn bỏ ra, hôm nay mình xin giới thiệu với các bạn một dịch vụ hosting miễn phí 100%, không bị một thế lực
9 Cách xây dựng thương hiệu thông qua thiết kế website giá rẻ Tp HCM

9 Cách xây dựng thương hiệu thông qua thiết kế website giá rẻ Tp HCM

Xây dựng thương hiệu là một quá trình phức tạp được thực hiện trên tất cả các loại phương tiện truyền thông, từ các sản phẩm đóng gói, quảng cáo truyền hình và quảng cáo trên báo in, thiết kế bộ nhận diện thương hiệu. Dĩ nhiên xây
Công ty thiết kế web chuyên nghiệp tphcm

Công ty thiết kế web chuyên nghiệp tphcm

Dịch Vụ Thiết Kế Website: Chuyên Nghiệp, Tận Tình Giúp Đỡ, Tối Ưu Tốc Độ. Tiết Kiệm Chi Phí, Thân Thiện Với Người Dùng, Dễ Dàng Sử Dụng. Dịch vụ thiết kế web chuyên nghiệp là giải pháp cấp thiết cho bất kì doanh nghiệp nào trong
Thiết Kế Web Bán Hàng Chuẩn - Giá Rẻ

Thiết Kế Web Bán Hàng Chuẩn - Giá Rẻ

Thế giới ngày càng phẳng, mọi người đã quen với tiện ích của việc mua hàng online tại nhà. Từ đó, nhu cầu thiết kế web bán hàng cũng là nhu cầu thiết yếu. Để bắt kịp xu hướng internet hóa đang diễn ra, người làm kinh doanh buộc p

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.

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

DEMO

Ở 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ó

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

 

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ó

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

 

<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

Bài viết liên quan

Cách cính số phần tử xuất hiện trong một mảng số

Cách cính số phần tử xuất hiện trong một mảng số

Một tuyệt chiêu giúp anh/em nhà ta tính số phần tử hiện trong một mảng số, các cao thủ nào có ý hay hơn thì góp ý nhá, :D không dám múa tìu qua mắt ....... 1. Tính số phần tử xuất hiện trong một mảng số {=sum(1/Countif(vungso
5 game mobile cực hay về siêu anh hùng trong vũ trụ Marvel

5 game mobile cực hay về siêu anh hùng trong vũ trụ Marvel

Dưới đây chính là 5 game mobile vô cùng hấp dẫn, hứa hẹn sẽ mang đến một làn sóng mới cho thị trường game mobile, nếu chưa có dịp thử qua thì đừng chần chừ mà tải về ngay nhé. 1/Spider-Man Unlimited Spider-Man Unlimi
In ấn phẩm văn phòng đẹp và chuyên nghiệp

In ấn phẩm văn phòng đẹp và chuyên nghiệp

Khi các doanh nghiệp mới thành lập thì việc thiết kế và in ấn phẩm văn phòng rất cần thiết và được xem là có vai trò khá quan trọng góp phần thành công và hiệu quả trong các giao dịch làm ăn với khách hàng và đối tác kinh doanh th
Nhan sắc cô gái xinh đẹp gợi cảm nhất Thái Lan

Nhan sắc cô gái xinh đẹp gợi cảm nhất Thái Lan

Natcha Jansai cô gái xinh đẹp gợi cảm nhất Thái Lan với dung mạo ngây thơ như tuổi 18. Công việc chính của cô là người mẫu game và mẫu sự kiện triển lãm xe tại xứ Chùa Vàng. Hiện tại cô đang sinh sống tại thành phố Mahasarakham –
Play All Replay Playlist Replay Track Shuffle Playlist Hide picture