Nút share đẹp cho blog

Nút share rất hữu ích cho blog của bạn khi nó giúp độc giả có thể chia sẻ bài viết của bạn lên Facebook, Twitter, Google+ hay Linkedl. Từ đó sẽ giúp cho bài viết của bạn được quảng bá rộng hơn và blog của các bạn có thêm một nguồn truy cập từ các mạng xã hội. Hôm nay mình sẽ giới thiệu với các bạn một mẫu của Arlina, nó sẽ nằm ngay dưới mỗi bài viết trên blog của bạn.

#DEMO



#Thêm CSS

  1. Đăng nhập Blogger
  2. Mẫu > Chỉnh sửa HTML
  3. Tìm thẻ ]]></b:skin>
  4. Dán code dưới vào trước (trên) thẻ vừa tìm
  5. /* CSS Share Button */
    .tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
    .tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
    .tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
    .tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi03iym8uVHTyuqY7wcByXcnFsSxdtiQePetrdM_vs14umI-q75chfajmXt_akVmNR5wMxRl_VJaCb2Bnuec-aoBypRw3IdaqQihECru7Z13t2IBN-dkhRBPZtcbEG3Jq4KYqg1oLWYHSrl/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
    .tombol-berbagi-fb-label{color:#2d609b}
    .tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
    .tombol-berbagi-tw{background-position:0 -43px}
    .tombol-berbagi-tw-label{color:#00c3f3}
    .tombol-berbagi-gp{background-position:0 -86px}
    .tombol-berbagi-gp-label{color:#f00}
    .tombol-berbagi-lin{background-position:0 -129px}
    .tombol-berbagi-arlina a{color:#999;transition:all .3s;}
    .tombol-berbagi-arlina a:hover{color:#7cb0ed}
    
    @media only screen and (max-width:640px){
    .tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
    .tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}
    

#Thêm HTML

  1. Cũng tại phần Chỉnh sửa HTML bạn hãy tìm thẻ <data:post.body/> (hoặc thẻ <div class='post-footer'> đối với mẫu mặc định của Blogger) . Cả hai thẻ mà bạn tìm thì đều xuất hiện nhiều lần trong template nhưng thẻ mà cần tìm thường là thẻ dưới cùng.
  2. Dán code dưới vào dưới thẻ mà bạn vừa tìm
  3. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='tombol-berbagi-arlina'>
    <div class='tombol-berbagi-arlina-fb'>
    <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
    </div>
    <div class='tombol-berbagi-arlina-tw'>
    <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
    </div>
    <div class='tombol-berbagi'>
    <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
    </div>
    <div class='tombol-berbagi'>
    <a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
    </div>
    </div>
    </b:if>
    
  4. Lưu mẫu lại và truy cập vào một bài blog bất kì để kiểm tra kết quả.

Comments

  1. không áp dụng được bạn ơi

    ReplyDelete
    Replies
    1. Bạn áp dụng vào blog và để lại URL blog để mình kiểm tra giúp

      Delete

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.