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

10 Yếu tố không thể thiếu trong thiết kế web chuẩn SEO

10 Yếu tố không thể thiếu trong thiết kế web chuẩn SEO

SEO là việc tối ưu hoá công cụ tìm kiếm giúp thiết kế website của bạn trở nên thân thiện hơn với người dùng và đạt được thứ hạng cao trên công cụ tìm kiếm. Nếu bạn có một website, để SEO thành công một website thì yêu cầu mẫu thiế
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
Thiết Kế Website Cho Nông Dân Bán Sản Phẩm Miễn Phí

Thiết Kế Website Cho Nông Dân Bán Sản Phẩm Miễn Phí

Người nông dân Việt Nam với những kinh nghiệp làm nghề thì không thiếu để tạo ra được sản phẩm vừa đẹp vừa có giá trị về chất lượng và an toàn. Trong xu thế cạnh tranh của ngành nông sản thế giới đặc biết là ngành nông sản của các
Thiết Kế Web Đồ Chơi Trẻ Em Chuyên Nghiệp

Thiết Kế Web Đồ Chơi Trẻ Em Chuyên Nghiệp

Công ty Seo Online chuyên nhận thiết kế web đồ chơi trẻ em chuyên nghiệp, web chuẩn seo, chuẩn di động, đảm bảo chất lượng web tốt nhất.Đồ chơi trẻ em là mặt hàng sản phẩm bán tương đối nhiều trên thị trường hiện nay. Nhiều 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.

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

Giống nhau là loài có túi nhưng loài vật sau đây lại hung hăng, khát máu hơn hẳn Kangaroo

Giống nhau là loài có túi nhưng loài vật sau đây lại hung hăng, khát máu hơn hẳn Kangaroo

Sự đáng sợ của nó đến ngay từ cái tên, loài thú đặc biệt này của Australia được gọi là Quỷ Tasmania (Tasmanian Devil). Chúng là động vật có túi ăn thịt lớn nhất thế giới hiện nay.Những con quỷ Tasmania được đặt tên theo s
Mẹo hay làm đẹp cho bạn gái từ mướp đắng

Mẹo hay làm đẹp cho bạn gái từ mướp đắng

Trong các loại rau quả thiên nhiên thì mướp đắng là được xem là loại dược phẩm cực kì tốt cho làn da , có thể mang lại cho các bạn gái làn da trắng mịn hoàn hảo , có tính an toàn cao, các bạn có thể tham khảo những phươn
In túi giấy đẹp dựa trên những tiêu chí khác nhau của khách hàng

In túi giấy đẹp dựa trên những tiêu chí khác nhau của khách hàng

Những sản phẩm in ấn quảng cáo như túi giấy khi được khách hàng  đặt in và thiết kế sẽ có những mẫu mã đa dạng , phong phú khác nhau tùy theo yêu cầu , tùy theo sản phẩm kinh doanh của họ mà các nhà in có thể thực hiện
Xem mặt con gà mái cũng bị mất mạng

Xem mặt con gà mái cũng bị mất mạng

Tại ấp Tân Hòa, xã Đức Lập Hạ, huyện Đức Hòa, tỉnh Long An Trần Hoài Phong (SN 1995) và Phạm Tấn Linh (SN 1994), hai nhà ở gần nhau khoảng 7h30p sáng 12/4/2013, do Phong bị mất một con gà mái và nghi ngờ con gà đang ở nhà anh P.H.