Ở những bài trước mình đã giới thiệu một số style sharing box chèn bên dưới bài đăng trong Blogger. Bài này mình sẽ chia sẻ một style nữa mà mình gọi là '3 trong 1' như hình trên. Sau đây là các bước thực hiện thủ thuật:
Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, nhấn Ctrl + F tìm dòng <data:post.body/>.
Bước 2: Chèn đoạn code sau vào bên dưới nó:
<!--Socializer Widget by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>
<style>
#kjsocializer {
width: 500px;
height: 240px;
border: 1px solid #ddd;
-webkit-box-shadow0px 7px 9px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
background: #f1f1f1;
-transition: background 0.50s;
-webkit-transition: background 0.50s;
-moz-transition: background 0.50s;
margin-bottom: 10px;
overflow: hidden;
}
#kjsocializer:hover {
background: #fff;
}
#kjsocializer-title {
text-align: center;
border: 1px solid #2aa4cf;
font-size: 20px;
background: #2aa4cf;
font-weight: 2000;
font-family: oswald;
padding: 5px;
color: #fff;
}
#SocializeIt {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
margin-left: -10px;
margin-top: 10px;
}
.tweet, .like, .plusone, .stumbleit {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
}
.g-plusones {
margin-left: 20px;
}
.heading {
float: left;
padding-right: 20px;
padding-top: 15px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 30px;
font-family: oswald;
}
#followus, #share {
float: left;
border-bottom: 1px solid #eaeaea;
margin-left: -10px;
}
.likeonfb, .followontwitter, .sharing {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 15px;
}
#sw-credits {
float: right;
padding: 3px;
font-size: 10px;
margin-right: 10px;
}
</style>
<script type='text/javascript'>
(function (_0x2162x1, _0x2162x2, _0x2162x3) {
var _0x2162x4 = _0x2162x1['getElementsByTagName'](_0x2162x2)[0];
if (!_0x2162x1['getElementById'](_0x2162x3)) {
_0x2162x1 = _0x2162x1['createElement'](_0x2162x2);
_0x2162x1['id'] = _0x2162x3;
_0x2162x1['src'] = '//platform.twitter.com/widgets.js';
_0x2162x4['parentNode']['insertBefore'](_0x2162x1, _0x2162x4);
};
})(document, 'script', 'twitter-wjs');
</script>
<script type='text/javascript'>
var switchTo5x = false;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
publisher: "
ede9503f - 57ea - 4698 - a245 - 17187b93fa50 ", doNotHash: false,
doNotCopy: false,
hashAddressBar: false
});
</script>
<center>
<div id='kjsocializer'>
<div id='kjsocializer-title'>
Socializer Widget by kjmagic.blogspot.com
</div>
<div id='SocializeIt'>
<font class='heading'>SOCIALIZE IT →</font>
<div class='tweet'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='like'>
<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='plusone'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
</div>
<div id='followus'>
<font class='heading'>FOLLOW US →</font>
<div class='likeonfb'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fmrjan.tk&send=false&layout=button_count&width=77&show_faces=false&font&colorscheme=light&action=like&height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/>
</div>
<div class='followontwitter'>
<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/quocdoantrinh' rel='nofollow'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
<div id='share'>
<font class='heading'>SHARE IT →</font>
<div class='sharing'>
<span class='st_facebook_large' displaytext='Facebook'/>
<span class='st_twitter_large' displaytext='Tweet'/>
<span class='st_googleplus_large' displaytext='Google +'/>
<span class='st_pinterest_large' displaytext='Pinterest'/>
<span class='st_linkedin_large' displaytext='LinkedIn'/>
<span class='st_stumbleupon_large' displaytext='StumbleUpon'/>
<span class='st_email_large' displaytext='Email'/>
<span class='st_sharethis_large' displaytext='ShareThis'/>
</div>
</div>
</div>
</center>
</b:if>
<!--/Socializer Widget by kjmagic.blogspot.com-->
Những chỗ mình đánh dấu
màu xanh là ID Facebook Fanpage và Twitter của bạn.
Chúc các bạn thành công !
Xem thêm thủ thuật: kjmagic.blogspot.com
