Thủ thuật thủ thuật

thủ thuật

 

Widget Nút Button Like Và Share Cho Blogspot

 0 Comments  2
Chào các bạn,hôm nay blog sẽ hướng dẫn cho các bạn cách tạo
nút button like và nút G+1 cho blogger với hiệu ứng hover
cực đẹp



Đây là một dạng nút button chia sẻ và like được làm bằng hiệu ứng hover đẹp mắt, phù hợp với mọi giao diện blogspot nên chắc hẳn sẽ không làm các bạn thất vọng :D .
Widget này rất đơn giản,chỉ với hai bước là các bạn đã làm xong, hình ảnh trên chỉ mang tính chất mình họa thôi các bạn cứ làm thử là biết ngay.
Các bạn có thể xem demo ở tại đây (nút button share like ở cuối bài viết nhé)
HD:
Đầu tiên các bạn thêm đoạn code sau 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}
}
Sau đó các bạn ấn ctrl+F tìm đoạn <div class='post-footer'> và thêm đoạn code dưới đây vào sau nó hoặc thêm vào chỗ mà các bạn muốn hiển thị:
<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!