Chuyển đến nội dung chính

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;http://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='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://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

Nhận xét

Popular Posts

Tỷ Lệ Tìm Kiếm Và Cạnh Tranh Của Từ Khóa

Tỷ lệ tìm kiếm của từ khóa – hay còn được gọi với tên đầy đủ là: tỷ lệ tìm kiếm từ khóa trung bình, là tần suất một từ khóa được tìm kiếm chính xác trên một khu vực địa lý hoặc một khu vực ngôn ngữ đã chọn trong một khoảng thời gian nhất định (thông thường là một tháng hoặc một năm). Tỷ lệ này càng cao, càng cho thấy được sự quan tâm của người dùng về chủ đề của từ khóa càng cao.

SEO cho năm 2018: Những điều bạn cần biết để chuẩn bị trang web doanh nghiệp tại việt nam

Tận dụng tiếp thị kỹ thuật số để đạt được các cơ hội kinh doanh mới và cải thiện doanh thu ngày càng phổ biến giữa các doanh nghiệp thuộc mọi chủng loại và quy mô.

Xem thêm: https://trungdan.com

Tuy nhiên, nó không còn đủ để chỉ tạo một trang web, tạo ra nội dung phong phú và hữu ích, và được trên các mạng xã hội. Để luôn được tìm thấy trong các trang kết quả của công cụ tìm kiếm (SERPs), bạn phải liên tục tối ưu hóa trang web của mình.

Hướng dẫn bắt đầu của cách thiết lập pinterest

Chúng tôi đã đề cập đến những điều cơ bản vềPinterest là gì, vì vậy, bây giờ chúng tôi sẽ xem xét kỹ hơn cách thiết lập tài khoản Pinterest của bạn và một số phương pháp hay nhất để theo dõi trong khi bạn đang sử dụng tài khoản. Ngay cả khi bạn chưa bao giờ sử dụng Pinterest trước đây, vào cuối hướng dẫn này, bạn sẽ trở thành một người chuyên nghiệp.

May Đồng Phục , Dịch Vụ Làm Video , Thiết Kế Web Trọn Gói , In Hiflex , Cho Thuê Xe , Cho Thuê Máy Photocopy , Tâm Sự Eva , Swan Việt Nam , Máy Công Cụ Nhật , Quần Áo Đi Chùa , Bán Nhẫn Nam, Nữ , Nhẫn Nam Kiểu Mỹ , Phim Hay Mỗi Ngày , Quản Trị Website ,