Widget Share tích hợp nút Like và g-plusone hover cực cool

Widget share đã có vài kiểu dáng tương đối đẹp mắt đã chia sẻ tại đây.

Kiểu dáng thì luôn thay đổi cho phù hợp với thị hiếu người dùng và sử dụng, chỉ cần tùy chỉnh chút css là đã có thể có một kiểu dáng hoàn toàn mới cho widget share cùng với icon social hover cực đẹp.

Bài này xin chia sẻ một kiểu widget share tích hợp luôn nút like cùng G+ vào trong button share với hiệu ứng hover cực cool chắc là sẽ làm các bạn hài lòng.

Widget Share tích hợp nút Like và g-plusone hover cực cool

DEMO

Cài đặt Widget Share tích hợp nút Like và g-plusone
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>
Cài đặt widget này vào blogspot thì chỉ cần qua 2 bước.
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
}
.button {
background: #7CCD7C;
position: relative;
display:inline-block;
height: 40px;
margin: 0 7px;
overflow: hidden;
width: 180px;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.icon {
display: block;
float: left;
position: relative;
z-index: 3;
height: 100%;
vertical-align: top;
width: 40px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.icon i {
color: #fff;
line-height: 42px;
}
.slide {
z-index: 2;
display: block;
margin: 0;
height: 100%;
left: 40px;
position: absolute;
width: 180px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
}
.slide p {
font-family: Open Sans;
font-weight: 500;
border-left: 1px solid #fff;
border-left: 1px solid rgba(255,255,255,0.35);
color: #fff;
font-size: 21px;
left: 0;
margin: 0;
position: absolute;
text-align: center;
top: 10px;
width: 100%;
}
.button .slide {
-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;
transition: all 0.2s ease-in-out;
}
.facebook iframe {
display: block;
position: absolute;
right: 16px;
top: 10px;
z-index: 1;
}
.twitter iframe{
width: 90px !important;
right: 5px;
top: 30px;
z-index: 1;
display: block;
position: relative;
}
.twitdtb{font-size:36px;color:#436eee;margin:auto auto}
.google #___plusone_0 {
width: 70px !important;
top: 10px;
right: 15px;
position: absolute;
display: block;
z-index: 1;
}
.facebook:hover .slide {
left: 180px;
}
.twitter:hover .slide {
top: -40px;
}
.google:hover .slide {
left: -180px;
}
.facebook .icon, .facebook .slide {
background: #305c99;
}
.twitter .icon, .twitter .slide {
background: #00cdff;
}
.google .icon, .google .slide {
background: #d24228;
}
@media screen and (max-width:400px){
.facebook iframe{width:100% !important;left:60px !important}
}
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'>
                          <div class='facebook button'>
                            <i class='icon'>
                              <i class='fa fa-facebook'>
                              </i>
                            </i>
                            <div class='slide'>
                              <p>
                                Facebook
                              </p>
                            </div>
                            <iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;share=true&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:21px;'/>
                          </div>
                          <div class='twitter button'>
                            <i class='icon'>
                              <i class='fa fa-twitter'>
                              </i>
                            </i>
                            <div class='slide'>
                              <p>
                                Twitter
                              </p>
                            </div>
                            <a 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='fa fa-twitter-square twitdtb'/>
                            </a>
                          </div>
                          <div class='google button'>
                            <i class='icon'>
                              <i class='fa fa-google-plus'>
                              </i>
                            </i>
                            <div class='slide'>
                              <p>
                                Google+
                              </p>
                            </div>
                            <div class='g-plusone' data-size='medium'>
                            </div>
                            <script type='text/javascript'>
                              (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>
                       <div class='clear'/>
                      </b:if>
Lưu ý
Nếu blogspot vẫn chưa loại bỏ 2 file javascript ở cuối blog thì xóa bỏ phần bôi màu vàng chanh.
Chúc cài đặt thành công!
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji