fbpx

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

Thiết Kế Web Chuẩn Seo Trọn Gói Giá Rẻ

Thiết Kế Web Chuẩn Seo Trọn Gói Giá Rẻ

Website là một phần không thể thiếu đối với mỗi danh nghiệp. Đặc biệt là các danh nghiệp vừa mới bắt đầu khời nghiệp. Sở hữu một trang web hoàn hảo đẹp về giao diện thân thiện đó là bước đệm cho sự thành công tiếp cận khách hàng.
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
Cách không cho bài viết hiển thị ra trang chủ blogspot

Cách không cho bài viết hiển thị ra trang chủ blogspot

Thường thì các blogger mới chơi thì đa phần là không biết code blogspot định dạng như thế nào, nhưng trong quá trình vận hành temp thì nhất thì ít hay nhiều thì các bạn cũng muốn những bài viết mình sẽ tuỳ chỉnh, có thể nó sẽ show
Thiết Kế Web Nhà Hàng – Giao Diện Chuẩn

Thiết Kế Web Nhà Hàng – Giao Diện Chuẩn

Bạn đã đầu tư bao nhiêu chi phí khi thiết kế - xây dựng nhà hàng ? Bạn có bao nhiêu phương án kinh doanh để đạt hiệu quả ? Bạn đã có thiết kế web nhà hàng – Giao diện chuẩn chưa ? Hàng trăm triệu đồng thì khó mà đầu tư xây dựng n

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

Bài viết liên quan

Cha mẹ bất lực trước căn bệnh ung thư của đứa con thơ

Cha mẹ bất lực trước căn bệnh ung thư của đứa con thơ

Tai họa cứ liên tiếp ập xuống gia đình anh Nguyễn Văn Hữu Phước (ấp Long Trường 1, xã Long Thanh, huyện Phụng Hiệp, tỉnh Hậu Giang) khi cuối năm 2015, gia đình phát hiện cậu con trai Nguyễn Văn Phước Thiện, khi đó mới 4 tuổi hay k
In hiflex quảng cáo được sử dụng rộng rãi trong mọi lĩnh vực kinh doanh

In hiflex quảng cáo được sử dụng rộng rãi trong mọi lĩnh vực kinh doanh

Đối với các công ty kinh doanh trên nhiều lĩnh vực khác nhau thì sản phẩm in ấn hiflex quảng cáo được xem là công cụ chủ lực của có chất lượng và độ bền cao dùng quảng cáo cho thương hiệu sản phẩm của các doanh nghiệp và
In hộp giấy các loại có cán màng

In hộp giấy các loại có cán màng

Những sản phẩm in hộp giấy được nhiều công ty đặt in và thiết kế với màu sắc rất đẹp và sắc sảo , tuy nhiên để có thể tạo được nhiều ấn tượng cho nhiều khách hàng thì việc cán màng lên hộp giấy để tăng độ bền và chất lượ
Hot girl cởi bỏ nét kín đáo thay vào đó là khiêu gợi

Hot girl cởi bỏ nét kín đáo thay vào đó là khiêu gợi

Phong cách của các hot girl bây giờ càng hở càng tốt, chạy theo mode bay giờ,nhưng cũng làm cho các cô nàng thêm phần cá tính và hấp dẫn hơn Thiết kế cổ V sâu hút thường chính là công cụ giúp Midu rũ tỏ vẻ trong sáng, thuầ
Play All Replay Playlist Replay Track Shuffle Playlist Hide picture