Lâu rồi do bận quá không đăng bài được, hôm nay tìm được một thanh theo dõi mạng xã hội khá đẹp từ tác giả của All Blogger Tricks và đem về đây chia sẻ với các bạn. Trên thanh công cụ này gồm có 2 mạng xã hội phổ biến là Facebook, Twitter, kèm theo khung đăng ký theo dõi từ Feedburner. Với phong cách Flat UI Design thì bạn chắc cũng biết rồi, giao diện rất đơn giản chỉ gồm màu sắc rất tinh tế và đẹp. Tại bài viết này mình sẽ chia sẻ với bạn chèn thanh mạng xã hội này xuống cuối mỗi bài đăng trên blog của bạn.
Thanh theo dõi qua mạng xã hội flat ui cực đẹp
Chuyện của muôn thuở với Blogger, tìm đến Mẫu → Chỉnh sửa HTML. Tại đây bạn tìm đến thẻ
<div class='post-footer'>
và chèn đoạn mã này xuống dưới (thông thường sẽ có 2 thẻ như vậy)
<section class="newsletter">
<h2>
Tired of checking for new posts ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/KslZone" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjaYek1klqa8DHTzBq6jm5fV9vm7or6lRjNq2dJJJbCRd_kAODxuqM6MMMDd_5aUnxKv5ULs2DoPOgPnVhH_6HWMybnGMPgvkA8RmXY6gIkgrfdrFw2dYIgw4qnFvORz6l0n4FzRAbBb9b/s1600/nl-facebook@2x.png" />
</a>
<iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FKslZone&width=90&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&send=false&appId=519648428126767&locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
</iframe>
</div>
<div class="social twitter">
<a href="https://twitter.com/KslZone" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgADwU628WOk2c39CHV8r8qwCNomrO1ZxfbjpTRi3Bad26PSTZl1hpa_08UVkyUQ3uzKUX3nvD_IM9qnSLckONqoy8YjYdc3mM27s9tImdnTId5_9ywVQTFPIreFi8apsumDeR2bBQnjDe-/s1600/nl-twitter@2x.png" />
</a>
<iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&id=twitter-widget-0&lang=en&screen_name=KslZone&show_count=false&show_screen_name=false&size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
</iframe>
<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>
<div class="newsletter-form">
<fieldset>
<h2>
Đăng ký nhận email khi có bài viết mới.
</h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=KslZone', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Nhập email của bạn vào đây.." />
<input name="uri" type="hidden" value="KslZone" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Đăng ký" />
</form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:" ";display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
$(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>
thay toàn bộ
KslZone cho đúng với địa chỉ Facebook, Twitter, và Feedburner của bạn rồi lưu lại.
Lời kết
Chỉ đơn giản như vậy, bạn đã thêm vào thành công cho mình một thanh theo dõi qua mạng xã hội cực đẹp và tinh tế. Mọi thắc mắc hoặc góp ý bạn có thể để lại nhận xét phía dưới mình sẽ tiếp nhận và hỗ trợ ngay khi nhận được.
dongtam
ReplyDeletegame mu
http://nhatroso.net/
http://nhatroso.com/
nhạc sàn
tư vấn luật
dịch vụ thành lập công ty trọn gói
công ty luật
tổng đài tư vấn pháp luật
thành lập công ty
http://we-cooking.com/
chém gió
trung tâm ngoại ngữkhông gian tất cả đối với bọn họ mà nói đều là cực kỳ xa lạ, hơn nữa Viễn Cổ chiến trường đêm tối đối với bọn họ cực kỳ nguy hiểm, sở dĩ, bọn họ phải tại bầu trời tối đen trước tìm được một cái an thân chỗ, nói cách khác, một ngày bóng đêm đã tới, này trong thiên địa đã đem sẽ bị Ma thú cùng với một ít không biết tên kỳ quái sinh vật nơi chúa tể, cực kỳ nguy hiểm.
Mà ở này quay kia cổ miếu rất nhanh chạy đi trên đường, Tiêu Viêm đoàn người cũng là gặp một ít đến từ cái khác cái khác thế lực nhân, bất quá song phương vừa thấy mặt, còn không đãi Tiêu Viêm bọn họ có ý niệm trong đầu chuyển động, này Vương Triều nhân mã, đó là dường như chim sợ cành cong thông thường xa xa thối lui, cái loại này cảnh giác nát, khiến phải Tiêu Viêm bọn họ cũng là chỉ có thể buông tha các loại ý niệm trong đầu, ngược lại đem tất cả tâm thần dùng tại gấp rút lên đường trên.
Tại bọn họ loại này tốc độ cao nhất gấp rút lên đường hạ, ước chừng qua nửa giờ tả hữu, kia tiền