Bài viết này mình sẽ chia sẻ tới các bạn cách tạo khung Social Sharing & Subscription vào cuối bài viết. Widget gồm có 3 thành phần là box subscribe (hộp đăng ký nhận tin qua email), box sharing (các nút chia sẻ, like và +1) và box fanpage (hộp fanpage trên facebook). Các bạn có thể xem hình bên.
Demo: View Demo
» Chèn khung đăng ký qua email, các nút like share và fanpage vào sau bài viết cho blogspot
Bước 1: Tại trang quản trị blog, các bạn vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML). Tìm thẻ <data:post.body/>.
Bước 2: Chèn đoạn code sau vào bên dưới nó:
<!-- Social Subscription Widget by www.đoàntrịnh.vn -->
<b:if cond='data:blog.pageType == "item"'>
<style>
.tbibox {
background: #fff;
border: 1px solid #ddd;
height: 360px;
margin: 10px auto;
padding: 10px;
width: 572px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
.tbisharebox {
border: 1px solid #D3D3D3;
margin: -157px 0 0 330px;
padding: 8px;
width: 225px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisharebox:hover {
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbibox'>
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Miễn phí nhận tin mới</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=namkna', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='tntbystc' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
type='text' value='Enter your email...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Theo dõi tôi trên:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='https://www.facebook.com/namkna.blogspot' target='_blank' title='Tìm tôi trên facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUsRUpkyZ7KoUCJBZBlPh5c93ESguFv3AXkWjIfIpAB8nmxqc9r1oHlRev30HBOJ2dWsiMBav_r_GEuJXJ_qSR9_xymers6MDkYXc6yXXPYl-ImTBXvsNmam4uQxSNHmqM3XDGUVndMb4/s32/facebook500.png' alt='facebook'/></a>
<a href='http://twitter.com/namkna' rel='nofollow' target='_blank'
title='Theo dõi trên Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoDgTQ8tiBHxGYeIJCKh1SpfcEOSqFYxDkia68giIHghI1Wj1VEj_rYBX613CUEU_PbpRqL6oDy4bUSahQCppeqt_mTW96jCSlTscEpS19WNsbHVVe8wXVPbVVKCKrSWXYMvnM2yD-zo/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/u/0/106326556171217599260' rel='nofollow' target='_blank'
title='Thêm vào vòng kết nối của Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESRsKRbG9VcPSGQNguvzXe1kL7ocaWO7GKQkps_N3lFPPtVJq7ZwsV26XxYXUJ1WcrC7F1h7stwfxzzIH5M06QlvOCxQ8PqiJz2f_vYawJWFVGA3lhprjgIrt-lwG9OQ79eGbv84L168/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='PINTEREST URL' rel='nofollow' target='_blank'
title='Theo dõi trên Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Gxa5BLi0N7xGzh0_l_3ITZZoxO5HZhSlh6yub-bIFg-RMVqqZEuIJkcpyW_MKm13EseLkh3qwixsr2HR5-tHEFN5H0qHl_4vtxUZufXbxNpBx-f56mRcl9IDuCMFAOSVfonZPNEMkXI/s32/pinterest.png' alt='pinterest'/></a>
<a href='http://namkna.blogspot.com/atom.xml' rel='nofollow' target='_blank'
title='Xem nguồnRSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFMBLJPrYuLjNymI-dht7AKi6KsAxvuffu8AG7YUXlnBHn8hPsQBwMphVS3ErR8VYVGfwk6k4ge3lExS3L3fXiLca0b3kT0rtNRvc0Mlb5QEZXuXHNX20HQEF0izzDwsGJ8PsWK6_bhY/s32/rss.png' alt='rss'/></a>
</div>
</div>
<div class='tbisharebox'>
<script type='text/javascript'>
var switchTo5x = true;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
onhover: false
});
</script>
<div style='margin: 5px 5px;'>
<span class='st_fblike_hcount' displaytext=''></span>
</div>
<div style='margin: -30px -20px 0 0; float: right;'>
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'
data-count='horizontal' data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script>
</b:if>
</div>
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
<a class='addthis_counter'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>
</div>
<div style='margin: 5px 5px;'>
<su:badge layout='1'></su:badge>
<script type='text/javascript'>
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
</div>
</div>
<div style='float: right; margin: -40px -5px 0 0;'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div>
<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>
<div style='margin-top: 20px;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/namkna.blogspot&width=570&colorscheme=light& show_faces=true&stream=false&header=false&height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>
<!-- End Social Subscription Widget by www.đoàntrịnh.vn -->
Tùy chỉnh code:
- Thay thế: namkna thành id feedbunner của bạn. Nếu chưa đăng ký feed cho blog bạn có thể đăng ký nó tại đây
- Thay thế http://www.facebook.com/namkna.blogspot thành URl trang fanpage của bạn trên facebook (không phải trang cá nhân nha các bạn)
- data-lang='en' là ngôn ngữ nút twiter bạn có thể lựa chọn tiếng việt cho nó bằng cách chỉnh sửa lại thành: data-lang='vi'
- http://twitter.com/namkna là URL trang Twiter của bạn.
- https://plus.google.com/u/0/106326556171217599260 Là URl trang Google plus của bạn.
- http://namkna.blogspot.com/atom.xml Là URL trang feeb của bạn.
- PINTEREST URL Là URL trang Pinterest của bạn.
- Ngoài ra bạn có thể điều chỉnh thêm các phần in đậm mình đã đánh dấu trong đoạn code nha.
Chúc các bạn thành công !
Nhận xét
A nam ơi e muốn quảng cáo link đính kèm bật ra với blog mình ko biết a còn cho quảng cáo ko nhỉ???
Trả lờiXóaDạng popop phải không em,. Em có thể liên hệ với anh qua mail tavannam01@gmail.com nha e,
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaA Nam chat FB voi e nez
Trả lờiXóaBạn ơi, mình có gửi 2 câu hỏi trong mục liên hệ cách đây 3 ngày rồi nhưng không thấy bạn trả lời. Bạn giúp mình sớm với
Trả lờiXóaMình không thấy có thể thư bị thất lạc, Bạn có thể gửi thẳng vào tavannam01@gmail.com cho mình nha.
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaEm cố lắm nó mới được như thế này bác nào pro cho e xin ý kiến
Trả lờiXóaThiết bị siêu thị
Code đẹp :) có thể chia sẻ được ko bạn?
XóaHoàn toàn có thể ;)
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaa Nam ơi cho em hỏi, cái thẻ e tìm trong chỉnh sửa co 3,4 thẻ vậy e phải làm như thế nào ?
Trả lờiXóaNếu blog sử dụng readmorre thì thêm vào đoạn có dạng như bên dưới:
Xóa<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaBạn ơi cho Đỗ Chí Dũng hỏi chút làm sao chèn nút Send vào blogspot vậy..! Xin cảm ơn..!
Trả lờiXóa