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

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

Biểu tượng status và chat facebook đẹp mê hồn

Biểu tượng status và chat facebook đẹp mê hồn

Bạn muốn sử dụng biểu tượng nào thì bôi đen ký tự bên dưới biểu tưởng rồi copy (ấn CTRL+C) mã đó. Sau đó qua Facebook dán (ấn CTRL+V) vào Status hoặc Chat,..DANH SÁCH BIỂU TƯỢNG FB ĐẦY ĐỦ ĐÂY:Icon biểu tượng Facebook
Thêm ảnh đại diện trước tiêu đề bài viết cho blogspot

Thêm ảnh đại diện trước tiêu đề bài viết cho blogspot

Khi đăng bài hẳn là cũng có rất nhiều bạn muốn mọi người chú ý đến 1 bài viết nào đó trên blog của mình. Có thể là vì lý do muốn người khác đọc nhiều thuận tiện cho việc SEO hoặc quảng cáo bất cứ thứ gì đó của bạn mà bạn muốn mọi
Thiết Kế Web Du Lịch – Phương Pháp Đánh Bật Đối Thủ

Thiết Kế Web Du Lịch – Phương Pháp Đánh Bật Đối Thủ

Công ty Seo Online là công ty chuyên thiết kế web du lịch , chúng tôi có đội ngũ kỹ thuật viên chuyên nghiệp, đem đến cho bạn những giải pháp ứng dụng web du lịch hiệu quả chuẩn seo. Nhằm tăng tính tương tác giữa khách hàng và doa
Chiến lược marketing là gì

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

Mục tiêu mà doanh nghiệp muốn đạt được trên thị trường như là khối lượng sản phẩm, thị phần được gọi là mục tiêu Marketing. Con đường mà doanh nghiệp dự định đi để đến được mục tiêu thì gọi là chiến lược marketing.  Chiến lược

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

Nội dung bình luận

Your email address will not be published. Required fields are marked *

Bài viết liên quan

In Pano quảng cáo ngoài trời chuyên nghiệp

In Pano quảng cáo ngoài trời chuyên nghiệp

Sản phẩm in ấn Pano quảng cáo ngoài trời luôn là sự lựa chọn ưu tiên hàng đầu của các công ty khi có nhu cầu quảng cáo thương hiệu sản phẩm của mình đến với khách hàng và người tiêu dùng do chất lượng của ấn phẩm này rất
Bộ đồ thun bé gái

Bộ đồ thun bé gái

Các bé gái với những vóc dáng xinh xắn, dễ thương rất thích hợp với những bộ đồ thun dành riêng cho các bé gái được may gia công hoàn toàn bằng nguyên liệu vải cotton cao cấp có độ bền và chất lượng cao. Với những thiết
Những công dụng làm đẹp bất ngờ của nước lọc

Những công dụng làm đẹp bất ngờ của nước lọc

Các chị em phụ nữ ngày nay thường tìm đến các loại mỹ phẩm đắt tiền , các loại sản phẩm làm đẹp và chăm sóc da nhưng không ai có thể biết được rằng chỉ với việc thật đơn giản như các bạn cung cấp cho cơ thể đủ lượng nước cần thiết
Nga Wendy đăng ảnh

Nga Wendy đăng ảnh "thả rông" gợi cảm nóng bỏng trên mạng xã hội

Nga Wendy là cái tên đã không còn xa lạ gì với giới trẻ, đặc biệt là với các bạn ở Sài Gòn. Nàng hotgirl này sở hữu gương mặt đẹp cùng phong cách thời trang hiện đại, sang chảnh. Không những thế, Nga Wendy còn được nhiều người ngư