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.
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
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXSyl8gWGjBROrLOxj5i4kMcutq7_hI-au8peJAwgmIo5_00RE2dK98LoEqqXbJob_7recSxhbAdVM6IsdDNX7icagaT1DqxrNoRCz7NNwS-OlgvS_PrqdpCUjgmU9JJoYh1iQdZhIeQU/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 == "item"'>
<div class='like-box'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=190& action=like&font=arial&colorscheme=light&share=true"' 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
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXSyl8gWGjBROrLOxj5i4kMcutq7_hI-au8peJAwgmIo5_00RE2dK98LoEqqXbJob_7recSxhbAdVM6IsdDNX7icagaT1DqxrNoRCz7NNwS-OlgvS_PrqdpCUjgmU9JJoYh1iQdZhIeQU/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 3Bạ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 == "item"'>
<div class='like-box'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=190& action=like&font=arial&colorscheme=light&share=true"' 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='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false; ' rel='nofollow' title='Chia sẻ lên Facebook'><i aria-hidden='true' class='fa fa-facebook'/>&nbsp;&nbsp;Facebook</a></li>
<li class='switch3'><a expr:href='" http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url' rel='nofollow' title='Tweet This!'><i aria-hidden='true' class='fa fa-twitter'/>&nbsp;&nbsp;Twitter</a></li>
<li class='switch5'><a expr:href='" https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow' title='Chia sẻ lên Google+'><i aria-hidden='true' class='fa fa-google-plus'/>&nbsp;&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>Chúc bạn cài đặt thành công và hưởng thụ thành quả!
Văn Hải (tổng hợp)
Tham quan du ngoạn từ Nam chí Bắc:
An Giang || Bà Rịa - Vũng Tàu || Bắc Giang || Bắc Kạn || Bạc Liêu || Bắc Ninh || Bến Tre || Bình Dương || Bình Định || Bình Phước || Bình Thuận || Cà Mau || Cao Bằng || Cần Thơ || Đà Nẵng || Đắk Lắk || Đắk Nông || Điện Biên || Đồng Nai || Đồng Tháp || Hà Giang || Hà Nam || Hà Tĩnh || Hải Dương || Hậu Giang || Hòa Bình || Hưng Yên || Khánh Hòa || Kiên Giang || Kon Tum || Lai Châu || Lâm Đồng || Lạng Sơn || Lào Cai || Long An || Về Miền Tây || Nam Định || Nghệ An || Ninh Bình || Ninh Thuận || Phú Thọ || Quảng Bình || Quảng Nam || Quảng Ngãi || Quảng Ninh || Quảng Trị || Sóc Trăng || Sơn La || Về Tây Nguyên || Tây Ninh || Thái Bình || Thái Nguyên || Thanh Hóa || Thừa Thiên Huế || Thành phố Hồ Chí Minh || Thủ Đô Hà Nội || Tiền Giang || Trà Vinh || Tuyên Quang || Vĩnh Long || Vĩnh Phúc || Yên Bái
|| || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || ||
Bộ sưu tập ảnh hot:
Album nghệ thuật Dương Quốc Định Full || Albums Quang Linh || Ảnh chỉ có Việt Nam || Ảnh cưới Collection || Ảnh đẹp Phương Tây || Ảnh đẹp Victoria’s Sceret tổng hợp || Ảnh độc cười ra nước mắt || Ảnh giải trí Châu Á || Ảnh giải trí Hàn Quốc || Ảnh giải trí Nhật Bản || Ảnh giải trí Thái Lan || Ảnh giải trí Trung Quốc || Ảnh nền PC || Ảnh nghệ thuật 3D || Ảnh Nude || Hoa đẹp bốn mùa nên xem || Hoa hậu thế giới Collection || Hoa hậu Việt Nam Collection || Hoa Phong Lan || Thư viện ảnh || Thời sự qua ảnh || Tranh đẹp của họa sĩ nổi tiếng
%20(2).jpg)
0 nhận xét | Viết lời bình