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 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 1Thê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 2Thê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 == "item"'>
<div class='buttonsshare'>
<a class='icon-button facebook' 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' target='_blank' title='Share this on Facebook'>
<i class='icon-facebook fa fa-facebook'/>
<span/>
</a>
<a class='icon-button twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<i class='icon-twitter fa fa-twitter'/>
<span/>
</a>
<a class='icon-button google-plus' 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' 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='" http://www.stumbleupon.com/submit?url=" + data:post.url + " & title=" + 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='" http://digg.com/submit?phase=2&url=" + data:post.url + " &title=" + 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + " & media=" + data:post.thumbnailUrl + " & description=" + 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='" http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + " &summary=&source=" ' 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!