Nút chia sẻ với hiệu ứng đóng mở cực ngầu cho Blogger

Một điều chắc chắn với hầu hết tất cả mọi website đều có nút chia sẻ qua các mạng xã hội thông dụng. Việc thêm vào các nút này giúp website giữ được lượng khách truy cập đáng kể. Do đó việc làm cho khách truy cập chú ý đến nó là vấn đề khá cần thiết đối với mọi quản trị của website, từ vị trí, đến giao diện, v.v.. Hôm nay mình xin chia sẻ với các bạn những nút chia sẽ với hiệu ứng đóng mở khả là ngầu bằng CSS và JS khá bắt mắt đến người dùng.

Nút chia sẻ với hiệu ứng đóng mở cực ngầu cho Blogger

Nút chia sẻ với hiệu ứng đóng mở cực kì ngầu cho Blogger

Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

Nút chia sẻ với hiệu ứng đóng mở cực ngầu cho Blogger

Bước 2: Tìm đến thẻ </head> và thêm đoạn css sau lên trên

Nút chia sẻ với hiệu ứng đóng mở cực ngầu cho Blogger

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
    width: 475px;
    overflow: hidden;
    margin: 70px auto 0;
}

.button {
    float: left;
    margin-right: 10px;
    width: 110px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: inset 0 1px 0px #fdfdfd;
    padding: 15px 5px 5px;
    box-sizing: border-box;
}

.button i {
    background: #c5c5c5;
    color: #eaeaea;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto 10px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.social-container {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: #656565;
    line-height: 54px;
    font-family: Open Sans;
    background: #d8d8d8;
    width: 100%;
    height: 45px;
    box-shadow: inset 0 -2px 4px #c7c7c7;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.slide, .button i {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.slide {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 22px 22px;
    -o-border-radius: 0 0 22px 22px;
    -ms-border-radius: 0 0 22px 22px;
    -moz-border-radius: 0 0 22px 22px;
    -webkit-border-radius: 0 0 22px 22px;
 /* top fix */
    transition: all 0.2s ease-in-out;
    position: absolute;
    height: 45px;
    width: 100%;
    top: -35px;
}

.slide::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    box-sizing: border-box;
    bottom: 0;
}

.button:hover .slide {
    top: 0;
    border-radius: 3px;
}

.linkedin .IN-widget, .button iframe, .google #___plusone_0 {
    top: -2px;
    position: relative;
}

.twitter iframe {
    width: 79px !important;
}

.google #___plusone_0 {
    width: 60px !important;
}

.button.facebook:hover i, .facebook .slide {
    background: #305c99;
    color: white;
}

.button.twitter:hover i, .twitter .slide {
    background: #00cdff;
    color: white;
}

.button.google:hover i, .google .slide {
    background: #d24228;
    color: white;
}

.button.linkedin:hover i, .linkedin .slide {
    background: #007bb6;
    color: white;
}

.button.linkedin {
    margin-right: 0;
}

.credit {
    padding-left: 10px;
    font-size: 14px;
    color: #172b36;
    position: absolute;
    bottom: 0;
    text-align: center;
    font-family: Open Sans;
}

.credit a {
    border-bottom: 2px solid #dc4106;
    text-decoration: none;
    padding: 0 0 2px;
    color: #172b36;
}
</style>
Bước 3: Tìm đến thẻ sau

Nút chia sẻ với hiệu ứng đóng mở cực ngầu cho Blogger

<b:includable id='post' var='post'>
thêm đoạn mã sau ngay trên
<b:includable id='kslshare'>
<b:if cond='data:blog.pageType == "item"'>
<div id="buttons">
<div class="facebook button">
 <i class="icon-facebook"></i>
 <div class="social-container fb">
  <div class="slide">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fkslzone.blogspot.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=21&amp;appId=191743990857285" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:21px;" allowTransparency="true"></iframe>
  </div>
   Facebook
 </div>
</div>
<div class="twitter button">
 <i class="icon-twitter"></i>
 <div class="social-container tw">
  <div class="slide">
   <a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">
   Tweet </a>
   <script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
  </script>
  </div>
   Twitter
 </div>
</div>
<div class="google button">
 <i class="icon-google-plus"></i>
 <div class="social-container tw">
  <div class="slide">
   <!-- Place this tag where you want the +1 button to render. -->
   <div class="g-plusone" data-size="medium">
   </div>
   <!-- Place this tag after the last +1 button tag. -->
   <script type="text/javascript">
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
  </script>
  </div>
   Google+
 </div>
</div>
<div class="linkedin button">
 <i class="icon-linkedin"></i>
 <div class="social-container tw">
  <div class="slide">
   <script src="//platform.linkedin.com/in.js" type="text/javascript">
 lang: en_US
   </script>
   <script type="IN/Share"></script>
  </div>
   LinkedIN
 </div>
</div>
</div>
<div style="text-align: right;">
<a href="http://goo.gl/3nMvSh" target="_blank" title="Lấy widget này"><span style="font-size: x-small;">get</span></a></div>
</b:if>
</b:includable>
thay kslzone.blogspot.com thành địa chỉ page facebook của bạn

Bước 4: Tìm đến các thẻ
<data:post.body/>
và thêm đoạn mã này xuống dưới
<b:include name='kslshare'/>
Bước 5: Lưu lại giao diện hiện tại.

Nếu bạn chưa biết thẻ các thẻ includes là gì và sử dụng ra sao bạn có thể tham khảo tại bài viết
Như vậy là bạn đã chèn xong các nút chia sẻ thật là ngầu dưới chân bài viết của bạn, mong rằng nó giúp cho website có thêm thật nhiều khách truy cập!

5 bình luận

  1. avatar says

    lúc 18:49 9 tháng 2, 2014

    làm cái demo đi bác :)

  2. avatar says

    lúc 19:14 9 tháng 2, 2014

    Demo đây bạn nhé, temlate chuẩn bị share :)

    http://kslgreytech.blogspot.com/

  3. avatar says

    lúc 16:36 5 tháng 5, 2014

    Hình như nó bắt phải comfirm like bạn ơi

  4. avatar says

    lúc 18:27 5 tháng 5, 2014

    Cám ơn bạn nhé mình fix lại rồi, bạn xem thử demo ở đây nhé!

    Demo

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.