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

dich vu quay phim chup hinh
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

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
avatar
  Subscribe  
Notify of

Bài viết liên quan:

Chuyển Wordpress Sang Blogspot, Blogger hosting không giới hạn seo top vivu

Chuyển Wordpress Sang Blogspot, Blogger hosting không giới hạn seo top vivu

Chuyển Wordpress blogs over to Blogger dời sang Blogspot hosting không giới hạn seo top vivu...! Các bạn làm vblog, seoer mới vào nghề và những seoer thật thụ điều không nên bỏ qua một nền tảng blog 2.0 của google đó là Blogger 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
Nhận việt hóa font chữ bất cứ font nào

Nhận việt hóa font chữ bất cứ font nào "Nhanh, Rẻ, Đẹp"

Nhận việt hóa hầu hết các font chữ hiện tại có bán trên thị trường, hoặc bất cứ font free nào mà bạn thích. - Font lẻ: 100k-200k/Font. Mình sẽ đưa ra mức giá tùy thuộc vào font đó có dễ việt hóa hay không khi nhận đc đơn hàng c
Danh sách website đã thực hiện bởi Seo Online

Danh sách website đã thực hiện bởi Seo Online

Danh sách những website dự án đã thực hiện bởi Seo Online, Chúng tôi tự hào luôn hoàn thành công việc của một nhà lập trình website sáng tạo cùng tiến bước với cộng đồng kinh doanh online trong nhưng năm tiếp theo... Công ty Seo

Xem thêm nhiều hơn

Vợ đang mang bầu 5 tháng chồng gặp tai nạn hôn mê nguy kịch

Vợ đang mang bầu 5 tháng chồng gặp tai nạn hôn mê nguy kịch

Em Nguyễn Lương Tuấn Anh (SN 1994, xóm Đồi Cây, xã Yên Lãng, huyện Đại Từ, tỉnh Thái Nguyên) đang rất cần được giúp đỡ từ quý bạn đọc. Theo chia sẻ của anh Nguyễn Ngọc Huy, anh họ Tuấn Anh gặp tai nạn hôn mê nguy kịch, người hiện
Điểm danh những món ăn nổi tiếng không thể chối từ tại Hà Nội

Điểm danh những món ăn nổi tiếng không thể chối từ tại Hà Nội

Hà Nội – trái tim của cả nước, nơi lưu giữ biết bao tinh hoa của dân tộc. Bởi những di tích cổ xưa, những cảnh quan thiên nhiên trữ tình và nền ẩm thực tinh hoa, đặc sắc. Nếu bạn đã từng đi du lịch Hà Nội 1 lần, chắc hẳn bạn sẽ kh
Khám phá những hòn đảo thiên đường

Khám phá những hòn đảo thiên đường "đẹp quên lối về" tại Việt Nam

Việt Nam có hàng nghìn hòn đảo lớn, nhỏ mang trong mình nhiều vẻ đẹp khác nhau, nhiều hòn đảo vẫn giữ cho mình được vẻ đẹp hoang sơ chưa có tác động của con người. Được đắm mình trong không gian quyến rũ mênh mông với tour du lịch
Phương pháp sở hưu làn môi đẹp mộng mơ...

Phương pháp sở hưu làn môi đẹp mộng mơ...

Phun môi giúp bạn có làn môi đẹp như ý - Sở hữu bờ môi thâm đen, chắc hẳn bạn đang rất đau đầu. Phun môi thâm, xỉn màu thành đôi môi hồng tự nhiên giúp bạn gái luôn tự tin. Không những vậy mà chúng c

Nhận may đồng phục, cơ quan, xí nghiệp, công ty, nhà hàng, khách sạn, spa, thẩm mỹ viện, Mầm non, Cafe giá rẻ nhất, TpHCM, Bình Dương, Long An, Đồng Nai. May theo yêu cầu đơn hàng, nhận gia công Thêu, In, tên, logo công ty lên đồng phục, may đồng phục giá rẻ tại TPHCM, khăn và vật liệu trên vải, may rèm cửa các loại…

CHAT 💬 ZALO

CHAT 💬 FACEBOOK