Thủ thuật blogspot - Dautoblog

Widget share với button 3D hiệu ứng hover cực đẹp cho blogspot

Widget share với button 3D hiệu ứng hover cực đẹp cho blogspot
Chia sẻ-Share bài viết là một phần không thể thiếu trong việc xây dựng trang blogspot. Chia sẻ bài viết còn là một cách kiếm traffic rất hiệu quả. Nhưng chia sẻ ở đâu và làm thế nào để chia sẻ thì không phải ai cũng biết.
Những nơi chúng ta nên chia sẻ đó là những mạng xã hội(social networking). Đây là nơi mà có rất nhiều người truy cập và bài viết của bạn có thể dễ dàng được đoc như facebook,google plus,zing me.... Nơi thứ hai cho phép bạn share link đó là những trang share link như linkedin, linkhay.vn...
Có nơi chia sẻ rồi thì vấn đề là chia sẻ bằng công cụ gì trên blogspot,đó chính là widget share hỗ trợ cho blogspot để bạn có thể share bài viết lên các mạng xã hội.
Bài này sẽ hướng dẫn cài đặt Widget share với button 3D hiệu ứng hover cực đẹp cho blogspot

Xem luôn:

Xem trên blogspot:

DEMO

Hướng dẫn cài đặt Widget share với button 3D vào blogspot
Cài đặt widget này vào blogspot thì chỉ cần qua 2 bước.

Nói chung các thủ thuật trong thời gian này đều sử dụng icons in Font Awesome nên cần có link font icons Awesome nếu chưa có thì thêm vào trước thẻ </head>
<script type='text/javascript'>
      //<![CDATA[
      function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
      loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css");
      //]]>
    </script>
Bước 1
Thêm css sau vào trước thẻ ]]></b:skin>
.buttonsshare {display:block;padding: 14px 7px;
width: 100%;
overflow: hidden;
margin: 30px auto 10px;text-align:center;border-bottom:1px solid #e7e7e7
}
.icon-button {
background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
background-image: linear-gradient(top, #f4f1ee, #fff);
border-radius: 50%;
box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
border-radius: 2.6rem;
cursor: pointer;
display: inline-block;
font-size: 1.0rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 2.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 2.6rem;
height: 2.6rem;
border-radius: 2.6rem;
margin: -1.3rem;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
.stumble span {
background-color: #db5a3c;
}
.digg span {
background-color: #104E8B;
}
.pinterest span {
background-color: #db5a3c;
}
.linkedin span {
background-color: #4099ff;
}
/* Icons */
.icon-button i {
background: none;
color: white;
height: 2.6rem;
left: 0;
line-height: 2.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 2.6rem;
z-index: 10;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {
color: #3B5998;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button .icon-stumble {
color: #db5a3c;
}
.icon-button .icon-digg {
color: #104E8B;
}
.icon-button .icon-pinterest {
color: #db5a3c;
}
.icon-button .icon-linkedin {
color: #4099ff;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .icon-stumble,
.icon-button:hover .icon-digg,
.icon-button:hover .icon-pinterest,
.icon-button:hover .icon-linkedin {
color: white;
}
Bước 2
Thêm đoạn mã HTML sau vào sau thẻ <div class='post-footer'> hoặc nơi bạn muốn.
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
                        <div class='buttonsshare'>
                                        <a class='icon-button facebook' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' target='_blank' title='Share this on Facebook'>
                                          <i class='icon-facebook fa fa-facebook'/>
                                          <span/>
                                        </a>
                                        <a class='icon-button twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet This!'>
                                          <i class='icon-twitter fa fa-twitter'/>
                                          <span/>
                                        </a>
                                        <a class='icon-button google-plus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' target='_blank' title='Share this on Google+'>
                                          <i class='icon-google-plus fa fa-google-plus'/>
                                          <span/>
                                        </a>
                                        <a class='icon-button stumble' expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot; &amp; title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on StumbleUpon'>
                                          <i class='icon-stumble fa fa-stumbleupon'/>
                                          <span/>
                                        </a>
                                        <a class='icon-button digg' expr:href='&quot; http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot; &amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg this!'> 
                                          <i class='icon-digg fa fa-digg'/>
                                          <span/>
                                        </a>
                                        <a class='icon-button pinterest' data-pin-config='beside' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot; &amp; media=&quot; + data:post.thumbnailUrl + &quot; &amp; description=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this on Pinterest'>
                                          <i class='icon-pinterest fa fa-pinterest-p'/>
                                          <span/>
                                        </a>
                                        <a class='icon-button linkedin' expr:href='&quot; http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot; &amp;summary=&amp;source=&quot; ' rel='nofollow' target='_blank' title='Share this on LinkedIn'> 
                                          <i class='icon-linkedin fa fa-linkedin'/>
                                          <span/>
                                        </a>
                                      </div>
                      </b:if>
                      <div class='clear'/>
                      
Lưu ý:
Nếu bạn không thích 3D thì thay:
background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
background-image: linear-gradient(top, #f4f1ee, #fff);
border-radius: 50%;
box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
Thành:
background:Màu gì đó
Chúc cài đặt thành công!
Nhận xét
Facebook
Blogger