Widget Like Share hiệu ứng đẹp cho blogspot

Wedget Like Share hiệu ứng đẹp cho blogspot
Internet phát triển và len lỏi vào mọi ngóc ngách của đời sống xã hội,cùng với nó là các trang mạng xã hội cũng phát triển rầm rộ và chiếm số lượng lớn người sử dụng internet trên toàn cầu. Các webmaster cũng không bỏ lỡ cơ hội tận dụng các trang mạng xã hội quan trọng để quảng bá cho các trang blog/web của mình bằng cách tích hợp các nút chia sẻ bài viết như: Like, G+1, Tweet lên blog sao cho đẹp mắt và nằm ở vị trí dễ nhìn thấy nhất để người khác có thể nhấp vào.

Mỗi mạng xã hội hiện nay đều có một thư viện API và các nút chia sẻ bằng Javascript để các webmaster có thể tận dụng nó, cách chèn thì cũng không có gì là khó với chỉ 2 thao tác “copy & paste”. Thế nhưng nếu chúng ta muốn nó hiển thị đẹp mắt, gọn gàng với hiệu ứng sinh động dễ làm người truy cập chú ý thì ta cũng cần mất công một chút.

Dưới đây sẽ chia sẻ cách cài đặt hệ thống nút Like Share hiệu ứng đẹp cho blogspot.

Wedget Like Share hiệu ứng đẹp cho blogspot

Cài đặt Widget Like Share hiệu ứng đẹp cho blogspot

Để cài đặt tiện ích này bạn cần vào chỉnh sửa mẫu, à mà nhớ lưu mẫu trước khi cài đặt để đề phòng sai sót.
MẪU 1

DEMO

