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ách không cho bài viết hiển thị ngoài trang chủ blogger

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

Như các bạn biết thì Blogger đã có tính năng tạo trang tĩnh (static page) để dùng tạo các trang giới thiệu, liên hệ, quy định sử dụng, chính sách riêng tư, diễn đàn, … Một đặc điểm đặc trưng của các trang tĩnh là không hiển th
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
Truyện buồn cười của nghề câu view ảo

Truyện buồn cười của nghề câu view ảo

Truyện buồn cười của nghề câu view ảo kể rằng, một ngày nọ tui đi phá view web người khác bằng link tào lao, gì thế tôi ngày ngày mấm view cho họ, rồi một ngày đẹp trời ông nội google lại làm tôi tá hoả bằng việc cái link tui đi p
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

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ô gái xinh đẹp phải bỏ học để tự kinh doanh kiếm tiền trả nợ cho cha

Cô gái xinh đẹp phải bỏ học để tự kinh doanh kiếm tiền trả nợ cho cha

Thiếu nữ Hàn Quốc có tên Kim Su Kyung không những xinh đẹp mà còn chứng minh cho cả thế giới thấy nghị lực và sự quyết tâm phi thường của mình. [fbvideo link="https://www.facebook.com/Diadiemanuongdulich/videos/1456275247793671/"
Địa điểm và món ăn nổi tiếng khi du lịch Sapa hấp dẫn nhất

Địa điểm và món ăn nổi tiếng khi du lịch Sapa hấp dẫn nhất

Du lịch SaPa với khí hậu mát mẻ quanh năm, là điểm nghỉ mát hấp dẫn dành cho những ai yêu thiên núi rừng và muốn trải nghiệm nét hoang sơ kỳ thú vùng Tây Bắc. Hôm nay tôi sẽ giới thiệu Địa điểm và món ăn nổi tiếng khi du lịch Sapa
Gặp cô Tuyết và nghe cô giải thích việc chặt chân chó đang gây bức xúc.

Gặp cô Tuyết và nghe cô giải thích việc chặt chân chó đang gây bức xúc.

Ngày 20/9, trên một số trang mạng xã hội đồng loạt xuất hiện hình ảnh và clip một phụ nữ tay thì cầm dao, tay thì giữ chặt một con chó nhỏ và chặt một chân chó. Những gì xảy ra trong clip khá dã man khiến ai cũng phải khiếp sợ và
Những mẹo làm đẹp giúp cho bạn gái xinh xắn và duyên dáng hơn

Những mẹo làm đẹp giúp cho bạn gái xinh xắn và duyên dáng hơn

Trong việc chăm sóc sắc  đẹp cho các chị em phụ nữ hiện có rất nhiều các mỹ phẩm dưỡng da và làm đẹp được nhiều chị em phụ nữ  sử dụng rất phổ biến tuy nhiên lại có một số sản phẩm tương đối mắc tiền và có chi
Play All Replay Playlist Replay Track Shuffle Playlist Hide picture