Sâu Ciu Blog
»

» Nút chia sẻ với hiệu ứng đẹp cho Blogger

Nút chia sẻ với hiệu ứng đẹp cho Blogger

Feb 24, 2014 | Đăng: Trịnh Minh Cảnh
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


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%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=90&show_faces=false&font&colorscheme=light&action=like&height=21&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; 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 developers.facebook.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.

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!

Nguồn: KlsZone
Mail Facebook Google twitter
Từ khóa: Nút chia sẻ với hiệu ứng đẹp cho Blogger

Nút chia sẻ với hiệu ứng đẹp cho Blogger

Bài viết Nút chia sẻ với hiệu ứng đẹp cho Blogger
Nút chia sẻ với hiệu ứng đẹp cho Blogger Nút chia sẻ với hiệu ứng đẹp cho Blogger
910 1

Bài viết Nút chia sẻ với hiệu ứng đẹp cho Blogger

0 nhận xét