Bước 1
Thêm link font-awesome cho blogspot bằng cách bạn dán trước thẻ </head> đoạn code sau:
<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>
Nếu blog của bạn đang sử dụng Font Awesome icon thì bỏ qua bước này.
Bước 2
Bạn tiếp tục dán đoạn css sau vào trước thẻ ]]></b:skin>
.like-box{display:block;overflow:hidden;background: url(https://2.bp.blogspot.com/-h45SJ9JpV_0/V5CoAoxN0FI/AAAAAAAABb0/PxxEQdwvLZ0Lb2iLmOE-0Uy9cqReefffQCLcB/s1600/like.png) no-repeat 0px 0px;padding:60px 0 0px;margin:40px 0 0}
.sharede,.sharesimp{position:relative;}
.sharesimp{margin:0 auto 0 auto;border-bottom:1px solid #dadada}
.sharesimp a.fb,.sharesimp a.gp,.sharesimp a.tw{position:relative;display:inline-block;margin:0 0 5px 0;color:#fff;text-shadow:none;padding:5px 0;width:32%;font-size:16px;font-weight:700;overflow:hidden;transition:all .3s}
.sharesimp a.gp {background:#f20000;}
.sharesimp a.fb {background:#516ca4;}
.sharesimp a.tw {background:#00baff;}
.fbtea,.gotea,.plustea,.twtea{font-size:20px;vertical-align:middle;position:absolute;left:5px;top:5px;color:rgba(255,255,255,.5);transition:all .3s}
.sharesimp a:hover .fbtea,.sharesimp a:hover .gotea,.sharesimp a:hover .plustea,.sharesimp a:hover .twtea{color:rgba(255,255,255,.3);transform:scale(1.3) rotate(-20deg)}
.sharesimp a.fb:hover,.sharesimp a.gp:hover,.sharesimp a.tw:hover{color:#fff;background:#34495e;}
.sharesimp a.fb:active,.sharesimp a.gp:active,.sharesimp a.tw:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
.bottomshare{display:block;padding:0 20px;margin:auto;text-align:center}
Bạn có thể thay link ảnh và điều chỉnh font chữ cho phù hợp.
Bước 3
Bạn tiếp tục dán đoạn code bên dưới vào sau thẻ <div class='post-footer'>
<!-- Like Share Starrt -->
                      <b:if cond='data:blog.pageType == &quot;item&quot;'>
                        <div class='like-box'>
                          <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=190&amp; action=like&amp;font=arial&amp;colorscheme=light&amp;share=true&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:190px; height:21px;'/>
                        </div>
                       <!-- Share -->  
                      <span class='bottomshare'>
                    <script type='text/javascript'>
                      //<![CDATA[
                    var siteurl=window.location.href;document.write('<div class="sharesimp"><div class="sharede"> <a class="gp social-popup" href="https://plus.google.com/share?url='+siteurl+'" target="_blank" title="Share to Google+">    <i class="fa fa-google-plus gotea fa-lg"></i> Google</a> <a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u='+siteurl+'" target="_blank" title="Share to Facebook">    <i class="fa fa-facebook fbtea fa-lg"></i> Facebook</a> <a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+"&url="+siteurl+'" target="_blank" title="Share to Twitter">    <i class="fa fa-twitter twtea fa-lg"></i> Twitter</a> </div><div class="clear"></div></div> ');
                      //]]>
                    </script>
                      </span> 
                      </b:if>
                      <div class='clear'/>
                      <!-- Like Share End -->

MẪU 2

DEMO

Bước 1
Bạn dán trước thẻ </head> đoạn code sau:
<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.2.0/css/font-awesome.css");
//]]>
</script>
Nếu blog của bạn đang sử dụng Font Awesome icon thì bỏ qua bước này.
Bước 2
Bạn tiếp tục dán đoạn css sau vào trước thẻ ]]></b:skin>
.like-box{display:block;overflow:hidden;background: url(https://2.bp.blogspot.com/-h45SJ9JpV_0/V5CoAoxN0FI/AAAAAAAABb0/PxxEQdwvLZ0Lb2iLmOE-0Uy9cqReefffQCLcB/s1600/like.png) no-repeat 0px 0px;padding:60px 0 0px;margin:40px 0 0}
ul.switchBox{width:100%;list-style:none;zoom:1}
ul.switchBox:after{content:"";display:block;clear:both}
ul.switchBox li,ul.switchBox li a{display:block;font:100%/1 "lucida grande",Sans-Serif;text-align:center;font-weight:bold; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; transition:all 0.3s ease 0;-moz-transition-property:all;-webkit-transition-property:all;-o-transition-property:all;-ms-transition-property:all;-moz-transition-duration:0.3s;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s}
ul.switchBox li{float:left;width:31.5%;margin-right:2%}
ul.switchBox li a{padding:12px 0;color:white;text-decoration:none;text-shadow:0 -1px 0 rgba(0,0,0,0.5); box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-o-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-ms-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset}
ul.switchBox li:hover a{ box-shadow:0 2px 5px rgba(0,0,0,0.1) inset;-moz-box-shadow:0 2px 5px rgba(0,0,0,0.1) inset;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.1) inset;-o-box-shadow:0 2px 5px rgba(0,0,0,0.1) inset;-ms-box-shadow:0 2px 5px rgba(0,0,0,0.1) inset}
ul.switchBox li.switch2 a{border:1px #159 solid; background:linear-gradient(top,#73afd8 0%,#397bb8 100%);background:-o-linear-gradient(top,#73afd8 0%,#397bb8 100%);background:-moz-linear-gradient(top,#73afd8 0%,#397bb8 100%);background:-webkit-linear-gradient(top,#73afd8 0%,#397bb8 100%);background:-ms-linear-gradient(top,#73afd8 0%,#397bb8 100%)}
ul.switchBox li.switch2:hover a{ background:linear-gradient(top,#5195c9 0%,#4487c0 100%);background:-o-linear-gradient(top,#5195c9 0%,#4487c0 100%);background:-moz-linear-gradient(top,#5195c9 0%,#4487c0 100%);background:-webkit-linear-gradient(top,#5195c9 0%,#4487c0 100%);background:-ms-linear-gradient(top,#5195c9 0%,#4487c0 100%)}
ul.switchBox li.switch3 a{border:1px #583 solid; background:linear-gradient(top,#9dc983 0%,#65a049 100%);background:-o-linear-gradient(top,#9dc983 0%,#65a049 100%);background:-moz-linear-gradient(top,#9dc983 0%,#65a049 100%);background:-webkit-linear-gradient(top,#9dc983 0%,#65a049 100%);background:-ms-linear-gradient(top,#9dc983 0%,#65a049 100%)}
ul.switchBox li.switch3:hover a{ background:linear-gradient(top,#80b663 0%,#71aa55 100%);background:-o-linear-gradient(top,#80b663 0%,#71aa55 100%);background:-moz-linear-gradient(top,#80b663 0%,#71aa55 100%);background:-webkit-linear-gradient(top,#80b663 0%,#71aa55 100%);background:-ms-linear-gradient(top,#80b663 0%,#71aa55 100%)}
ul.switchBox li.switch5 a{border:1px #933 solid; background:linear-gradient(top,#d87373 0%,#b83939 100%);background:-o-linear-gradient(top,#d87373 0%,#b83939 100%);background:-moz-linear-gradient(top,#d87373 0%,#b83939 100%);background:-webkit-linear-gradient(top,#d87373 0%,#b83939 100%);background:-ms-linear-gradient(top,#d87373 0%,#b83939 100%)}
ul.switchBox li.switch5:hover a{ background:linear-gradient(top,#c95151 0%,#c04444 100%);background:-o-linear-gradient(top,#c95151 0%,#c04444 100%);background:-moz-linear-gradient(top,#c95151 0%,#c04444 100%);background:-webkit-linear-gradient(top,#c95151 0%,#c04444 100%);background:-ms-linear-gradient(top,#c95151 0%,#c04444 100%)}
#switchBox1 li{margin-top:-5px;padding-bottom:5px; box-shadow:0 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 5px 3px rgba(0,0,0,0.2);-o-box-shadow:0 5px 3px rgba(0,0,0,0.2);-ms-box-shadow:0 5px 3px rgba(0,0,0,0.2)}
#switchBox1 li.switch2{background:rgba(17,85,153,1)}
#switchBox1 li.switch3{background:rgba(68,119,34,1)}
#switchBox1 li.switch5{background:rgba(136,51,51,1)}
#switchBox1 li:last-child{margin-right:0%}
#switchBox1 li:hover{margin-top:-2px;padding-bottom:2px; box-shadow:0 1px 2px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);-o-box-shadow:0 1px 2px rgba(0,0,0,0.2);-ms-box-shadow:0 1px 2px rgba(0,0,0,0.2)}
Bước 3
Bạn tiếp tục dán đoạn code bên dưới vào sau thẻ <div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
                       <div class='like-box'>
                          <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=190&amp; action=like&amp;font=arial&amp;colorscheme=light&amp;share=true&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:190px; height:21px;'/>
                        </div>
                       <ul class='switchBox' id='switchBox1'>
<li class='switch2'><a 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' title='Chia sẻ lên Facebook'><i aria-hidden='true' class='fa fa-facebook'/>&amp;nbsp;&amp;nbsp;Facebook</a></li>
<li class='switch3'><a expr:href='&quot;   http://twitter.com/home?status=&quot;   + data:post.title + &quot;   -- &quot;   + data:post.url' rel='nofollow' title='Tweet This!'><i aria-hidden='true' class='fa fa-twitter'/>&amp;nbsp;&amp;nbsp;Twitter</a></li>
<li class='switch5'><a 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' title='Chia sẻ lên Google+'><i aria-hidden='true' class='fa fa-google-plus'/>&amp;nbsp;&amp;nbsp;Google+</a></li>
</ul>
                     <div class='clear'/>
                    </b:if>

Lưu ý
Cả 2 code trên là dùng cho blogspot không sử dụng comments của facebook hoặc có sử dụng comments không quản lý.
Đối với blogspot có sử dụng comments có quản lý của FB(có tk APP) thì đoạn iframe cho nút like và chia sẻ thay bằng mã HTML sau cho nó nhẹ nhàng tình cảm.
<div class="fb-like" expr:href='data:post.canonicalUrl' data-layout="standard" data-action="like" data-size="small" data-show-faces="false" data-share="true" ></div>
MẪU 3
Ở đây chỉ có nút chia sẻ lên các mạng xã hội không có nút like.
Widget Like Share hiệu ứng đẹp cho blogspot

DEMO

Bước 1
Dán đoạn css sau vào trước thẻ ]]></b:skin>
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{border-bottom: 6px double;color:#55acee;}
.sharepost li .facebook{border-bottom: 6px double;
    color: #3b5998;}
.sharepost li .gplus{border-bottom: 6px double;color:#dd4b39;}
.sharepost li .pinterest{border-bottom: 6px double;color:#cc2127;}
.sharepost li .linkedin{border-bottom: 6px double;color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
Bước 2
Bạn tiếp tục dán đoạn code bên dưới vào sau thẻ <div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
                                      <div class='sharepost'>
                                        <ul>
<li><a class='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='fa fa-twitter'/>Tweet</a></li>
<li><a class='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='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' 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='fa fa-google-plus'/>Share</a></li>
<li><a class='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='fa fa-linkedin'/>Share</a></li>
<li><a class='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='fa fa-pinterest-p'/>Share</a></li>
</ul>
                                      </div>
                                     <div class='clear'/>
                                    </b:if>
Chúc bạn cài đặt thành công và hưởng thụ thành quả!
Nhận xét

Không có nhận xét nào :