Một điều chắc chắn với hầu hết tất cả mọi website đều có nút chia sẻ qua các mạng xã hội thông dụng. Việc thêm vào các nút này giúp website giữ được lượng khách truy cập đáng kể. Do đó việc làm cho khách truy cập chú ý đến nó là vấn đề khá cần thiết đối với mọi quản trị của website, từ vị trí, đến giao diện, v.v.. Hôm nay mình xin chia sẻ với các bạn những nút chia sẽ với hiệu ứng đóng mở khả là ngầu bằng CSS và JS khá bắt mắt đến người dùng.
Nút chia sẻ với hiệu ứng đóng mở cực kì ngầu cho Blogger
Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML
Bước 2: Tìm đến thẻ </head> và thêm đoạn css sau lên trên
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
width: 475px;
overflow: hidden;
margin: 70px auto 0;
}
.button {
float: left;
margin-right: 10px;
width: 110px;
background: #eaeaea;
border: 1px solid #cbcbcb;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: inset 0 1px 0px #fdfdfd;
padding: 15px 5px 5px;
box-sizing: border-box;
}
.button i {
background: #c5c5c5;
color: #eaeaea;
text-align: center;
line-height: 40px;
font-size: 18px;
width: 40px;
height: 40px;
display: block;
margin: 0 auto 10px;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.social-container {
text-align: center;
text-transform: uppercase;
font-size: 12px;
color: #656565;
line-height: 54px;
font-family: Open Sans;
background: #d8d8d8;
width: 100%;
height: 45px;
box-shadow: inset 0 -2px 4px #c7c7c7;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
position: relative;
overflow: hidden;
}
.slide, .button i {
-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;
}
.slide {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
border-radius: 0 0 22px 22px;
-o-border-radius: 0 0 22px 22px;
-ms-border-radius: 0 0 22px 22px;
-moz-border-radius: 0 0 22px 22px;
-webkit-border-radius: 0 0 22px 22px;
/* top fix */
transition: all 0.2s ease-in-out;
position: absolute;
height: 45px;
width: 100%;
top: -35px;
}
.slide::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 10px;
box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #eaeaea;
border: 1px solid #cbcbcb;
box-sizing: border-box;
bottom: 0;
}
.button:hover .slide {
top: 0;
border-radius: 3px;
}
.linkedin .IN-widget, .button iframe, .google #___plusone_0 {
top: -2px;
position: relative;
}
.twitter iframe {
width: 79px !important;
}
.google #___plusone_0 {
width: 60px !important;
}
.button.facebook:hover i, .facebook .slide {
background: #305c99;
color: white;
}
.button.twitter:hover i, .twitter .slide {
background: #00cdff;
color: white;
}
.button.google:hover i, .google .slide {
background: #d24228;
color: white;
}
.button.linkedin:hover i, .linkedin .slide {
background: #007bb6;
color: white;
}
.button.linkedin {
margin-right: 0;
}
.credit {
padding-left: 10px;
font-size: 14px;
color: #172b36;
position: absolute;
bottom: 0;
text-align: center;
font-family: Open Sans;
}
.credit a {
border-bottom: 2px solid #dc4106;
text-decoration: none;
padding: 0 0 2px;
color: #172b36;
}
</style>
Bước 3: Tìm đến thẻ sau
<b:includable id='post' var='post'>
thêm đoạn mã sau ngay trên
<b:includable id='kslshare'>
<b:if cond='data:blog.pageType == "item"'>
<div id="buttons">
<div class="facebook button">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.kslzone.net&width&layout=button_count&action=like&show_faces=true&share=false&height=21&appId=191743990857285" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:21px;" allowTransparency="true"></iframe>
</div>
Facebook
</div>
</div>
<div class="twitter button">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">
Tweet </a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
Twitter
</div>
</div>
<div class="google button">
<i class="icon-google-plus"></i>
<div class="social-container tw">
<div class="slide">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium">
</div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
}
)();
</script>
</div>
Google+
</div>
</div>
<div class="linkedin button">
<i class="icon-linkedin"></i>
<div class="social-container tw">
<div class="slide">
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share"></script>
</div>
LinkedIN
</div>
</div>
</div>
<div style="text-align: right;">
<a href="http://goo.gl/3nMvSh" target="_blank" title="Lấy widget này"><span style="font-size: x-small;">get</span></a></div>
</b:if>
</b:includable>
thay www.kslzone.net thành địa chỉ page facebook của bạn
Bước 4: Tìm đến các thẻ
<data:post.body/>
và thêm đoạn mã này xuống dưới
<b:include name='kslshare'/>
Bước 5: Lưu lại giao diện hiện tại.
0 nhận xét:
Đăng nhận xét