Đây là một hộp bao gồm nút like và send, hộp đăng ký qua Email (Subscription box) và các biểu tượng lá cờ liên kết đến các mạng xã hội. Widget này được sử dụng rất nhiều trên blog wordpress, nó thuuwongf nằm ở dưới cùng của bài viết. Góp phần thu hút sự chú ý của độc giả truy cập và thuận tiện khi độc giả đó muốn thích hay chia sẻ bài viết của bạn. Đó là lý do tại sao namkna đặt tên cho tiện ích này là "hộp like và đăng ký cuối bài viết". Nó sẽ làm tăng của bạn lưu lượng truy cập vào trang web của bạn thông qua các mạng truyền thông như: Facebook , Google, Twiter,... Đồng tăng truy cập trên các mạng xã hội của bạn từ trang web của bạn.
Hãy xem demo để thấy rõ tiện ích hoạt động thế nào:VIEW DEMO
Ảnh minh họa:
» Thêm Like, Subscription box vào blogspot của bạn!
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn Chỉnh sửa HTML (Edit HTML)
4. Chọn Mở rộng tiện ích (Expand Widget Templates).
5. Tìm kiếm một trong 2 thẻ bên dưới:
<data:post.body/>Hoặc thẻ sau:
<div class='post-footer'>- Dán vào sau nó đoạn code ben dưới:
<b:if cond='data:blog.pageType == "item"'> <style> form.emailform{ margin:20px 0 0; display:block; clear:both; } .namknatext{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirmLfIN-VyRukh4FqYkoAGmb8AkERCNGwSeOs5EOxS5mzOydw7bgZoadoO8inPFylblfWIXdzZ4MF1_VEnZbn259027jFLi40Tl7d_QN6Xsjj9J5nKGN8Hn7pSwSgDM4kPPIpSzlNtER5E/s1600/namkna-blogspot-com-mail.png) no-repeat scroll 4px center transparent; padding:7px 15px 7px 35px; color:#666; font-weight:bold; text-decoration:none; border:1px solid #D3D3D3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } .namknabutton{ color:#666; font-weight:bold; text-decoration:none; padding:6px 15px; border:1px solid #D3D3D3; cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -goog-ms-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); } #doulike-outer { -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -goog-ms-border-radius: 10px 10px 10px 10px; border-radius: 10px; background: none repeat scroll 0 0 transparent; border: 1px solid #D3D3D3; padding: 8px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width:480px; } #doulike-outer:hover{ background: none repeat scroll 0 0 #FFF; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } #doulike-outer td{ padding:3px 0; } </style> <div id='doulike-outer'> <div id='doulike'> <table width='100%'> <tbody> <span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana; color:#FF683F;'>Bạn có thích bài viết này...?</span> <tr> <td> <!-- Facebook like and share link --> <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/> <!-- Google +1 --> <div style='float:left;'> <g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/> </div> </td> </tr> <tr> <td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Nhận tin miễn phí hằng ngày!</p> <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='--namkna--'/> <input name='loc' type='hidden' value='en_US'/> <input class='namknatext' 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='namknabutton' title='' type='submit' value='Submit'/> </form> </td> <td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Follow us!</p> <a href='http://feeds.feedburner.com/--namkna--' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg63jZ9oy3oRQSCDY_8tybIVbonEXVRVBx-YKL54cJfa_OtHKn_NkEGDQX7HKrgdCUo8VBCcqJwNwZEC4f4KU8NejIMEZwzaMHUo6as19BYrYJxnbBYUKQfEuQelzG0FVNHNO8eQNSCz15t/s1600/namkna-blogspot-com-RSS-0001.png'/></a> <a href='http://twitter.com/namkna' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0UOlDc61siByBgutJfGlwcFJ5aoHxfQdnUnLKtd7lAfyNhpTcgYDOql4e-IWXq2tDjT00YcW8EXLZKt5NbwwlLQPCYUFjFpvkQnB4iJXwDArbl0Rz49COJ3kAzuyEtO-OBy22aoLoKbdl/s1600/namkna-bl;ogspot-com-Twitter-001.png'/></a> <a href='http://www.facebook.com/pages/namkna-blogspot' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGekmeT8-SsEQsL9S-V6F5jmrYbY-VipablXw46PcrxDkLgSPQkNrPGZ76ANzVzXEnR8q4VRlgVbmXLR_GJz7kt0jvr22BMQs1VCA502bSBnTroAe4L2dx-Pn_QA45_hER1G6T-d93bCXT/s1600/namkna-blogspot-com-flag-FaceBook.png'/></a> </td> </tr> </tbody></table></div></div> </b:if>
Tùy chỉnh!
- Thay namkna thành id trên twiter của bạn.
- Thay --namkna-- là id feed của bạn.
- Thay http://www.facebook.com/pages/namkna-blogspot là URL trang facebook hoặc fanpage của bạn.
- Thay #FF683F là màu sắc của chữ "bạn có thích bài viết này...?"
- Cuối cùng lưu mẫu lại sau đó vào một bài viết bất kỳ và xem kết quả nha.
Tác giả: mybloggertricks.com
Nhận xét
anh giúp em tạo mấy cái nút share như hình này sau cái hộp đăng ký nhận tin này với,thanks. https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/c0.0.277.277/p403x403/554892_421144134649048_36088303_n.jpg
Trả lờiXóaEm chèn đoạn code sau vào vị trí em muốn hiển thị nha:
Xóa<!-- AddThis Button BEGIN http://namkna.blogspot.com/-->
<style>
.wdt_button{float:left;margin:5px}
<style>
<div class="wdt_button"><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></div>
<div class="wdt_button"><a class="addthis_button_tweet" tw:count="vertical"></a></div>
<div class="wdt_button"><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></div>
<div class="wdt_button"><a class="addthis_counter"></a></div>
<!-- AddThis Button END http://namkna.blogspot.com/ -->
<!-- FAST SHARING SCRIPT -->
<!-- TWITTER SCRIPT -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'>
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
<!-- AddThis Button END -->
Nhận xét này đã bị tác giả xóa.
XóaVâng. cảm ơn anh nhiều.
Trả lờiXóaKhông có gì đâu em! :))
XóaDemo:
Trả lờiXóahttp://namkna-test.blogspot.com/2013/03/demo.html
Cảm ơn bác nam thủ thuật này :D
Trả lờiXóaKhông có gì rất vui vì bán thích nó :)))
XóaAnh xem hộ em sao khi e làm theo bài này không thành công, xong e xóa hết code của anh đi để lai như ban đầu thì bài đăng ở trang chính của em lúc nào cũng chỉ xuất hiện có 2 bài, dù đã chỉnh sửa lại số bài đăng thì nó vẫn hiện 2 chả hiểu làm sao. Anh xem hộ e với
Trả lờiXóahttp://tuong-dep.blogspot.com/
Em hãy puplish để được giúp đỡ nha
XóaChủ blog ơi, nếu không tìm thấy thẻ thì làm thế nào?
Trả lờiXóathẻ post.body ấy
Trả lờiXóaTHẻ <data:post.body/> blog nào cũng có. Bạn hãy bấm chọn MỞ RỘNG TIỆN ÍCH MẪU và bấm Ctrl + F tìm sẽ thấy/
Xóa- Lưu ý mỗi blog có từ 2 đến 4 đoạn <data:post.body/> do vậy chèn đúng vị trí nó mới hiển thị nha.
anh cho em hoir :ID feed là gì vậy ạ
Trả lờiXóaAnh ơi mình làm sao cho nó hiển thị giống trong ảnh này được
Trả lờiXóahttps://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn2/969520_178150725696965_158554936_n.jpg
của em nó cứ hiện mặc định anh ạ
1. Em xem BÀI NÀY
Xóa2- Em áp dụng theo 2 bài sau
BÀI 1
Bài 2
cảm ơn anh Nam nhiệt tình nhiều nhé,thật sự ngôi nhà của anh rất phong phú,
Trả lờiXóaKhông có gì :)
Xóaanh nam ơi , tại sao mình đăng ký nhận mail miễn phí mà báo lỗi thế này:
Trả lờiXóaThe feed does not have subscriptions by email enabled
là sao anh nam, help mình với
Em hãy đăng ký feed như bài này nha, Đăng ký và cài đặt Feedburner Atom cho Blogspot
XóaAnh nam ơi, thật sự em có đăng ký rồi , link đây ah
Xóahttp://feeds.feedburner.com/truongchanphong
Mà sao lại ko dc đăng ký nhận mail vậy anh nam
Em xem bài viết sau nha: Sửa lỗi "The feed does not have subscriptions by email enabled"
Xóađã thành công anh nam ơi, vô cùng cảm tạ anh nhé
XóaKhông có gì đâu em.
Xóaanh nam ơi, mình muốn úp hình lên mà muốn sử dụng link dạng này: http://4.bp.blogspot.com/-PywZTL2iYfk/UJfPjB8m4hI/AAAAAAAADkk/vkKLQlK_yU8/s45/avanta-namkna-blogspot-com.JPG. Thì thế nào anh.
XóaEm xem bài này nha: Lưu trữ hình ảnh trên blogger không giới hạn băng thông.
XóaNgoài ra em có thể xem thêm: Thủ thuật chỉnh sửa ảnh trên Blogger & Picasa
hay qua anh nam
XóaKhông có gì rất vui vì giúp được em/
Xóaanh Nam ơi, cái blog này http://kenhnhac.blogspot.com/ mình muốn làm dạng theo kiểu này, tức là bài viết theo hiểu bố trí theo dòng và cột, mấy dòng mấy cột tùy mình bổ sung, thì cách thức để tạo được như thế làm thế nào vậy anh, trong blog anh có đường link này .
XóaNói thật là câu hỏi của bạn khong rõ ràng cho lắm nên hiện tại khong thể nói trước được điều gì.
Xóaah, nghĩa là em muốn thiết kế phần nội dung blog như http://kenhnhac.blogspot.com/ thì thủ thuật là ntn vậy anh nam?
XóaĐó là tiện ích autoreadmore kết hợp với related post nếu chỉ lọc nguyên code đó thì blog em sẽ không tận dụng hết chức năng do vậy sẽ chậm trong khi vẫn phải load toàn bộ code.
Xóaanh nam, vậy anh có bài viết nào nói về 2 thủ thuật này ko, cho em xem nhé
XóaHiện tại anh chưa có bài nào về thủ thuật đó. Bài tới anh sẽ viết về nó :)
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaThank a namkna!
Trả lờiXóaE mới tập làm blog đc khoảng hơn 1 tuần rùi! Hầu hết các kiến thức em sử dụng đều được lấy từ blog của a. Thank vì tinh thần chia sẻ của anh nhé!
Em chỉ cập nhật 1 chút đó là mấy cái blog của em làm, nhiều khi dán đoạn code trên vào sau <data:post.body/> thì không thành công.
Nên em đành lên google search kiểu khác và thấy bài của itviet360 tại
http://www.itviet360.com/2013/05/like-va-share-bai-viet-cho-blogspot.html
Nhưng mà em vẫn thích kiểu này của anh hơn, thế là em thử lấy râu ông này cắm cằm bà kia thử xem có được không.
Em lấy đoạn code của anh chèn sau <div class='post-footer'> (của itviet360 hướng dẫn).... không ngờ lại được.
Hehe..... em update lên đây để lỡ có ai cùng cảnh ngộ như em có thể làm thử, biết đâu lại đc như em :D
Àh quên, nhân tiện pr cho cái blog em mới tập tành làm tý, có gì ae mình giao lưu nha.
gamebeen.com
Cám ơn em đa ủng hộ blog anh :)
XóaNhững đoạn code dạng <data:post.body/> hay <div class='post-footer'> mỗi blog đều có 2 đến 3 đoạn như vậy, nên đôi khi chèn không đúng vị trí nó sẽ không hiển thị.
bác nam cho em hỏi sao cái blog của em nó không hiện nút share vậy
Trả lờiXóahttp://thietbisieuthigiare.blogspot.com/
Một blog thường có 2 đoạn: <div class='post-footer'> bạn chèn nhầm vj trí rồi bạn ak.
Trả lờiXóacòn cách nào hiện sao với hiện lượt view khác ko anh Nam? Trang http://graddit.com/ratings-widget quá chậm làm nặng cả blog.
Trả lờiXóaHiện tại thì blog chưa thể can thiệp để hiện được lượng view trừ khi sử dụng plugin từ bên thứ 3. Nếu dùng code script thì nó chỉ đếm được lượt xem của chính người đó, và xẽ biến mất khi xóa cookie trình duyệt.
Xóavang, nhung ma trang nay vao cham lam anh a, co trang nao nhe hon ko, don gian thoi ko can dep.
XóaEm có thể thử với trang sau nha: Đếm lượt xem bài viết cho blogspot với Firebase
XóaĐoạn cuối ko phải data:post.body/ mà là div class='post-header nha anh.
XóaNó hiện lượt view rồi nhưng cưa quay vòng vòng ko ra số view
http://www.themmua.com/