Bài viết này hướng dẫn các bạn tạo các nút like ẩn đằng sau các lá cờ trên sidebar. Điểm đặc biệt là khi dê chuột lên lá cờ này thì các nút like đó sẽ hiển thị để cho độc giả click vào đó + 1 cho bài viết hoặc chia sẻ bài viết của bạn lên mạng xã hội. Bạn có thể xem ảnh minh họa bên dưới:
Namkna từng giới thiệu cho các bạn rất nhiều mẫu nút like và chia sẻ bài viết lên các mạng xã hội. Mỗi các có một điểm đặc biệt khác nhau nhưng tất cả đều nhằm một mục đích là SEO blog hoặc bài viết của bạn tốt hơn. Tạo ra sự tò mò và kích thích +1 của độc giả trên blog của bạn.
» XEM DEMO
» Thêm tiện ích Nút like với hiệu ứng ẩn hiện sau lá cờ trên sidebar cho blogspot
Để thêm nó vào blog bạn chỉ cần làm theo một số bước đơn giản sau:
1. Dăng nhập vào blog.
2. Chọn thẻ Bố cục (Layout).
3. Chọn Thêm tiện ích => Tạo một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào.
<h3>+ 1 để ủng hộ diễn đàn</h3> <style> .social-share-top { background: none repeat scroll 0 0 #CCCCCC; float: left; height: 62px; margin: 0 3px; width: 62px; } .social-share-top .soc-item { margin-top: 11px; opacity: 0; } .twitter-top-share { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEeiU6V-N3a_lCvV86kzJnSiPWAu8TIdpxPV9sIZc6GTj1S50KySkIoUoNdacguAmXCjfSwNDCXCg9j7NUvOGKVtJMxorFWRki22OgXc3Vsv8fv6f578HDGZhqsn90VRqgw7QQSZTrGs/s1600/social-icon-namkna-blog.png") no-repeat scroll 0 0 transparent; } .twitter-top-share:hover .soc-item { opacity: 1; } .twitter-top-share:hover { background: none repeat scroll 0 0 transparent; } .facebook-top-share { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEeiU6V-N3a_lCvV86kzJnSiPWAu8TIdpxPV9sIZc6GTj1S50KySkIoUoNdacguAmXCjfSwNDCXCg9j7NUvOGKVtJMxorFWRki22OgXc3Vsv8fv6f578HDGZhqsn90VRqgw7QQSZTrGs/s1600/social-icon-namkna-blog.png") no-repeat scroll -134px 0 transparent; } .facebook-top-share:hover .soc-item { opacity: 1; } .facebook-top-share:hover { background: none repeat scroll 0 0 transparent; } .google-top-share { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEeiU6V-N3a_lCvV86kzJnSiPWAu8TIdpxPV9sIZc6GTj1S50KySkIoUoNdacguAmXCjfSwNDCXCg9j7NUvOGKVtJMxorFWRki22OgXc3Vsv8fv6f578HDGZhqsn90VRqgw7QQSZTrGs/s1600/social-icon-namkna-blog.png") no-repeat scroll -68px 0 transparent; } .google-top-share:hover .soc-item { opacity: 1; } .google-top-share:hover { background: none repeat scroll 0 0 transparent; } .share-top-share { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEeiU6V-N3a_lCvV86kzJnSiPWAu8TIdpxPV9sIZc6GTj1S50KySkIoUoNdacguAmXCjfSwNDCXCg9j7NUvOGKVtJMxorFWRki22OgXc3Vsv8fv6f578HDGZhqsn90VRqgw7QQSZTrGs/s1600/social-icon-namkna-blog.png") no-repeat scroll -270px 0 transparent; } .share-top-share:hover .soc-item { opacity: 1; } .share-top-share:hover { background: none repeat scroll 0 0 transparent; } .addthis_floating_style.addthis_counter_style { padding: 0 !important; } </style> <div style="display:block; width: 300px; height:69px; border-bottom: 3px solid #ff6a40; margin-top:15px;" class="sectionAd"> <div style="margin: -12px 14px 2px"> <div class="social-share-top facebook-top-share"><div class="soc-item"> <iframe src="//www.facebook.com/plugins/like.php?href=http://namkna.blogspot.com&send=false&layout=box_count&width=44&show_faces=false&font&colorscheme=light&action=like&height=90&appId=294310977347137" style="border:none; overflow:hidden; width:54px; height:60px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe> </div></div> <div class="social-share-top google-top-share"><div class="soc-item"> <xen:if is="{$xenOptions.plusone}"> <div class="plusone shareControl"> <div id="___plusone_2" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 50px; height: 60px;"><iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/_/+1/fastbutton?usegapi=1&bsv=o&count=true&size=tall&hl=vi-VN&origin=http%3A%2F%2Fnamkna.blogspot.com&url=http%3A%2F%2Fnamkna.blogspot.com%2F&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.vi.Qdj2g3tOcX8.O%2Fm%3D__features__%2Fam%3DIQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTPKKLYAlxtiNS76Jw9oophWOmv-3Q#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I2_1389940686204&parent=http%3A%2F%2Fnamkna.blogspot.com&pfname=&rpctoken=10456990" name="I2_1389940686204" id="I2_1389940686204" vspace="0" tabindex="0" style="position: static; top: 0px; width: 50px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 60px;" marginwidth="0" marginheight="0" hspace="0" frameborder="0" scrolling="no" width="100%"></iframe></div> </div> </xen:if> </div></div> <div class="social-share-top twitter-top-share"><div class="soc-item"> <xen:if is="{$xenOptions.tweet.enabled}"> <div class="tweet shareControl"> <a class="addthis_button_tweet" tw:count="vertical"></a>> <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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </xen:if> </div></div> <div class="social-share-top share-top-share"> <div class="soc-item"> <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a href="#" style="display: block;" class="addthis_counter"><a href="#" title="View more services" target="_blank" class="addthis_button_expanded">0</a><a class="atc_s addthis_button_compact"><span></span></a></a> <div class="atclear"></div></div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fcc0e503f99ef6b"></script> </div> </div> </div> </div> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fnamkna.blogspot&width=300&height=80&colorscheme=light&layout=standard&action=like&show_faces=true&send=false&appId=340580066059320" style="border:none; overflow:hidden; width:300px; height:80px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
Các bạn hãy chỉnh lại những phần mình tô màu đỏ và in đậm cho phù hợp với trang của bạn nha.
Nếu có bất cứ khó khăn gì khi áp dụng thủ thuật này đừng ngần ngại hãy comment bên dưới mình sẽ hỗ trợ.
Nhận xét
E bóc tem--). A Nam e hỏi tý ạ. E đã làm theo bài này a hướng dẫn: http://namkna.blogspot.com/2011/12/sua-loi-khong-phan-trang-khi-xem-theo.html
Trả lờiXóanhưng số bài viết theo nhãn vẫn hiện mặc định là 20.
A xem cho e ak, vd nhãn truyện cười: http://www.cuois2.com/search/label/truyen%20cuoi
Cảm ơn a!
Theo như anh quan sát thì hiện tại trang nhãn của em đang để hiện thị là 15 bài ở mỗi trang. Nên em có thể chỉnh lại số lượng ở phần perPage: 15
XóaNgoài ra làm như Bài hướng dẫn trên mà em nói chỉnh các con số trùng với đoạn trên là được e ak.
A Nam chưa hiểu ý e rùi. E phân ở trang chủ là 15 bài thì hiện đúng nhưng theo nhãn lại là 20 mặc định của blogger. E đã làm như bài a hướng dẫn ở trên và cũng đã chèn dấu ngắt vào tất cả bài viết nhưng vẫn hiện 20 ak--). A xem giúp e ạ!
Trả lờiXóaAk quên e muốn để ở nhãn là 15 bài giống như trang chủ cho đẹp. Hi
Trả lờiXóaNếu muốn như thế em phải chính sửa toàn bộ những link cố địnhc ảu nhãn như sau: max-results=5"'
XóaTrông <a href="http://bài này</a> anh đã nói đến ngay đầu rồi đó nếu dùng link rỗng không có phần đó nó sẽ hiện 20 bài mặc định blig nào cũng thế.
E chưa hiểu, a viết vội quá sai lung tung beng hết. Bài nào a hướng dẫn khác ko ah?. E đã thay tất cả 'expr:href='data:label.url + "?&max-results=15"' rùi ak.
XóaNhư thế là được rồi lúc này tất cả các link nhãn của em khi bấm vào nó đều có dạng /search/label/truyen cuoi?&max-results=15 thì nó sẽ hiển thị tối đa 15 bài thôi.
XóaBởi sau khi đã thay như em nói các link liên kết của nhãn trên trang của em không còn dạng ban đầu là /search/label/truyen cuoi nữa. Tất cả chúng đều có đuôi giới hạn số bài viết trên một trang như sau: ?&max-results=15
Em hãy thêm đoạn ?&max-results=15 vào link nhãn của em bên trên và truy cập sẽ thấy nó có 15 bài thôi.
E hiểu rùi. Cảm ơn a ak!
Xóacô gửi tin nhắn trong mail cháu xem giúp cô nhé.
Trả lờiXóaCháu nhận lời mời rồi cô cấp quyền quản trị cho cháu nha cô :)
XóaVideo của Youtobe khác so với blog và web em ak. Vì google họ chỉ index thumb video của họ mà. Nó là độc quyền. Blog em có thể cho ảnh đại diện theo cách sau:
Trả lờiXóahttp://namkna.blogspot.com/2013/01/hien-thi-profile-google-tren-ket-qua.html
Ak a Nam cho e trao đổi link với nhé. Key của e truyện cười : http://www.cuois2.com/. Key của a Nam là?? để e liên kết ạ.
Trả lờiXóaAnh đã liên kết với e rồi đó. E kiểm tra nếu cần thay đổi gì thì Pm với anh nha.
Xóaanh share cái công cụ này giúp em với :
Trả lờiXóahttp://namkna.blogspot.com/p/code-convert-for-blogspot-chuyen-doi.html
Em có thẻ xem một trong 2 bải viết hướng dẫn sau nha.
XóaTạo trang covert code (endcode) for blogger
Tạo khung converter code cho blogger
bên anh có bài này không :
Trả lờiXóahttp://truyen-phutvui.blogspot.com/2012/07/widget-hien-thi-bai-viet-trong-mot-nhan.html
em làm không đc - nhờ anh hướng dẫn giúp em vơi
Bài viết đó copy nhưng thiếu phần hướng dẫn. Em có thể xem bài viết này nha: Liệt kê tiêu đề bài viết gần đây theo nhãn - Recent Posts for laber
XóaLưu ý để tiện ích này hoạt động thì trang của em phải đăng ký FEEDBUNNER nha, Sau khi đăng ký rồi thì phải KÍCH HOẠT nó lên nha em.
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóakích hoạt nó như thế nào anh
Trả lờiXóaKích hoạt như bài này nè em :
XóaSửa lỗi "The feed does not have subscriptions by email enabled"
bạn ơi cho mình hỏi làm sao để đặt nút like này ở vị trí trên khung comments như của bạn được vậy, và mình mới làm nút này thì đã thấy thông báo đã có gần 4 triệu người thích nội dung này là sao vậy mình nghĩ chắc là do ID ở gần cuối đoạn code phải không nhỉ, nếu đúng hì phải sửa ID thế nào bạn nhỉ? cảm ơn bạn.
Trả lờiXóaBạn phải thay đổi những phần in đậm cho thích hợp với trang của bạn chứ :)
XóaKhung link như của mình thì bạn xem bài viết này nha: Khung Author box có nút like cho blogger ves 2
cảm ơn bạn nhiều để mình làm rồi nhưng nó vẫn thế để mình làm theo cái của bạn xem sao, tiện thể cho mình hỏi mình muốn làm thêm cái hướng dẫn comments như của bạn đây thì phải làm thế nào nhỉ, thanks bạn nhiều, ah đầu năm mới cũng chúc bạn mạnh khỏe....và có nhiều bài viết hay nữa nhé
Xóa. Đăng nhập Blogger, vào Settings (Cài đặt) >> Comments (Nhận xét) kéo xuống mục Comment Form Message (Thư thông báo mẫu nhận xét)rồi dán vào đó đoạn văn bản nội quy nhận xét, sau đó nhấn SAVE SETTINGS (Lưu cài đặt) để lưu cài đặt.
XóaTiếp theo bạn chỉ cần dán đoạn code bên dưới vào trước thẻ ]]></b:skin>
.comment-form p {background-image: url(http://1.bp.blogspot.com/-3UWB4yhuSFA/UbsdUdxBD-I/AAAAAAAAKRE/VmycOK9dj0Y/s1600/warning_namkna-blogspot-com.png);background-position: 12px 27px;background-repeat: no-repeat;background-color: #FFF799;border: #EE9D00 solid thin;padding: 1em;padding-left: 70px;color: #000;margin:30px 12px 20px 0}
Ngoài ra bạn có thể xem bài này nha: Tạo khung nội quy nhận xét đóng tự động
vẫn không được bạn à, mình làm như thế rồi mà vẫn không thấy gì cả.chổ nội quy nhận xét đó
Xóavẫn không được bạn à, mình làm như thế rồi mà vẫn không thấy gì cả.chổ nội quy nhận xét đó
XóaMình đã vào trang của bạn, hiện bạn đang dùng mẫu của blogger bạn có thể áp dụng thủ thuật Di chuyển ghi chú nhận xét của thread comment theo khung nhận xét khi reply trong blogspot để phần ghi chú không bị chạy cuối bài viết.
XóaVề phần màu khung ghi chú, Mình đã test rất oke có thẻ do mẫu của bạn xung khắc ở đoạn code nào đó, bạn vui lòng gửi mẫu vào tavannam01@gmail.com mình sẽ chỉnh sửa giúp cho.
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaAnh Nam ơi, anh có thể cho em xin code hộp like giống như Blog của anh không ạ?
Trả lờiXóaĐây nha e:
Xóa<div class='subicons'>
<!-- AddThis Button BEGIN -->
<div class='wdt_button'><div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div>
</div>
<div class='wdt_button'><a class='twitter-share-button' data-count='vertical' data-via='namkna' href='http://twitter.com/share'>Tweet</a></div>
<div class='wdt_button'><div class='g-plusone' data-size='tall'></div></div>
<div class='wdt_button'><a class='addthis_counter'></a></div>
<!-- AddThis Button END -->
</div>
<div style='clear:both;'></div>
<div class='emailicon'>Đăng ký ngay để nhận bài mới hoàn toàn miễn phí qua email của bạn</div>
<div class='count'>
Có<a href='http://feeds.feedburner.com/Namkna'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/Namkna?bg=00CC33&fg=0033FF&anim=0' style='border:0' width='88'/></a> người đăng ký Namkna
</div>
<div style='clear:both;'></div>
<div class='emailsub'>
<div class='emailupdatesform left'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='right' id='newsletter' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=namkna","popupwindow","scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input class='text' name='email' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='Enter your Email address...'/>
<input class='submit' type='submit' value='Đăng ký'/>
<input name='uri' type='hidden' value='namkna'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div></div>
<style>
/* email susbrice */
#newsletter .text,#newsletter .submit{float:left;background:#5C5959;font-size:12px;line-height:16px}
#newsletter .text{border-top:0;border-right:1px solid #3e3e3e;border-bottom:0;border-left:0;border-radius:7px 0 0 7px;padding:9px 10px;width:170px;height:16px;color:#eee}
#newsletter .text:hover,#newsletter .text:focus,#newsletter .submit:hover{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#066}
#newsletter .text:focus{outline:0}
#newsletter .submit{margin:0;border:0;border-radius:0 7px 7px 0;padding:9px 0;width:65px;height:34px;color:#999;cursor:pointer}
#newsletter .submit:hover{color:#eee}
.wdt_button{float:left;margin:5px}
.count{font-size:14px;font-weight: bold;vertical-align:middle}
.subicons{background:#F0F2F3;border:1px solid #ddd;height:80px}
.emailsub{padding:0; float: left; margin-left:10px}
.emailicon{background: url(http://1.bp.blogspot.com/-Vf_GGb7b_PE/UzfWM3c6rQI/AAAAAAAAMb0/jpCvtYCJKCw/s1600/email-icon.png) no-repeat left center; float: left; padding: 5px 0px 0px 35px;line-height: 15px; vertical-align:middle; font-size:14px; color:#333;}
.emailupdatesform{margin:0;width:100%;margin:10px 0 10px}
</style>
Em cảm ơn anh ạ!
XóaAnh ơi tuy nhiên trang chủ của anh Like Facebook là like Fanpage ạ, anh có thể chỉ dẫn cho em cách làm được không ạ?
XóaNó là like face không phải like fan e ak. Like fanpage thì em có thể xem bài hướng dẫn này: Tạo Facebook Like Box chuẩn HTML5 cho blogspot
XóaNam ơi, cho mình hỏi là cái hình mình làm sao để nó hiện giống social sharing của bạn được ko, ý mình là cho nó hiện luôn, ko cần hình ảnh khi rê chuột vào nó mới hiện.
Trả lờiXóavà subscribe phía dưới đó là đi chung luôn 1 widget đó hay là riêng vậy Nam?
Bạn có thể xem comment mình trả lời Văn việt ngay bên trên comment của bạn có đoạn code bạn cần đó.
XóaAnh Nam, cho em hỏi
Trả lờiXóaLàm thế nào để có mỗi bài có mỗi nút like share ở ngoài. Chứ không phải kích vào mỗi bài mới có.
Như trang này : http://danhngoncuocsong.vn/
Trả lời hộ em, em cảm ơn ạ
Đẹp lắm, thanks nhiều.Mà Sao nút thứ 2 là nút G+ ko có tác dụng vậy AD, giúp mình được chứ?
Trả lờiXóa